人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)

2021年 10月 06日

エキサイト(新)編集画面をより快適に 


エキサイトブログの(新)編集画面は、すぐれたPC版のブログ編集画面です。 その細かな部分を改善して、より快適なブログ編集画面にアレンジする機能が「Excite Blog Writer Ⅱ」です。

このアレンジを行うには、ブラウザに拡張機能「Stylus」を導入し、CSSコードの「Excite Blog Writer Ⅱ」をインストールします。 少し複雑に思えるかも知れませんが、このページ末尾の手順通りに操作すれば、簡単にアレンジを実現する事ができます。

今期、「Excite Blog Writer Ⅱ」のCSSコードの入手先を、新しい投稿サイト「UserStyles.world」に移行しました。 その案内を兼ねて、改めてこのアレンジスタイルについて紹介します。



「Excite Blog Writer Ⅱ」は(新)編集画面を改善します 


(新)編集画面は、管理画面から独立したブログ編集専用の理想的なデザインですが、画像を配置しにくい難点があります。 従来は、編集画面上では挿入画像を自動縮小する柔軟なインターフェイスでした。 使い易かったこの機能が(新)編集画面にないため、編集で戸惑うユーザーが多い様です。

「Excite Blog Writer Ⅱ」は、編集画面上では「適当に画像サイズを小さくする」様に設定できるので、従来の扱い易さを継承しています。 それ以外にも色々な工夫があり、編集がより快適になります。


「Excite Blog Writer Ⅱ」の主要な特徴 


◎ 編集画面の表示上の無駄を各所で減らし、必要な表示に割りあてています。 この結果、コンパクトなのに広くて使い易い編集画面になっています。
◎ 画像パレットを1列表示に変え、サムネイルを見易く大きくして、画像挿入の間違いを減らします。
◎ 目の疲れを減らす様に、画面背景色を少し落としています。
◎ 暗い背景色のブログスキンに合わせた、黒バックの暗背景表示を選択出来ます。



 編集画面の配色デザイン


● 配色オプション「グレー」(デフォルト)
エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)_a0349576_16160761.png

● 配色オプション「ダークグリーン」
エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)_a0349576_16174354.png

● 配色オプション「グラン・ブルー」
エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)_a0349576_16174720.png



配色オプションの変更方法 


「Stylus」の管理画面から「Excite Blog Writer Ⅱ」のスタイル編集画面を開くと、現在のバージョンでは「セクション1」~「セクション9」のCSSコードを確認出来ます。

配色の設定は、「セクション6」グレー、「セクション7」ダークグリーン、「セクション8」グラン・ブルー、の各セクションに纏めて記載されています。 セクションのCSSコードは「適用先」の指定により「有効」「無効」をコントロールできます。 適用先指定を「次で始まるURL」にすると、そのセクションが「有効」になり、「URL」にすると「無効」になります。

エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)_b0174191_16162417.png

エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)_b0174191_16162411.png

上図の場合は、「セクション6」が有効で「セクション7」が無効となり、「グレー(デフォルト)」の配色が反映します。

▪「次で始まる URL」は「有効」、「URL」は「無効」のスイッチになります。
▪ セクションごとの4個の適用先は同じ設定にします。
▪「有効」を設定するのは「セクション6」~「セクション8」のどれかひとつにします。
▪「Excite Blog Writer Ⅱ」のインストール時の初期設定は「セクション6」が「有効」です。
▪「セクション6」のコメント行に配色部位の詳細説明があります。 更に細かなカスタマイズを行いたい場合は、これを参考にしてください。



 「ユーザーの個別設定」


「セクション9」で、ユーザー自身のブログスキンの値を書き込む事で、編集環境を最適化できます。 設定すべき値が判らない場合は初期値のままで編集できますが、このスタイルを有効に使用するために、以下のページを参考にして正しい値を記入してください。

  (新)編集画面のアレンジ(1) 

◎ 下は「記事本文幅」「画像幅上限」の指定です。
  --page_width    ➔ 記事本文幅(最小幅)を指定します(初期値は 720px)
    --editor_width   ➔ 編集画面上の画像幅上限 を指定します(初期値は 560px)

◎ 編集画面の基本フォントサイズとフォントを、ブログスキン(ページ表示)に合わせる事ができます。
下の太字は初期値です。
    .simple-ui {
        font-size: 16px;
        font-family: Meiryo, 'MS PGothic', sans-serif; }



「Excite Blog Writer Ⅱ」 を使用するには 


「Excite Blog Writer Ⅱ」で編集画面をアレンジするには、拡張機能「Stylus」がブラウザに導入されている必要があります。 このスタイルは Chrome / Edge / Firefox の「Stylus」で使用可能です。

❶ ブラウザに拡張機能「Stylus」が未導入の場合は、以下のリンク先の記事を参考にして「Stylus」を導入してください。(EdgeはChrome版を導入します) 既に「Stylus」を導入している場合は、❶は不要です。

   〔 Chrome版 Edge版 〕

   〔 Firefox版 〕

❷ 「UserStyles.world」(アレンジスタイルの投稿サイト)から「Excite Blog Writer Ⅱ」を入手します。

上記のリンク先は下の様なページです。

エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)_b0174191_17144681.png


◎ 上図の青いボタン install を押します。

◎ 下の様な「Stylus」の「インストール画面」が表示されます。 左上の インストール を押します。

エキサイト(新)編集画面のアレンジ(7) Excite Blog Writer Ⅱ ver. 2.1 (UserStyles.world版)_b0174191_17165525.png

「スタイルがインストー­ルされています」と表示されたら、インストールは完了です。 編集画面を開くと、アレンジが適用されている事が判ると思います。


Excite Blog Writer Ⅱ の セクション構成 


「Excite Blog Writer Ⅱ ver. 2.1」は、以下の9個のセクションで構成されています。

 1:    Exblog Blog Writer Ⅱ ver. 2.1 基本CSS

 2:    画像パレット CSS

 3:    プレビューフレーム CSS

 4:    ダイアログ CSS

 5:    スクロールバー配色オプション (Chromeのみ有効)

 6:    配色オプション グレー(デフォルト)

 7:    配色オプション ダークグリーン

 8:    配色オプション グラン・ブルー

 9:    ユーザー個別設定 編集画面の基本デザイン


●「Excite Blog Writer Ⅱ」をインストールしたら、「セクション9」の「 --page_width 」「 --editor_width 」の設定をしてください。



判らない事があれば、このブログにコメントをください 


直ぐに返事が書けなくても、できるだけ返答させていただく所存です。


by Ataron2 | 2021-10-06 07:24