エキサイト（新）編集画面のアレンジ（10） Excite Blog Writer Ⅱ ver. 2.4 2026年 01月 22日

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

エキサイトブログの（新）編集画面は、すぐれたPC版のブログ編集画面です。 その細かな部分を改善して、より快適なブログ編集画面にアレンジする機能が「Excite Blog Writer Ⅱ」です。
このアレンジを行うには、ブラウザに拡張機能「Stylus」を導入し、以下の「Excite Blog Writer Ⅱ」のスタイルをインストールします。 少し複雑に思えるかも知れませんが、このページ末尾の手順通りに操作すれば、簡単にアレンジを実現できます。

今回の更新は、前回から1年以上経ちました。 その間にブラウザのスクロールバーに関する取扱いが変化したので、スクロールバーアレンジのコードを更新して、スクロールバーの配色を最適化しました。

前バージョンから「 設定」メニューからオプション設定が可能になり、だれでも簡単にデザインを選択できます。 ぜひ、「Excite Blog Writer Ⅱ」とオプション設定を試してみてください。

「  設定」メニューの扱い方 

「  設定」メニューを開く 

「  設定」メニューを開くボタンは「Stylus」の「管理画面」のスタイルリストにあります。

▪ブラウザのツールバーの  {S}アイコンのリストからでも「  設定」メニューを開けます。

▪スタイル行に「 」アイコンがあるスタイルだけが「  設定」メニューを利用出来ます。

▪「 」アイコンをクリックすると、メニューの小パネルが開きます。

 ウインドウの配色

セレクトボックスから3種類の配色を選択できます。

「管理トップ」と別ウインドウに編集画面を開き、実際のデザインを確認しながら設定ができます。

▪「ブルーグレイ」

▪「ダークグリーン」

▪「グランブルー」

記事本文幅（編集枠の最小幅） 

テキストボックスに「編集枠の最小幅」を記入して指定します。（初期値は 720px）

▪記入値は、単位の「px」を付ける必要があります。

▪ブログのスキン設定を調べます。 PCデザインスキン編集   を開くと現在の本文幅が判ります。

この値を設定しますが、判らない場合は初期値でも構いません。 

 編集画面上の画像幅上限

「編集画面上の画像幅上限」を記入して指定します。（初期値は 560px）

▪記入値は、単位の「px」を付ける必要があります。

▪記事に挿入した画像は、編集のし易さを考慮して編集画面上では適当にサイズを小さく表示されます。 自動縮小は、ここで設定する画像幅上限を下げると、より小さく表示される仕組みです。 この縮小は仮のもので、実際のブログページ上での表示は、この指定とは無関係です。

編集画面のフォント指定 

CSSの「font-family: ～」の書式に従ったフォント指定を、テキストボックスに指定します。 これは、ブログページと編集画面の間でフォント指定を統一して、Wysiwyg環境を得るためのものです。 複数のフォント種を「カンマ」区切りで記入すると、その先頭の方から表示可能なフォントが選ばれます。

 編集画面のフォントサイズ

セレクトボックスの初期値は「16px」です。「12px～18px」の間で、編集枠内のフォントサイズを指定できます。 ブログページの本文フォントサイズと同じ値を指定して、Wysiwyg環境に近付けるのが本来の目的ですが、編集画面だけ文字サイズを大きくして見易くするといった使い方もありです。

リセット操作について 

「  設定」メニューで指定した値はブラウザを閉じても維持され、ユーザーが変更するまで変わる事はありません。 また、「リセット」ボタンをクリックすると、全ての設定が初期値になります。 フォント指定などで指定に困った時はリセットで戻れます。

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

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

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

　　Stylus の導入と設定方法（簡易版）: Chrome版  
　　Stylus の導入と設定方法（簡易版）: Firefox版  

❷ 「UserStyles.world」から「Excite Blog Writer Ⅱ」を入手します。

Excite Blog Writer Ⅱ by ataronエキサイトブログ (新) 編集画面のアレンジ
オプション設定で、編集画面の配色や編集画面上の画像サイズなどを指定できます。userstyles.world

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

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

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

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

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

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