-- --

サイドバータイトル【応用編・1】　[ソネットブログカスタマイズ] [編集]

以前少しだけやったサイドバータイトルは色だけ変更しました。今日はサイドタイトルバーに、画像を入れたり装飾したりしてみたいと思います。
最終的に今日は

↑この変まで出来るようになります。なる・・・はずです(*≧ｍ≦*)ププッ

一応何もいじってないCSSの状態は↓です。（真ん中らへんにあるので↓の記述を探して下さい。まだ何も手をつけてない方は始めからどうぞ）

省略 /*-----Side-----*/ 省略 .sidebar-title { margin:0; padding:3px 5px; margin-bottom:5px; background:#dddcd2; font-size:x-small; }

少しだけおさらいすると、

.sidebar-title { margin:0; padding:3px 5px; margin-bottom:5px; background:#ff9999;背景色変（カラーコード） font-size:x-small; color:#ffffff;（←追加で、サイドバータイトル部分の文字色が変更出来るようになる。※リンクされている箇所例えばプロフィールの名前部分などはまた別になります。） } (※#containerでbackground:#000000（黒）を指定している状態です)

こんな感じです。前回までのカスタマイズはコチラをご覧下さい。また質問がある場合はコチラを読んでから質問して下さい。

今度は小さい画像をタイトルの横に入れてみよう。 　（画像の入れ方はコチラ）

←をサイドバータイトルに入れてみます（作るの面倒だったんで、公式サイトからパクったもの為配布出来ません。そのうち自作と入れ替えときます・・・多分ｗ）

.sidebar-title { background:url(/blog/_images/blog/.gif) no-repeat #ff9999; margin:0; padding:3px 5px; margin-bottom:5px; color:#ffffff; font-size:x-small; }

このままだと、↑のように画像と、タイトルの文字がかぶってしまうので、paddingを調整します。（paddingについてはタイトル・説明文を消し画像へリンクを挿入の下の方に載せてます。）

.sidebar-title { background:url(/blog/_images/.gif) no-repeat #ff9999; margin:0; padding:3px 0 3px 20px; margin-bottom:5px; color:#ffffff; font-size:x-small; }

いい感じです。padding:3px 0 3px 20px;の「20px」を大きくすれば、もっと文字は右にいきます。

（例：padding:3px 0 3px 50px;）

↑は、スクショなんで静止してますが、
動く画像を利用すれば↓のような感じで動きます。

最新記事一覧

この位の小さな画像であれば色んな素材サイトで扱ってるし、加工しなくても大丈夫なので素材屋さんで自分好みの画像を借りてくればいいと思います。
縦横20px前後がしっくりきます～。

自分はシンプルがイイっ！って方はこんなのもオススメ。
↓ただの2色なだけ。の画像を作成（コレならペイントでも簡単に出来るはず）

（縦の高さはあんまり気にしないでOKです。短かすぎると切れちゃいますが・・・）
これ入れただけでも

かなりいい感じになりますよね♪♪お試しアレ。

←のような、一枚の小さな画像を敷き詰めて背景にするのであればno-repeatをrepeatに変更する。

.sidebar-title { background:url(/blog/_images/blog/.gif) repeat; margin:0; padding:3px 5px; margin-bottom:5px; color:#ffffff; font-size:x-small; }

サイドタイトル全体的に・・・ 　（※カレンダーカスタマイズ記事などと同様です。）

見本だけいきます

.sidebar-title { border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:#ffcccc; margin:0; padding:3px 5px; margin-bottom:5px; color:#ffffff; font-size:x-small; }

や、

.sidebar-title { border-top:2px solid #ffff66; border-bottom:2px solid #99ffff; border-left:2px solid #9999ff; border-right:2px solid #ffcccc; margin:0; padding:3px 5px; margin-bottom:5px; color:#ffffff; font-size:x-small; }

などなどコレはほんの一例です。
カレンダー、記事枠内、リンク装飾と同じ事なのでソチラをご覧下さい。

今回の応用

画像入れて、周りを点で囲んで背景に白を指定していみました。
（ブラウザーによっては文字や画像が多少上下する事があるのが難点。）

.sidebar-title { background:url(/blog/_.gif) no-repeat #ffffff; border-top:2px dotted #cc0000; border-bottom:2px dotted #cc0000; border-left:2px dotted #cc0000; border-right:2px dotted #cc0000; margin:0; padding:3px 0 3px 25px; margin-bottom:5px; color:#E30000; font-size:x-small; }

 

もうすぐハロウィンなのでこんなのもカワイイかも

.sidebar-title { background:url(/blog/.gif) no-repeat left center; border-top:2px solid #f26100; border-bottom:2px solid #f26100; height:25px; margin:0; padding:6px 0 0 27px; margin-bottom:5px; color:#ffffff; font-size:x-small; }   .sidebar-title { background:url(/blog/.gif) no-repeat left center; border-bottom:3px solid #f26100; margin:0; padding:8px 0 4px 27px; margin-bottom:5px; color:#f26100; font-size:x-small; }

 との画像は必要であればお持ち帰り下さい♪

順番にやってけばだいたい↓な感じまでなら出来るハズです。



　ソネットブログカスタマイズ目次
(｀□´)　以上である!(←久しぶりｗ)