編集画面の編集枠・入力枠・画像パレット・各種ボタンなどを除いた部分、いわゆる画面背景部の背景色は、各基本CSSの最後に纏めて指定する様にしています。 本来は画面のパーツ各所での指定になりますが、これをこの場所で纏めて指定するのは、メンテナンスを良くするためです。
このコードの部分は以下の部分で、この部分で「background」の指定を変える事で、簡単に好みの配色に出来ます。
Chrome版 - More拡張 ver.3
body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background: #a4c1ce; } /* 編集画面 背景色 */
IE11版 - More拡張 ver.3
body.win ,
#entry #announceList:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background: #a4c1ce !important; } /* 編集画面 背景色 */
これらの基本CSSの指定色「#a4c1ce」は、私が決めたデフォルトの色指定です。 このカラーコードを書き換えると、背景色が変わります。
+
一方、「background」プロパティには、背景画像とその配置方法を指定する事が出来ます。 基本CSSを書き換えても良いですが、後方指定の優先原則を利用して、背景画像を指定するオプションCSSを基本CSSに追記する方法がお勧めです。 これは、オプションCSSに問題があった場合は、元の配色のままとなり救われるからです。
背景画像を指定するオプションCSSの書式例は、以下の様なものです。 例とした背景画像は、エキサイトが公的ページで使用しているテクスチャーで、削除される事は無いと思います。
Chrome版 - More拡張 ver.3
body , .hasmenu #contents , #entryMoreArea ,
#entryOptions , #entryOptionsPstdate , #entryOptionsPpenflag ,
#_panel:hover , #announceList:hover {
background:
url("http://md.exblog.jp/skn/img/a/01/29/4/bg_wrapper.gif")
repeat; } /* 背景テクスチャー */
IE11版 - More拡張 ver.3
body.win ,
#entry #announceList:hover ,
.page_entry #entry>#form ,
.page_entry #entryMoreArea ,
.page_entry #entryOptions ,
.page_entry #entryOptionsPstdate ,
.page_entry #entryOptionsPpenflag ,
#_panel {
background:
url("http://md.exblog.jp/skn/img/a/01/29/4/bg_wrapper.gif")
repeat !important; } /* 背景テクスチャー */
要するに「background」の内容を下の様に書き換えているだけです。
background: url(" ~画像のURL~ ") repeat;
+
ブログの「画像管理」で、背景に使えそうな画像を幾つか登録して試して見ました。 以下の作業はChrome版での作業で、拡張機能の「Stylist」上でオプションCSSを作り実験しています。
最初は、インディゴ布のテクスチャーです。 下はクリックして拡大表示させたところです。
画像を右クリックして「画像のアドレスをコピー」を押します。
「Stylist」で基本CSSの最後に追記する形で、「オプション背景画像」の項を作っています。 下図は、最初の公的ページのテクスチャーの「URL部分のみ」を反転させた所です。
これに先ほどの布テクスチャーのURLを貼り付けます。
貼り付けでURL内容が変わった事を確認したら、「Save」を押します。
編集画面を開くか、既に開いていたらリロードします。 下図は、布テクスチャーが背景画像として表示された状態です。
+
面白半分で、下の様な画像を背景に指定してみました。 下の画像は縮小していますが、実際に使ったのは「1600×1100px」程の大きさです。
ずいぶん賑やかになりましたが、編集枠の下のスイッチ群の背景が、空の部分で変になります。 ボタン類の背景は、フォバー時に下のボタンを隠すためのものです。 背景画像の位置を細かく指定すれば、違和感を無くせますが、指定行が増えるので、どうしてもこういう絵を背景にしたい時以外はしません。
+
少し大き目のレンガのテクスチャーを使ってみました。 下はその実寸大です。
先ほどではないですが、アイコン等のスイッチを背景が邪魔する気がします。
このテクスチャーのサイズを1/4にしてみました。
この程度なら、馴染んでいると思います。
更にテクスチャーのサイズを1/2にしました。
これは全くOKでしょう。 テクスチャー画像が小さければ良いというわけでは無いですが、ボタン類が判り難くならないかは、考えどころと思います。