Studio TA Subsite の案内とお知らせ

エキサイト編集画面のアレンジ(75) Chrome版 - More拡張 ver.6.3

2018年 01月 11日

Chrome版 - More拡張 ver.6.3 の更新内容


ver.6.3 の更新内容は、微修正です。
今年に入ってから気付いたのですが、アイコンの表示が本来のアレンジとは異なって来ていました。

a0349576_18425336.png

本来のデザインは下で、赤枠の5個のアイコンが違っています。

a0349576_18430490.png

殆どのアイコンは「FontAwesome」などの文字を擬似要素「::before」で表示させていますが、問題の5個のみは擬似要素「::after」で更に文字を重ねて表示しています。 この「::after」で表示させた文字の配置指定が、何らかの理由でズレてしまった様です。 IE11版、Firefox版も同様のアレンジをしていますが、ズレの発生はChromeのみで、ブラウザかOSで何かの仕様変更があったのかも知れません。

いずれにせよ、修正版の「ver.6.3」を「userstyles.org」にアップロードしました。



さて、すでにお気付きの方もおられると思いますが、エキサイトブログのシステムのSSL化が進んでいる様です。 これは未だ完全ではなく、公表もされていませんが。

ブログの「設定」画面に入ると、ブラウザのURL窓には「 http://userconf.exblog.jp/config/basic/ 」が表示されます。 これを「 https://userconf.exblog.jp/config/basic/ 」と「s」を追加して「Enter」を押すと、同じ「設定画面」が表示されます。 つまり、後者の「https://」のアドレスが既に有効になっているのです。 以前はそうではありませんでした。

a0349576_19290521.png

調べると、ブログ編集画面も既に「S」付きで表示できますが、画像パレットが以前のまま「http://」で呼び込んでいる様で、ChromeでもIE11でも「安全な接続」とは表示されません。 SSL環境が完成すれば公表があるはずで、ユーザーサイドで慌てる必要はない話ですが。

ただ、「S」付きのアドレスで編集画面を開く事が出来る様になると、Stylusの「適用先アドレス」を改めないとアレンジが適用されなくなります。 そこで、従来の適用先アドレスに「S」付きアドレスを併記して、SSL移行期に対応しました。 移行後には適用先アドレスの「S」無しのアドレス分は不要になりますが、そのまま放置しても問題はありません。

以上、More拡張 - ver.6.3 以降の適用先指定は、当分は「SSL」「非SSL」の併記になります。



 Chrome版 - More拡張 ver.6.3 のアレンジを実現するには 

エキサイトブログ編集画面のアレンジ「Chrome版 - More拡張 ver.6.3」は、「Excite Blog Writer(Chrome)」というスタイル名で「userstyles.org」で配布しています。

これは、Chrome 拡張機能「Stylus」をベースに機能するユーザースタイルシートです。 アレンジした編集環境を実現するには、まず「Stylus」をChromeに導入し、次に「Excite Blog Writer(Chrome)」をインストールします。


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

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

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

a0349576_14023058.png

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

a0349576_16290744.png

ページがStylusのサイトに変わりますが、これで導入は完了です。 アイコンが出来たら自分のページに戻ります。
「Stylusアイコン」を左クリックして、メニューの「管理」を押します。 これが「Stylus」へのアクセス方法です。

a0349576_10482222.png

下の様な「管理画面」が表示され、「Stylus」の操作はここを中心に行います。 下図は初期状態で右側が空白ですが、スタイルを登録すると、登録スタイルのリストが表示されます。

a0349576_19100672.png


 Excite Blog Writer(Chrome)のインストール 

次に「userstyles.org」から「Excite Blog Writer(Chrome)」のスタイルをインストールします。 このスタイルの中身は「Chrome版-More拡張」で、このスタイル名は登録する際のパッケージ名です。 このサイトに登録されているのは、常に「Excite Blog Writer / Chrome版-More拡張」の最新版です。

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


下の様なページが表示されたら、ページ上部のメイン画像「右下」の Install Style を押します。

〔注意1〕
使用しているブラウザに「Stylus」の拡張機能が有効になっていない場合、「install with Stylish」のボタンが代わりに表示されます。 私は「Stylish」はお勧め出来ません。「Stylus」の導入を再確認して、「Excite Blog Writer (Chrome)」のみをインストールしてください。

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

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

a0349576_16304400.png

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

a0349576_16312253.png



 Excite Blog Writer(Chrome)の扱いについて 

「Stylus」の管理画面を開いてください。 下図の様に「Excite Blog Writer(Chrome)」のスタイルがインストールされ、右枠のリストに追加されているはずです。 これで編集画面のアレンジ環境が整いました。

a0349576_20185946.png

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


 Stylus管理画面 の リスト操作 

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

a0349576_20371229.png

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


 Excite Blog Writer(Chrome)の セクション 

「Stylus 管理画面」で 「スタイル名」をクリックして「スタイルの編集画面」を開いてください。 下図の様に、ver.6.3 は右側に縦方向に12のコード枠が並びます。

a0349576_22211165.png

上から順に「セクション1」「セクション2」…「セクション12」で、それぞれ左上隅に「コード1」「コード2」…「コード12」の表示があるので、どのセクションかはコード番号で確認出来ます。


 セクション単位で「有効」「無効」を選択 

それぞれのセクションに赤枠の「適用先」に「指定形式」の枠があり、枠をクリックすると下の様に4種の「指定形式」が表示されます。

a0349576_10105589.png

この「指定形式」を変更して、セクション単位の「有効」「無効」が選べます。

 ◎「次で始まる URL」のセクションは「有効」
 ◎「URL」のセクションは「無効」

「指定形式」を変更したら、左側メニューの左上の「保存」を必ず押します。 これで変更が決定されます。

オプションのCSSコードは、セクション単位に纏めていますので、以上の方法でオプションの「有効」「無効」を選択してください。 なお、1セクションに複数の適用先がある場合、「有効」「無効」を混在させず、指定はどちらかに統一します。


 Excite Blog Writer(Chrome)の セクション内容の詳細 


 セクション1    Chrome版-More拡張 ver.6.3 基本CSS

 セクション2    ver.6 画像パレットCSS

 セクション3    ver.6 テンプレート編集CSS

 セクション4    ver.6 フリーページ編集CSS

 セクション5    編集終了画面CSS

 セクション6    配色オプション ダークグリーン ★

 セクション7    画像パレット配色オプション ダークグリーン ★

 セクション8    枠線オプション ダークグリーン ★

 セクション9    ダイアログ背景色オプション ベース グレー ★

 セクション10    ダイアログ背景色オプション 中央部 グレー ★

 セクション11    2行編集アイコン 表示オプション

 セクション12    おすすめブログテーマ 非表示


◎「セクション1」~「セクション5」は基本構成で必要なセクションで、常に「有効」が推奨です。

◎「★」印のセクションは配色オプションで、暗背景には全ての★を「有効」とするのが推奨です。 もっとも、一部の★のみを「有効」にして、明背景に利用することが可能です。(例:明背景に 8、9、10 を追加)

◎「」印のセクションは機能オプションです。 必要に応じて「有効」「無効」を選択します。

◎「userstyles.org」の配布時は、「セクション1」~「セクション5」を「有効」、他は「無効」の設定です。

◎ セクションの「有効」「無効」を首尾良く切り替えるために、適用先のURLを意図的に「不完全なURL表記」にしたものがあります。(例:「~/entry/」を「~/ent」と表記 )




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


[PR]
by Ataron | 2018-01-11 20:39 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/27990109
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。