人気ブログランキング |
Studio TA Subsite の案内とお知らせ

<   2017年 09月 ( 37 )   > この月の画像一覧

明石公園 2017.09.26 夏の忘れもの

2017年 09月 26日
焼けつく様な陽射しは去ったが、暑いといえば暑い日。 雲が無い空の下、公園に出向く。

到着は14時半、人は少なくて静か。 ハト様ポイントで待つがえらく静かで、10分ほど経ってから1羽、2羽と来て、10羽位の群れがようやく集まりました。 マーカーは居なくて、小出しに食事を撒く。 そのグルーブが去ったり、もどったり。 同じメンバーが戻って来ているのか判らないが、いつも群れは10羽以下です。

15時20分、ようやくマギ2が現れました。 やはり10羽位で、アサッテも仲間でした。

b0174191_20515614.jpg

そして、その数分後に、態度の大きな1羽がいるのに気付きました。 私の手から当たり前に食事を食べるし、コイツはツメ白? 中指のツメが余り白くなく、これは少しずつ変わっているのかも。 顔は生え変わり中で、目元が濃ゆい。 最後に、他のハト達を押し退けて膝の上で威嚇ダンスを始めたので、間違いありません。

b0174191_21013792.jpg
b0174191_21032770.jpg

しばらくぶりですが、こんな遅くに出て来るとは。 15時40分、今度は左ユビが現れました。 今日のハト達の現れ方は、別れて行動していた小群が、時々ポイントに周って来て、私から食べて行ったという気がします。 でもツメ白は面白い。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。





by Ataron | 2017-09-26 21:12 | 鳥さんの写真 | Trackback | Comments(0)

訂正箇所をHTML編集画面ですぐに見つける方法

2017年 09月 23日
普通の投稿では余り長文にならないので、この話は少し特殊でしょう。

スキンアレンジなどでCSSコードを扱う場合、全文がとても長くなります。 また、HTML編集画面は、コードとタグが入り乱れて来ます。 こんな投稿を扱っている時に、「通常編集」で訂正したい場所を見つけ「HTML編集」で訂正しなければならなくなった時の問題です。

「通常編集」と「HTML編集」の画面は、スクロール位置は全く連動していませんから、その箇所をHTML編集画面の中で探すことになります。 これが短い投稿文なら簡単ですが、「入り乱れた」投稿文の場合、なかなか探すのに苦労したり、勘違いして別の所を弄ってしまう事があります。

編集画面のアレンジをしているので、CSSでこれを改善する方法を考えたのですが、Javaスクリプト等を使わないと難しい様です。 で、ブラウザの検索機能を使った代案の覚え書きです。



先ず、普通は使わない文字で、主要フォントからマークに利用する文字を探します。 Windowsなら「文字コード表」で探せば、沢山候補があります。

a0349576_22540594.png

これをIMEに文字登録します。 私は1文字登録を良く使いますが、この場合は「た」の読みで「❖」のマークを登録しました。「た」と打って変換すればこのマークが直ぐに出る様にしたわけです。

「通常編集」で訂正したい場所を見つけたとして、その近辺で、後で処理がし易い場所にこのマーク文字を書き込みます。 下図はその例で「❖」を書き込んでいる所です。

a0349576_22403327.png

「HTML編集」に切り替えます。 Chromeでは「F3」を押すと、下図の様に検索窓が出ます。

a0349576_23045242.png

ここで、先の「❖」を打ち込み、「Enter」を押すと、自動的にこのマーク行までスクロールします。「❖」を消して「訂正箇所」を修復すれば、目的を達するというわけです。



Chromeで実際に試すと、「HTML編集」に切り替えてから、「F3」「た」「↓×2」「Enter」で、目的の行に到達しました。 慣れると、実用的なテクニックに出来そうです。 編集画面自体に、簡単にワープできる機能があれば良いのですが、ブログ編集画面ですからね。




この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-09-23 23:31 | PC環境(ハード/ソフト) | Trackback | Comments(0)

明石公園 2017.09.23 北岸しか空いていない

2017年 09月 23日
秋分の祭日、公園はやはり人が多く。

到着は14時半、ハト様ベンチは先客、その隣はシェパード連れ、北岸に向かうとシートで寝ている中年カップル?と、安心できる場所がありません。 見渡すと緑の芝生の北岸が空いてました。

果たしてハト達が判るかなと思いながら芝生に立って待っていると、数分で1羽だけがやって来ました。 マギニィです。

b0174191_20591033.jpg

食事を出してやると、少し落ち着きなく食べました。 場所もいつもと違い、数が少ないとやはり不安になるのです。 他のハト達は全く気付かず、5分間位は彼だけの食事。 少し落ち着いて手から食べさせたりしていると、10羽位がやって来ました。 アサッテと左ユビが居ました。 左ユビは私と判ると平気で膝に乗って来ます。 もちろん食事の配布を始めました。

それ以上のハトは来ず、彼等は食事を独占できるはずだったのに、そうは行きませんでした。 この北岸はWestの森に近く、そこでカラス達がしょっちゅう騒いでいたのです。 ハト達は、カラスの声にとても敏感です。 左ユビは時々食事から気をそらして警戒していました。 そして彼が飛び出したので、他のハト達も付いて飛び出した様です。 彼は先取りをするタイプで、群れの動きを左右する事は多いのかも知れません。

