★彡記事のラベル

DTM (1016) その他 (277) ゲーム (221) 食べ物 (162) Mac (83) アニメ (82) Diablo3 (79) パソコン (76) 車中泊 (73) 写真 (72) (59) iPhone (33) 音楽 (33) 温泉 (31) TF2 (29) 同人 (27) Torchlight2 (21) (21) 壁紙 (18) Blogger (11) 読書 (7) Torchlight1 (6) 映画 (5) 動画 (4) イラスト (3) タロット (3) 七不思議 (3) 漫画 (3) Left 4 Dead 2 (2) 健康 (2) 掃除 (1)

楽天

ブログ内検索

2012年3月3日土曜日

スカスカは嫌だ! BloggerのCSSを使ってウィジェット背景をカスタム!

今まで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



0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...