今までBloggerに色々ウィジェット入れ込んだけど
そのウィジェットだけ背景が無くて
下の壁紙が透けてたのよね
見にくいってほどじゃないけど
なんかスカスカでみっともない感だった
なので、本文部分と同じように背景付けれないかなと思ってググった
そしたらCSSをイジれと書いてあった
まず、背景にしたい色のHTMLコードを調べる
ChromeエクステンションのEye Dropperで
ページ上の知りたい場所の色コードを調べる
Eye Dropperはサイトの色を調べれるカラーピッカー
ま、スクリーンショット撮ってイラストソフトのスポイトで調べるなり
どうにか色コードを調べる
僕のブログではこの本文の背景は墨汁のような
ちょっと白味がかった黒ですね
で、Bloggerテンプレート ＞ カスタマイズ ＞ アドバンス ＞ CSSを追加 に
.white{background:#xxxxxx;} と入れる
#xxxxxxの部分が色コード
「white部分の背景を#xxxxxxにしなさい」って命令だと思う
あとはBlogger ＞ レイアウト の色を変えたいHTML/Javascriptガジェットを
それで囲むだけ
例えば、僕のBloggerでは「最新の記事」っていうスクリプトを
入れてるんだが
そいつをこう囲む
<div class="white">
<!--~~~~~~~~~~~~~~~~~ Include these JS files once: jQuery then plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js"></script>
<!---~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--~~~~~~~~~~~~~~~~~~~~~~~ required HTML -->
<div class="related-posts-widget">
<!-- {
blog_url:'http://nightwalker-sue.blogspot.com/'
,max_posts:9
,tags:[]
,recent_title:'★彡最新の記事 ヾ( ・∀・)ﾉ゛'
} -->
loading..
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
</div>
太い部分がwhiteで囲った部分
頭とお尻に
<div class="white"> </div>
を付けるだけ
そしたらページを見て確認
BloggerのHTML/Javascriptガジェットは全部これでいける
zenbackとかが背景無くてスカスカなんだよなw
問題は！公式ガジェットの背景
こいつはテンプレートのHTMLの編集を
ウェジットのテンプレートを展開にチェック入れて立ち上げる
例えば人気の投稿ならそこにつけてるタイトルを探す
僕は「★彡 人気の記事」とつけてた
その部分をまた<div class="white"> </div>で囲めばいいのだ
だいたい
<b:widget id='PopularPosts1' locked='false' title='★彡 人気の記事' type='PopularPosts'>
<b:includable id='main'>
なんちゃらかんちゃら
</b:includable>
</b:widget>
と書いてあるので
この「なんちゃらかんちゃら」の部分を囲めばいい
<b:widget id='PopularPosts1' locked='false' title='★彡 人気の記事' type='PopularPosts'>
<b:includable id='main'>
<div class="white">
なんちゃらかんちゃら
</div>
</b:includable>
</b:widget>
タイトルをつけとけば場所が探しやすい
僕は「★彡 人気の記事」ってつけてる場所だったのでその下くらいだな
と目星が立てれる
例えば公式プロフィールの背景だったら
「自己紹介」とタイトルつけてるのでそこ探すとか
これであっちこちに背景つけまくったよw
スカスカ感が減ったw