b0174191_21071689.jpg

ハト様ポイントが空いたので、そちらへ戻りました。 しばらくすると、左ユビと数羽がやって来ました。 また食事を配布しましたが、今日は他の人からも色々もらったのか、余りガッツいていません。 少し食べて、またカラスの声で飛び出して、戻って来なくなりました。 少し賑やかな休日、結局半分以上の食事が余った日でした。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



by Ataron | 2017-09-23 21:25 | 鳥さんの写真 | Trackback | Comments(0)

エキサイト編集画面のアレンジ(68) 「編集画面のアレンジ」を「userstyles.org」からインストールする

2017年 09月 22日
「Stylus」には、投稿サイト「userstyles.org」に登録された各種スタイルを、簡単にインストールできる機能があります。 このシステムの利用で、編集画面のアレンジを、より簡単に正確に導入する事が可能になりました。 コードのコピーや適用先の設定などが不要になります。



Stylus の導入


エキサイト編集画面のアレンジは、ベースとしてChromeまたはFirefoxに対応した拡張機能「Stylus」が必要です。 その導入手順は、使用中の各ブラウザに対応する以下のリンクを参照ください。


Chrome版 Stylus



Firefox版 Stylus




Excite Blog Writer のインストール


次に「userstyles.org」から「Excite Blog Writer」のスタイルをインストールします。「Excite Blog Writer」の中身は「Chrome版-More拡張」「Firefox版-More拡張」と同じです。 これらをこのサイトに登録する際に、判り易いパッケージ名としただけです。 使用しているブラウザに対応したタイプを選択してください。


Excite Blog Writer (Chrome)


Chromeで、以下の「Excite Blog Writer (Chrome)」のページを開いてください。


下の様なページが表示されたら、スタイル適用時のサンプル画像の「右下」の「install Style」を押します。

〔注意1〕
使用しているブラウザに「Stylus」か「Stylish」の拡張機能が有効になっていない場合、「install with Stylish」のボタンが代わって表示されます。 拡張機能の「Stylish」が使いたくない場合や、使えないブラウザの場合は、ボタンを押さないでくだい。

〔注意2〕
この様なダウンロードサイトでは、目的アプリの「ダウンロードスイッチ」に見える、全く無関係なアプリの「ダウンロードスイッチ」を、よく見かけます。

サイト運営者には「宣伝枠」は必要悪です。 下の私の投稿した以下のページも、下方の「DownLoad」スイッチは「無関係な宣伝」です。 表示されている「FunCustomCreations」は有料アプリで、評判が悪いものです。 ここの「宣伝枠」は差替えで「Adobe」等のまともな会社の宣伝も出ますが、推さない様に注意してください。

a0349576_17191258.png

下の様に「インストールの是非」の確認があります。 ここで「OK」を押すと、一瞬でスタイルのインストールが完了します。

a0349576_17471219.png



Excite Blog Writer (Firefox)


Firefoxで、以下の「Excite Blog Writer (Firefox)」のページを開いてください。 インストール操作や注意は、Chrome版と全く同じです。




Excite Blog Writer の扱いについて


「Stylus」の管理画面を開いてください。 下の赤枠で囲んだ「Excite Blog Writer」のスタイルが、新たに追加されているはずです。

a0349576_17500261.png

エキサイト編集画面にログインしてください。 初回だけブラウザキャッシュの関係か、編集画面の起動に時間がかかる様です。 それ以降は、アレンジ/非アレンジでの起動時間差を特に感じません。 ユーザースタイルシートは本質的にフィルターですから、その差が判るほどの遅延は生じないはずです。

先のインストールの時点で、編集画面には「Excite Blog Writer」のアレンジが適用されます。


登録スタイルのリスト


「Stylus」の管理画面の右枠は登録スタイルのリストです。「userstyles.org」からインストールしたスタイルは、インストール元とリンクをセットしてあり、アップデートを簡単に出来る様になっています。

a0349576_18390739.png

スタイルの「有効 / 無効化」を切替えるチェックボタンです。
「スタイル名」をクリックすると、そのスタイルを編集する編集画面が開きます。
スタイルをインストールした「userstyles.org」のページを開きます。
「×」で、スタイルを登録から削除します。
「userstyles.org」をチェックするボタンです。
▪一度ボタンを押すと、このスタイルが更新されていたらボタンが赤色に変化します。
▪現在のスタイルが上書き更新されて良いなら、もう一度ボタンを押します。
 (注意: 自分で再アレンジしている場合は、その内容を失うので注意してください)
▪ボタンが「」の形になり再度注意喚起されます。 インストールして良いならボタンを押します。
▪インストールが終了するとボタンが「」に変わり、スタイルのアップデートが完了します。


「Excite Blog Writer」のオプション操作


「Excite Blog Writer」を「Stylus」編集画面で開くと、このスタイルが複数セクションに分けられたCSSコードで構成されている事が判ります。

各オプションはセクション単位に分けられています。 セクションの「適用先」設定の切替えで、セクション単位で「有効」「無効」を変更出来ます。 これを利用してオプションの ON/OFF を切替えます。 下図は「適用先」の設定を切替えているところです。

a0349576_09352619.png

▪多くの場合で、「URL」の選択は「無効」、「次で始まるURL」の選択は「有効」になります。
(「有効」の選択型が異なる場合があるので、各バージョンの説明記事を確認ください)

▪切替え後は、メニュー左上の「保存」を押す必要があります。 忘れると元に戻ってしまいます。



Stylish への対応について


「Stylus」の先祖である拡張機能「Stylish」で、「Excite Blog Writer」は問題なく利用できる様です。 Firefox版Stylishで確認した所、画像パレットiframe問題に関してはむしろ良い結果です。

FirefoxでStylishを有効にして、上記のFirefox版のページで「install」操作をすると、Stylishにスタイルがインストールされます。(Stylusを有効にしているとStylus側にインストールされます) Chrome版Stylishは動作未確認ですが、おそらくStylusと同じ結果になると思われます。

ユーザースタイルシートは、ブラウザによる差異はありますが、そのベース環境の差はほぼ無いと言えそうです。





この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-09-22 19:53 | ブログスキンのアレンジ | Trackback | Comments(0)

明石公園 2017.09.21 群れは分散の傾向

2017年 09月 21日
晴れ、公園に13時過ぎ。 何故か人が多く、スタジアムの運動会の賑やかな音が聞こえてきます。

ハト達は、およそ30羽ほどがすぐに集まって来ました。 このところ群が小さくなってます。 最初っから左ユビが居て、安定した出席率。

b0174191_08553917.jpg

彼は、膝に乗ってアピールするが、カメラを向けるとすぐ食えないので、とっとと地上に降ります。 私より臨機応変なのです。 このグループに左アシが居ましたが、他にはマーカーは居ません。

今日は買い出し日、アサダスタジアムの運動会をちらっと覗きながらホームセンターに。 ハト様ポイントに帰って来て少し待つと、20羽位が集まって来ました。 時刻は14時半です。

2度目のグループに、アサッテがいました。 気が付くと左の膝に乗ってます。

b0174191_09263022.jpg

アレンジCSSの作業が増えたり、呑みの誘いがあったり、けっこう忙しい時もあるのです。 ハト達はあずかり知らぬ人の世は。 左アシは2度目も居て、それにマギ2を見つけました。 口元に何か着けていて、鼻コブも染まってます。 ハト達の中に、時々赤いのを嘴に付けているのを見かけます。

b0174191_09374647.jpg

良くアオドンが近くに来ますが、少し小さくて若いのが、じーっとハト達と私を見てます。 残念ながらアオドンはハト達の食事が食べられません。

b0174191_09392776.jpg

柵の下から顔を出したりしてるのは、まあリクエストしてるわけで。 バッグの隅に見つけたパンのかけらを投げると、のっそりと食べました。


Panasonic DMC-G8 + G 12-60mm F3.5-5.6 で撮影、画像はクリックで拡大表示します。



by Ataron | 2017-09-21 23:55 | 鳥さんの写真 | Trackback | Comments(0)

エキサイト編集画面のアレンジ(67)「おすすめブログテーマ」の配置移動

2017年 09月 19日
「おすすめブログテーマ」の配置は最上行の右端で、これは「新規作成」の時にのみ表示されます。 その左の「テンプレート選択」ボタンも、やはり投稿の「新規作成」時のみに表示されます。 この2個の表示で「新規作成」の場合だけ、編集画面のウインドウ幅が広くなります。 これは実際の使用の多くの場合に、余計な幅をかかえる事になります。

a0349576_23391140.png

それ故、この機能を常時OFFに出来るオプションを作っていましたが、幅をとらずに常時表示のままがベストです。 余り複雑な操作を好まないユーザーが、デフォルトでこの環境のコンパクトさを損なうのは、本意ではありません。

で見渡したところ、最下段の「公開」スイッチ群の右端が、候補地になりました。

a0349576_22355392.png

フォバー時は、本文の編集枠内に拡張する案も試しましたが、「公開設定」と「画像パレット」が被さり、これを下に廻す変更をすると、そこらじゅうの「z-index」の収拾がつかなくなりました。 それで、少し表示が狭いですが、下の様な拡張の形にしました。 これは「z-index」を触らずに実現できます。

a0349576_22415712.png

同時に「公開」ボタン群が「おすすめブログテーマ」のボタンの右に行かない様に「max-width」を指定し、他にも細かい部分修正をしています。 以下の太字部が、今回の Chrome-More拡張 ver.5 の修正内容です。 IE版・Firefox版も同様の修正を行います。(いずれも基本CSS)

#wrapper {
margin-bottom: 5px; }

#trb_themeTtl {
position: absolute;
top: 714px;
left: 850px;
margin: 0;
padding: 2px 0px 2px 8px;
width: 69px;
height: 36px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
overflow: hidden;
transition: 0.5s; }

#trb_themeTtl:hover {
top: 670px;
left: 700px;
padding: 5px 10px;
width: 207px;
height: 74px; }

#entrySubmitBtm {
margin: 15px 0 0 25px;
max-width: 1130px; }

#entryEditWrap .alert {
left: 325px; }

#entryMoreText .alert {
left: 310px; }




この記事はカテゴリ「スキン編集」にトラックバックしています。


by Ataron | 2017-09-19 23:25 | ブログスキンのアレンジ | Trackback | Comments(0)

ユーザースタイルシート環境の現状

2017年 09月 19日
この1~2週、Firefoxの導入から始まり、Firefox版のユーザースタイルシート環境で「Stylus」に出会いました。 かねがね「Stylish」というのが、IE以外のブラウザでは定番だった様子だったので、その系譜の「Stylus」は大いに興味があり、ようやく私もスタンダードな世界の仲間入りをした気分でした。

