2008年02月25日

見出しの画像を変える(6)

ブログのデザインをカスタマイズする講座です。
スタイルシートを変更できるブログで簡単にできるデザイン変更をお教えします。

見出しの部分を変えてみたいと思います。

本文もサイドバーも基本は同じです。このブログではサイドバーだけ変更しています。
デフォルトでは肉球でしたが、猫がのぞいている画像をタイトルに使ったのでお魚にしてみます。マンボウは食べないとは思うけど、まぁかわいかったんで。。

本文でもサイドバーでも、幅を変更するといろいろと変更点が増えて大変なので、まずは同じ大きさの画像と入れ替えてみます。
見出しに使う画像を作ってアップロードしてURLを控えておいてください。

この場合もまずサイドバーの見出しにどんなスタイルが指定されているかを見つけます。

本文が終了してからサイドバーが始まりますのでかなり後ろの方になると思います。サイドバーのタイトル「最近の記事」などに<div>タグで指定してあると思います。
<div class="sidetitle">最近の記事</div>

こうなっていたらスタイルシートの編集ページで.sidetitleを探します。ここでbackground-image:url以下を書き換えて、用意した見出し用の画像のURLを書き込みます。
background-image:url(http://***.co.jp/myfiles/image/sidetitle.gif);

これは背景の指定になっていますので、この上に文字を載せることができます。場合によっては文字の位置を少し調整する必要が出てくるでしょう。
文字の位置はpaddingで指定します。

padding:50px 0px 20px 50px;

それぞれ上、右、下、左の順に文字の開始位置を調節できます。
この見出しは左にマンボウの絵があるので、その絵にかからないように、マンボウの長さだけ左にずらしてあります。

その他colorで色、font-sizeで文字の大きさを変更できます。
posted by 青猫 at 11:12| Comment(0) | TrackBack(0) | ブログデザイン講座
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/11790731
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック