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

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について

2016年 09月 22日
編集画面の編集枠・入力枠・画像パレット・各種ボタンなどを除いた部分、いわゆる画面背景部の背景色は、各基本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を作り実験しています。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_14211986.png

最初は、インディゴ布のテクスチャーです。 下はクリックして拡大表示させたところです。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_14235435.png

画像を右クリックして「画像のアドレスをコピー」を押します。

「Stylist」で基本CSSの最後に追記する形で、「オプション背景画像」の項を作っています。 下図は、最初の公的ページのテクスチャーの「URL部分のみ」を反転させた所です。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15071490.png

これに先ほどの布テクスチャーのURLを貼り付けます。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15074022.png

貼り付けでURL内容が変わった事を確認したら、「Save」を押します。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15042387.png

編集画面を開くか、既に開いていたらリロードします。 下図は、布テクスチャーが背景画像として表示された状態です。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15083075.png



面白半分で、下の様な画像を背景に指定してみました。 下の画像は縮小していますが、実際に使ったのは「1600×1100px」程の大きさです。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15105534.jpg
エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15142559.png

ずいぶん賑やかになりましたが、編集枠の下のスイッチ群の背景が、空の部分で変になります。 ボタン類の背景は、フォバー時に下のボタンを隠すためのものです。 背景画像の位置を細かく指定すれば、違和感を無くせますが、指定行が増えるので、どうしてもこういう絵を背景にしたい時以外はしません。



少し大き目のレンガのテクスチャーを使ってみました。 下はその実寸大です。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15243958.png
エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15254131.png

先ほどではないですが、アイコン等のスイッチを背景が邪魔する気がします。
このテクスチャーのサイズを1/4にしてみました。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15294395.png
エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15295935.png

この程度なら、馴染んでいると思います。
更にテクスチャーのサイズを1/2にしました。

エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15312113.png
エキサイト編集画面のアレンジ(50) 編集画面の背景テクスチャー設定について_a0349576_15313258.png

これは全くOKでしょう。 テクスチャー画像が小さければ良いというわけでは無いですが、ボタン類が判り難くならないかは、考えどころと思います。



by Ataron2 | 2016-09-22 20:20 | ブログ編集画面のアレンジ