また、編集画面のアレンジコードを、他の環境で試すのはChrome以来で、ChromeとIEは同時進行で構築していたので、実際は初めてという感じでした。 スリリングな経過でしたが、予想以上にすんなりとFirefoxでもアレンジが働き、80点の成績といったところ。 ただし、「Firefox + Stylus」の環境では、画像パレットにアレンジ抜きで編集画面が起動してしまう問題が残りました。

a0349576_15372967.jpg



「iframe」は、HTML上で問題を生じ易い機能という印象がありますが、はたしてどうなのでしょう。 私の未熟さで、Chrome版が1年近くも画像パレットのアレンジが出来なかったのだけど、最初にこの問題にぶつかった時に、相当ネット上を調べてまわりました。 その際に、「iframeにCSSが効かない」というキーワードに何度か出会い、良く判らないままに「そう言うものなのか」と半分思ってしまいました。 しかしなんのことはない、呼び込まれるiframeのURL指定でユーザースタイルシートを設定したら、画像パレットにアレンジが適応されました。

自分も深く判っていない状態では、ネット上に同様の問題に出会って解決した事例がないと、なかなか先に進めないものです。



「StylusのChrome版」をテストしましたが、こちらではFirefoxの問題は生じませんでした。 万歳です。 当たり前なのかも知れませんが、Chromeという環境で「Stylist」という拡張機能をベースにして作ったスキンは、完璧に「Stylus」で動作しました。

Chrome + Stylist Chrome版 ◎
Chrome + Stylus Chrome版 ◎

Firefox + Stylus Firefox版(Beta)▲  Stylusは 2017年11月に予定される Firefox 57 に適合。
Firefox + Stylish Firefox版 ○     但し、Stylishは Firefox 57の基準に不適合、11月以降の動作は不明。

問題は「iframe」の画像パレットだけです。 小さな部分でブラウザの差異は出るが、決定的な問題にならないものでした。 4種の組み合わせで、Firefox版「Stylus」だけが問題有りという事で、その解決が期待されます。

そして、長い間お世話になった「Stylist」は今後もフォローする考えですが、Chrome版「Stylus」が全く無問題であった事から、今後は「Stylus」ベースでメンテナンスや開発を継続するつもりです。



「Stylus」を使う事によって、ひとつの新しい展開が可能になった事に気付きました。

「Stylus」は、ネット上にアップロードされたスタイルをワンクリックでインポートできるのです。「Stylus」用のスタイルのアップロード・ダウンロードサイトは「userstyles.org」というサイトです。

ここで「Stylus」で検索すると、以下の様に多数のスタイル(Themes & Skins)が登録されています。 多くは Googleの検索トップ画面や YouTybeのサイト画面のテーマ、あるいは拡張機能 Stylus自身の画面のスキンだったりします。

a0349576_20313456.png

このサイトは、本来は「Stylish」のために作られたサイトの様で、ユーザーが作ったユーザースタイルシートを投稿し、他のユーザーがその一覧からスタイルをダウンロードするといった、ユーザーの作業によって成り立っているサイトです。 本来「スタイルのCSS」はスクリプトを含まず安全性は高いのですが、投稿データにはセキュリティ審査をしている様です。

「Stylus」の管理画面には、この「userstyles.org」を直接開くスイッチがあり、私がここにデータを登録すれば、「Stylus」の管理画面に、エキサイト編集画面のアレンジスタイルを、簡単に直接インポートできる様になります。

a0349576_21101718.png

現在の手作業のCSSコピーより、これは簡単に間違いなくセットアップが可能になるでしょう。 現在、このサイトへのアップロードを用意している所で、審査を通れば、いずれ報告したいと思います。



〔追記〕2018.02.01
私に最初にユーザースタイルシートの価値を教えてくれた「Stylist」は、残念ですが配布を終了した様です。 扱い慣れたユーザーなら「Stylus」等の新しい環境への移行は簡単でしょう。 安全で有効なユーザースタイルシートの機能自体は、今後も多くのユーザーに浸透し継承されると思います。



この記事はカテゴリ「スキン編集」にトラックバックしています。



by Ataron | 2017-09-19 21:35 | ブログスキンのアレンジ | Trackback | Comments(0)

Stylus の導入と設定方法(簡易版): Chrome版 📌

2017年 09月 18日

拡張機能「Stylus」を Chromeに導入する


Chromeで以下のリンクをクリックし、Chrome拡張機能の管理サイトの「Stylus」のページを開きます。


下図のページが表示されたら、ページ右上の「CHROMEに追加」を押します。

a0349576_20175959.png

下の様に確認のダイアログが出て「拡張機能を追加」を押すと、Chromeのツールバーの右端に「Stylusアイコン」が出来ます。

a0349576_20191030.png

「Stylusアイコン」アイコンが出来たら導入は完了です。 自分のページに戻ります。



Stylus の「オプション」と「管理」


「Stylusアイコン」を左クリックすると下のダイアログがポップアップ表示されます。 このアイコンが「Stylus」への主要なアクセスボタンです。

a0349576_23281840.png


「オプション」


メニューの 「オプション」を押します。 Chromeの拡張機能ページが開き、下のダイアログが表示されます。 これは「Stylus」の環境設定ですが、ここでは簡単なお勧め設定を紹介します。

