Studio TA Subsite の案内とお知らせ

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

2019年 01月 30日

配色管理にCSS変数を導入しました


今回の更新は表面上は大きな違いがありませんが、アレンジコードの全域に手が加えられています。「Excite Blog Writer」は、明背景と暗背景の2種のカラー設定を用意しています。

「Code 7」配色オプション ブルーグレー(明背景)を選択した場合
a0349576_20261617.png

「Code 8」配色オプション ダークグリーン(暗背景)を選択した場合
a0349576_20265967.png

しかし、もし好みの独自の配色をお望みなら、カラー設定のCodeを書換えることで、安全に細部に至るまで配色設定をアレンジできます。「CSS変数」は配色設定を一ヵ所で管理が出来るので、現在では多くのページのスタイル管理に利用されています。


CSS変数名の一覧


エキサイト編集画面の配色設定をするCSS変数名と指定対象は以下です。


【CSS変数名 と 指定対象】

--bgc1 全体背景
--bgc2 画像パレット背景色
--bgc3 入力枠文字の背景色
--bgc4 編集アイコンの背景色
--bgc5 本文編集枠の背景色
--bgc6 Moreタイトルの背景色
--bgc7 画像パレットのドロップボックス背景色
--bgc8 ダイアログの背景色

--col1 文字色 全体
--col2 文字色 画像パレットのドロップボックス内
--col3 文字色 ディマーキャプション(少し淡い文字)
--col4 文字色 公開ボタン
--col5 文字色 キャンペーン・みんなの投稿・お知らせリストのボタン
--col6 文字色 セレクトボックスのブルー反転行
--col7 文字色 トラックバック済の記事のURL表示

--btc1 ボタン カテゴリ・テンプレート・タグ(画面最上行のボタン)
--btc1h ボタン 画面最上行のボタンのフォバー
--btc2 ボタン More
--btc2h ボタン Moreフォバー
--btc3 ボタン notmore
--btc3h ボタン notmoreフォバー
--btc4 投稿時間指定オプション・画像パレットの年月選択オプション
--btc5 ボタン 選択された投稿オプション
--btc6 ボタン プレビュー・下書き
--btc6h ボタン プレビューフォバー・下書きフォバー
--btc7 ボタン 公開ボタン
--btc7h ボタン 公開ボタンフォバー
--btc8 ボタン マイブログ
--btc8h ボタン マイブログフォバー
--btc9 ボタン キャンペーン
--btc10 ボタン みんなの投稿
--btc11 ボタン お知らせリスト

--gsc パレットの画像サムネイルリストのフォバー時の枠色
--wrc 全体のボーダー線色
--wrcs 公開ボタンのボーダー線色


「Code 7」は明背景の色値をこれらの変数に代入するコード群です。「Code 8」は暗配色の色値を代入するコード群です。 これにならって独自の色値を代入する様に書換えれば、カスタマイズが出来ます。



投稿オプションのインターフェイスに「focus-within」を使用


編集枠下の投稿オプションのボタン群は、操作時にフォバー拡張するデザインでコンパクト化しています。 この方式はマウスポインタが離れると閉じるため、特に「時間設定」は扱い難さがありました。 今回、この部分に擬似クラス「focus-within」を使い、操作性が大変に改善しました。

a0349576_18150793.png

このコードは、操作でどれかのボタンにfocusがある間は拡張表示が閉じません。 ウインドウ内の他所をクリックするまではこれが続き、ポインターがボタンから離れても閉じないのです。 時刻設定で日付→時刻などとボタンを続けて押しても、Focusはこの部分に留まるために操作が中断されません。 このインターフェイスは、「投稿オプション」「時刻設定」「公開設定」の3者に導入しています。

Excite Blog Writer(Chrome)と Excite Blog Writer(Firefox)の両版で、以上の更新とブラシュアップを完了しました。 バージョン名は「More拡張 ver.8.3」になります。



Excite Blog Writer を使用するには


「Excite Blog Writer」で編集画面をアレンジするには、ユーザースタイルシート拡張機能「Stylus」がブラウザに導入されている必要があります。

❶ 使用しているブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先の「📌」マークの記事を参考にして、使用ブラウザに適合した「Stylus」を導入してください。 既に「Stylus」を導入している場合は、この作業は不要です。


❷ アレンジスタイルの投稿サイト「userstyles.org」に、「Excite Blog Writer (Chrome)」「Excite Blog Writer (Firefox)」が登録されています。 以下のリンク先を選択して、ブラウザに適合するスタイルを入手してください。

  Excite Blog Writer(Chrome) --- More拡張 ver.8.3

  Excite Blog Writer (Firefox) --- More拡張 ver.8.3

〔注意〕
上記のリンクで「userstyles.org」の「Excite Blog Writer」のページが開きます。
「Excite Blog Writer」は、ページ上部のスタイルのサンプル画像の「右下」の Install Style を押すだけで簡単に「Stylus」にインストールされます。

但し、スタイルの「インストールスイッチ」に見える、まぎらわしい「ダウンロードスイッチ」があるので注意してください。 無関係で悪質なアプリのインストールは、必ず避けてください。



Code構成と各種オプション


「More拡張 ver.8.3」は、以下の14個のCode数に再編成しました。

 Code 1    More拡張 ver.8.3 基本CSS

 Code 2    画像パレットCSS

 Code 3    ダイアログCSS

 Code 4    テンプレート編集CSS

 Code 5    フリーページ編集CSS

 Code 6    編集終了画面CSS

 Code 7    配色オプション ブルーグレー(明背景)

 Code 8    配色オプション ダークグリーン(暗背景)

 Code 9    2行編集アイコン 表示オプション ★

 Code 10    編集ヘルプ 非表示 ★

 Code 11    おすすめブログテーマ 非表示 ★

 Code 12    追加キャンペーン対応CSS ★

 Code 13    「Excite Blog Writer」のオプション指定チュートリアル ★

 Code 14     読者登録用バナーのポップアップ説明 (期間限定)★


◎「Code 7」以降がオプションに関するCodeで、それぞれの「適用先」を変更することで Code単位で「有効」「無効」が選べます。
 ▪ 適用先が「次で始まる URL」の Code →「有効」
 ▪ 適用先が「URL」の Code →「無効」
「適用先」を変更したら、Stylusの左メニュー「保存」を必ず押します。 これで変更が決定されます。

◎「Code 1」~「Code 6」は基本構成として必要で、常に「有効」としてください。

◎「」印の Codeは配色オプションです。「Code 7」と「Code 8」のどちらかを有効にします。
  これらは適用先が2行ありますが、変更する際は2行をまとめて変更してください。

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

◎ オプション内容の詳細は、このブログ内の説明記事を検索してください。





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



# by Ataron | 2019-01-30 20:57 | ブログスキンのアレンジ | Trackback | Comments(0)