a0349576_20375474.png

「Stylusアイコン」で表示されるポップアップ(ダイアログ)の幅の指定です。
  これは「400」px程度がお勧めで、狭過ぎると扱い難いです。

ネットからインストールした公開スタイルの更新チェックの間隔です。
  これは自動更新「0」がお勧め。 更新は「管理画面」でいつでもできます。

  ▪公開スタイルがアップデートされると、ページのアレンジ結果が変わります。
   アレンジの更新を公開したユーザー任せにしておく場合はこのままにします。
  ▪特に公開スタイルをアレンジして使う場合は、自動更新を「0」にしておかないと
   自動更新で自分のアレンジが上書きされ、無くなってしまいます。
  ▪自分で作ったローカルスタイルやコピーしたスタイルは、上書きされません。


「管理」


「Stylusアイコン」を左クリックし、メニューの 「管理」を押します。「Stylus」のメイン画面の「管理画面」が開きます。 以下は、管理画面で知っておくべき最小限の説明です。

「管理画面」は、「Stylus」に登録したスタイルを一覧表示します。 初期状態は右側が空白ですが、スタイルをネットからインストールしたり、自作すると、右側に登録スタイルのリストが出来ます。

a0349576_20405203.png

下は幾つかのスタイルを登録した状態です。

a0349576_21440913.png

「チェックボックス」は、スタイルの有効・無効を直接に切替えます。

「スタイル名」のクリックで、このスタイルを編集する「編集画面」が開きます。

「インストール元リンク」 このスタイルの登録サイトを開くリンクです。

このスタイルを「Stylus」から削除するボタンです。
  このスタイルのバックアップが無い場合は、スタイルは永久に失われます。

このスタイルだけの更新チェック → アップデートをするボタンです。

このスタイルの適用先を示す、単なるリスト表示です。

登録リストの全てのスタイルの更新チェック → アップデートを行うボタンです。



Stylusの使用方法の詳細について


このページの内容は「Stylus」の操作に必要な最小限の説明です。 優れた「Stylus」の細部を知り、フルに使いこなしたい場合は、以下のページを参照ください。 ユーザースタイルシートのフィルター機能にとどまらず、ブラウザを使う色々な場面で、有効な活用方法を見出すことが出来るでしょう。

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション

Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境




by Ataron | 2017-09-18 13:47 | PC環境(ハード/ソフト) | Trackback | Comments(0)

Chrome拡張機能「Stylus」の使用方法(2) 管理画面 / 編集画面 / 編集環境

2017年 09月 18日
Chrome拡張機能「Stylus」の導入や「アイコン機能メニュー」の操作などについては、以下を参照ください。 このページは「Stylus」の使用方法(1)の続きです。


下は「Stylusアイコン」を左クリックして「アイコン機能メニュー」を開いたところです。

a0349576_19470682.png

ここで「管理」を押すと「管理画面」が開きます。

「管理画面」は Stylusのメイン画面で、スタイルの登録や管理を行います。 左側が「管理メニュー」、右側は Stylus内に登録したスタイルの「リスト画面」です。

a0349576_19522775.png



「管理メニュー」


「フィルター」「オプション」「バックアップ」の3種のメニュー(青枠)は、タイトルの前の「▾」ボタンを押すと閉じる事が出来ます。


フィルター


「フィルター」

登録した全スタイルを分類し、必要なスタイルだけをリスト表示する機能です。 利用するスタイルが増えて来ると、この機能は便利になります。

▪一番下の枠は登録スタイル内の検索枠です。 検索に関する詳細については、この枠の「ⓘ」ボタンを押すと表示されます。

「ソート指定」
「リスト画面」の表示順(昇順・降順)などを指定します。

「全スタイルの更新をチェック」
ネットからインストールした全てのスタイルについて、更新があったかどうかをチェックするボタンです。

▪更新があれば、更新を確認するボタンが表示され、押せば更新します。
▪インストールしたスタイルのコードを変更している場合、更新により変更内容が上書きされて無くなります。 コードを変更をしたスタイルが有る場合に、この注意表示があります。
▪変更内容の上書きを避けたい場合には、変更したコードを新たなローカルスタイルとして保存する必要があります。 インストールしたスタイルは、たとえスタイル名を変更しても上書きされます。 これは一般のファイルの仕様とは異なります。
▪ローカルで作成したスタイルは、更新チェックの影響を全く受けません。

「新スタイルを作成」
スタイルをユーザー自身が新しく作成するには、このボタンで編集画面を開きます。


オプション


「適用先欄のファビコン」
クリックを入れると「リスト画面」の 「適用先URL」にファビコン(サイトのシンボルアイコン)を表示します。 更に「▸」ボタンを押すと、ファビコンのカラー/グレーの選択が可能になります。「リスト画面」の がファビコンです。

「適用先欄の表示件数」
「リスト画面」の ❺ ⓳ ⓴ が「適用先欄」です。 スタイルの 「適用先URL」の表示上限数を指定します。 」マークを押すと一時的に全ての行を表示出来ます。

「オプションUI」
Stylusの「オプション画面」(ブラウザ拡張機能の設定画面)を開きます。

「ショートカット」
Stylusの「ショートカット設定画面」を開きます。

「テーマ」
このボタンを押すと「userstyles.org」のサイトを開き、Stylus自体に利用できるスキンデザインが一覧表示されます。 そこでスキンをインストール出来ます。


バックアップ


「スタイルをエクスポート」
このボタンを押すと「管理画面」にリストされたスタイルが、纏めて「.json」ファイルとしてバックアップされます。

▪Windows10では Chrome / Firefox のバックアップ先は「ダウンロード」フォルダです。 Chromeの場合は、バックアップすると「管理画面」のウインドウ下端に「ダウンロード」フォルダへのアクセス枠が表示されます。

a0349576_20070906.png

「スタイルをインポート」
このボタンは「ダウンロード」フォルダを開きます。 バックアップした「.json」ファイルを開くと、そのファイルに含まれる全てのスタイルがインポートされます。

▪バックアップと現在に同じスタイルがあり、スタイルの内容が異なる場合は、バックアップのスタイルで上書きされて、過去の時点スタイルに戻ります。
▪自分で作成したスタイルを更新している場合は、インポートで過去データで上書きされるので、注意をしないと最近のアレンジを失います。
▪バックアップのファイル容量は大きくないので、バックアップを惜しまない様に。



「リスト画面」


一般のブラウザ画面のヘッダーからポップアップする「アイコン機能メニュー」からも ⓮ ⓯ ⓱ の機能が使えますが、管理画面ではより細かな操作が可能です。

a0349576_20101908.png

「チェックボックス」
スタイルの有効・無効を直接に切り替えます。「編集画面」で「有効・無効 → 保存」をで押すのと同じ意味になります。

「スタイル名」
この部分をクリックすると、このスタイルを編集する「編集画面」が開きます。

「スタイルインストール元へのリンク」
ネットからインストールしたスタイルの、インストール元のページを開きます。
(ユーザーが自作したローカルスタイルには表示されません)

「削除スイッチ」
×」はこのスタイルを削除するスイッチです。 ユーザーが自作したスタイルやアレンジしたスタイルの場合は、バックアップがないとコード内容が永久に失われます。

「更新ボタン」
普通は 「全スタイルの更新をチェック」でリスト全体の更新をしますが、このスタイルだけを更新したい場合は、このボタンで更新をします。 操作は に準じます。
(ユーザーが自作したローカルスタイルには表示されません)

❺ ⓳ ⓴「適用先欄」
この部分は単なる表示でリンク機能はありません。



「編集画面」


「管理メニュー」の 「新スタイルを作成」を押すか、「リスト画面」の「スタイル名」をクリックすると、スタイルの「編集画面」が開きます。


スタイル編集の要点


下はサンプル入力をした状態です。

a0349576_20180497.png

スタイルの基本構成は上図の赤枠の3ヵ所に表示されます。

「スタイル名」(任意の名前を付けます)
「適用先」(スタイルを適応するURLの範囲指定)
「CSSコード」


適用先の設定


上図の 「適用先」は「すべて」の設定です。 しかし実際は、無関係なサイトへの誤適応を避けるため、適用範囲を限定するのが普通です。

適用先を設定するには 」ボタンを押します。 これで下図の入力枠と「-+」のボタンが表示されます。

a0349576_20205881.png

「適用先」の範囲は ❺ ❻ の組み合わせで決まります。 詳細は次項を参照ください。

「指定形式」
この枠をクリックして4種の指定形式のいずれかを選択します。
(選択の基準が判らない時は「次で始まるURL」が無難です)

a0349576_20240596.png

「適用先URLの入力枠」
入力内容は、「半角空白」や「/」「.」が意味を持つので正確な入力が必要です。

▪ブラウザでスタイルの対象ページを開き、Stylusの「アイコン機能メニュー」(ポップアップ)のURL自動取得の機能を利用すると便利です。


指定形式の区別


〔 URL 〕
に記入されたURLに完全に一致したページにのみ、スタイルが適応されます。

▪「http://」「https://」を省略したURL表記は不適となり適応されません。

〔 次で始まる URL 〕
前方一致です。 URLの左側からの文字が一致していれば、スタイルが適応されます。

▪「http://」「https://」を省略したURL表記は不適となり適応されません。
▪ 右側は、URL表記の途中で途切れていても構いません。

〔 ドメイン上の URL 〕
の記述がドメイン名(サブドメイン名を含む)として有効なら、そのドメインとサブディレクトリにスタイルが適応されます。

▪「http://」「https://」などで始まっていたり、末尾に「/」があるとドメイン名にならず、不適で適応されません。
▪サブドメインまで指定すると、ドメインや他のサブドメインには適応されません。
▪ドメインへの指定はそのサブドメインにも適応され、その逆は適応されません。
▪ドメインやサブドメインの区別はネットで調べてください。

〔 正規表現に一致する URL 〕
これは正規表現検索でフィットするURLに、スタイルを適応します。 一般的でないので、正規表現に関してはネットで調べてください。


適用先の追加と削除


-+」(削除ボタン・追加ボタン)
「適用先」の削除・追加をするボタンです。「」を押すと、下の様に新しい適用先の行が追加されます。

a0349576_20304869.png

▪「適用先」は行単位で1つの範囲を指定しますが、「指定形式」が適用先ごとに異なっていても構いません。
▪「適用先」の数や順番に制限はなく、行の割込み追加や削除で整理が出来ます。
▪「」ボタンは、行単位で「適用先」を削除します。


セクションの追加


「セクション」は、複数スタイルを1個のスタイル名で登録する機能です。 1つのサイトに関して、複数ページのスタイルを管理する場合、あるページについて複数のパーツに分けてスタイルを管理する場合などに、「セクション」を利用します。

a0349576_20334830.png

「他のセクションを追加」
このボタンを押すと、新しい 「適用先」「CSSコード」のセットが、下側に追加されます。 このひとつのセットが「セクション」です。

「複製」
このボタンを押すと、セクションのコピーが下側に追加されます。 バックアップを作ってから、セクションを再アレンジをする等、利用方法は色々考えられます。

この ❽ ❾ の操作により、下図の様にセクションが追加されます。

▪セクションはコード1、コード2と連番が付けられ、幾つでも増やせます。

a0349576_20355777.png

「編集枠ハンドル」
編集枠の下端の「編集枠ハンドル」をドラッグすると、編集枠の高さを任意に調節できます。 またダブルクリックすると「ウインドウの高さ」「最後に設定した高さ」のどちらかに切り替わります。

「セクションを削除」
追加したセクションをセクション単位で削除します。 セクションを削除すると、同じ場所に 「削除したセクションを復旧」が表示されます。

a0349576_20371169.png

削除した編集枠のコードを元に戻す機能で、このバックアップは「編集画面」を閉じるまで保存されます。 しかし、一度「編集画面」を閉じると無くなりますから注意が必要です。

「▲」「▼」(セクション移動ボタン)
セクションの順番を上下に隣接したセクションと入れ替えます。 コード番号とセクションの位置だけが変更されます。 ただし、CSSコードの後位優先が関係して、セクション位置の変更がページデザインに影響する場合があります。

「書式整形」
このセクションの編集枠のコードだけを書式整形し、他のセクションの編集枠は整形されません。「編集画面」の「左メニュー」の「書式整形」ボタンは、全てのセクションのコードを書式整形し、動作する範囲だけが異なります。

a0349576_20382856.png

書式整形機能の詳しい扱いについては、以下を参考にしてください。
  「Stylus」エディタの「書式整形」を使いこなす



「編集画面メニュー」


スタイルの保存・登録


「編集画面」で、スタイルの内容に手が加えられると、「保存」ボタンがグレーから黒に変わります。 新しくスタイルを作った場合は当然ですが、この画面を閉じる場合は、編集内容を保存するか否かを問われます。

「保存」
「保存」ボタンを押すと編集したスタイルが登録されます。 新しく作成したスタイルは新規登録、登録スタイルを再編集した場合は、これまでの内容を上書きします。

a0349576_20422885.png

「管理画面に戻る」
「編集画面」から「管理画面」に戻るボタンです。 保存で「編集画面」が閉じないのは、このエディタの仕様です。「管理画面」に戻る必要がないならブラウザのタブを閉じます。

「有効」
スタイルの有効・無効を切替えます。 チェックを操作は 「保存」を押すことで実際に反映します。「管理画面」の「リスト画面」のチェックボタンは「保存」なしで有効・無効が直接に反映します。

「自動プレビュー」
チェックを入れると、編集中のスタイルを適用し続けます。 編集中のコードを「保存」するまで、コード自体は固定されませんが、その効果をつぶさに確認できます。

慣れると便利ですが、「保存」しページのリロードで実効するコードが有り、プレビューが確実でない場合があります。 また、DevTools等を使用している場合に、編集操作がToolsの作業を上書きする事など、逆に不便になる事もあります。 慣れない間はオフがお勧めです。


インポート と エキスポート


「インポート」
「編集画面」に、外部スタイルを取り込むことが出来ます。 このボタンを押すと、受け入れ用の小ウインドウが開き、そこに「Mozilla Format」の外部コードを貼り付けて取り込む事が出来ます。

▪「Mozilla Format」は、コードと適用先をセクション毎に纏めたフォーマットで、スタイルデータの保存・交換に適したものです。

「エキスポート」
「編集画面」に取り込んでいるスタイルを「Mozilla Format」に変え、送り出し用の小ウインドウに表示します。 例えば「userstyles.org」にスタイルを登録するには、この小ウインドウ内のコードをコピーして、サイト上の編集枠に貼り付けます。

a0349576_20462215.png


オプション


「編集画面」のエディタ本体は高機能です。 各種の設定が可能で、本格的な用途に対応できるでしょう。 編集枠の背景・文字色のセットが下の赤枠の「テーマ」で選択可能です。 下は黒バックですが、白バックで少し輝度を落としたものもあります。

a0349576_20475909.png




by Ataron | 2017-09-18 09:48 | ブログスキンのアレンジ | Trackback | Comments(0)

Chrome拡張機能「Stylus」の使用方法(1) 導入 / アイコン機能メニュー / オプション

2017年 09月 18日
Chrome拡張機能で、ユーザースタイルシート環境の最先鋭となりそうな「Stylus」は、2017年3月に初版が発表された様です。「Stylish」の商用化傾向に抗して、この無垢な拡張機能を編纂したグループに拍手です。 未だ確かな日本語のマニュアルが少ないので、基本的な部分を整理したいと思います。


Stylus」をChromeに導入する


Google Chrome の拡張機能の管理サイトの「Stylus」のページは、以下のリンク先にあります。


Chromeで上記のページを開き、ページ右上の「CHROMEに追加」を押します。

a0349576_20175959.png

下の様に確認のダイアログが出て「拡張機能を追加」を押すと、Chromeのツールバーの右端に「Stylusアイコン」が出来ます。

a0349576_20191030.png

「Stylusアイコン」が出来たら導入は完了です。 自分のページに戻ります。




アイコン機能メニュー


「Stylusアイコン」を左クリックすると、下の様な「アイコン機能メニュー」(ポップアップ)が出ます。 これは「Stylus」のページ上のコントローラーです。 多くの操作はここを起点に行います。

a0349576_13480931.png

ポップアップ上部に、このページに適用可能な登録スタイルがリスト表示されます。

チェックボックスでスタイルごとに有効・無効を切り替える事が出来ます。 その設定はブラウザを閉じても保持されます。 これは管理画面での操作と同等の機能です。

これらのアイコンを押してスタイルの編集・削除が可能です。 これらは管理画面での操作と同等の機能です。

チェックボックスで Stylusに登録した全スタイルの適用のON/OFFを切り替えます。 適用のON/OFFは、次にこれをチェックするまで保持されます。 他のページに設定したスタイルも働かなくなります。

クリックすると、このページに適用可能なスタイルを「userstyles.org」に公開されたスタイルの中から検索します。 検索の結果は、下図の様にポップアップの下にスタイルのリストとして表示します。

a0349576_08592184.png

検索をすると、上図 の様に表示が変わり、更にクリックすると「userstyles.org」のページを開く事が出来ます。

「アイコン機能メニュー」の下に表示される検索結果リストを操作することで、アレンジ対象のページを表示したまま、公開されたスタイルを試す事が出来ます。

▪リストのサムネイルをクリックすると、その場でインストール・削除が出来ます。
▪リストのスタイル名の部分をクリックすると、「userstyles.org」のそのスタイルの登録ページを開くことができます。

開いたページをアレンジするスタイルを作成する場合に、自動的に「適用先」のURL設定をする機能です。 アンダーラインの左端は「サブドメイン名」、中央は「ドメイン名」、右端は「URL前方一致」と、クリック位置に応じて「適用先」の指定形式を選べます。 下図は取得する際の一例です。

a0349576_13514261.png

「管理」ボタンは Stylusの「管理画面」を開きます。「管理画面」は、スタイルの管理を行うメイン画面です。 その操作については下のリンク先を参照ください。


「オプション」ボタンは、次項で説明する「Stylusオプション」画面を開きます。

「ウィキ」ボタンは「github.com」の「Stylus」のページを開きます。「Stylus」の技術的な問題はここに集約されていますが、特に理解しなくても使えます。



Stylus のオプション設定


オプション設定はデフォルトでも困ることはないでしょう。 導入の初期に使い易い設定にすれば、後はそう触る必要はありません。

a0349576_14042914.png

「ツールバーアイコン」
「Stylusアイコン」は2タイプから選べます。 アイコンの表示は Stylusの動作状態を示します。

a0349576_16481463.png

▪「スタイル適応中」は、1個以上のスタイルが適用されている状態です。
▪「スタイル適応なし」は、登録スタイルで適用先に該当するスタイルが無いか、有ってもすべて無効化している状態です。
▪「Stylus OFF」は、「すべてのスタイルをオフにする」をチェックした場合で、Stylusは適用を停止しています。(「Stylus」の無効化ではありません)

「ツールバーアイコンのバッジ」
「Stylusアイコン」の横に、適応中のスタイル数を表示する機能です。 配色の設定は下の様になります。

a0349576_17200706.png

「ポップアップの幅」
「アイコン機能メニュー」の幅は、400px程度が操作上で使い易くてお勧めです。

「アイコン機能メニュー」から「編集画面」を開く場合の設定です。
別タブ表示か別ウインドウ表示かを選びます。「管理画面」から「編集画面」を開く場合は、別タブや別ウインドウは開かれません。

「アイコン機能メニュー」は、 デフォルトでスタイルのリストが上側です。 OFFにするとスタイルのリストが下側になります。

a0349576_13514544.png

「白い境界線を追加する」
「Stylus」が暗背景のデザインの場合に、ページ背景色が暗いと「アイコン機能メニュー」の辺縁が不明瞭になる場合があります。 これをONにすると下図の下側の様に「アイコン機能メニュー」が白枠になります。

a0349576_13514942.png

「更新」
「userstyles.org」からインストールしたスタイルで、その更新があれば、自動的にアップデートする機能です。 更新が自分にとって好ましくない場合もあり得るので、私は「0」指定で、管理画面で手動でアップデートをしています。

「スタイル更新」は、管理画面の手動アップデートと同等のスイッチで、インストールして登録した全てのスタイルの更新チェックをし、更新をします。

「ショートカット」は「Stylus」のキーボードショートカット登録を開きます。

▪「拡張機能を有効にする」は「Stylus」自体の有効/無効を切換えます。
▪「管理」は「管理画面」を開きます。
▪「すべてのスタイルをオフにする」は のチェックボックスと同等です。

下図は「すべてのスタイルをオフにする」を「Ctrl + S」に設定した所です。 これは、頻繁にスタイル適用のON/OFFを切換え、その効果を確認する場合に便利です。

a0349576_14230732.png




by Ataron | 2017-09-18 09:42 | ブログスキンのアレンジ | Trackback | Comments(0)