新着記事
2007年09月21日

記事タイトルに背景画像(Seesaaブログ)

記事タイトルの背景画像を変更

タイトル背景画像まず背景画像になる画像を作成し、ファイルマネージャでアップロードしておきます。background-repeatで表示するので、こんな小さい画像で良いのです。

メニューの〔デザイン〕→〔デザイン一覧〕からスタイルシートを開き、以下の記事タイトル部分の指定を探します

h3 {
padding: 0px 0px 0px 15px;
font-size:15px;
font-weight:bolder;
font-family: MS UI Gothic, Verdana;
background-image:url(ブログのURL/image/bg/lightgray_2/title.gif);
background-repeat:no-repeat;
}


初期設定の「bg/lightgray_2/title.gif」をアップロードした画像のファイル名にします。デフォルトではタイトルの頭にアイコンを表示させていて、そのため「background-repeat:no-repeat;」で画像を繰り返さない指定にしてあります。そこでこれを削除します。

h3 {
padding: 0px 0px 0px 15px;
font-size:15px;
font-weight:bolder;
font-family: MS UI Gothic, Verdana;
background-image:url(ブログのURL/image/△△△.gif);
padding:0px 10px;
line-height:26px;
border:1px solid #666666;
}


枠内余白「padding:0px 10px;」と行の高さ「line-height:26px;」を指定し、「border:1px solid #666666;」で背景画像に枠線を付けます。

初期設定の記事タイトルアイコンがなんじゃこれ?だったので別のアイコンに変更してはいました。しかし再度のカスタマイズで、記事タイトル背景を〔最新記事〕の上のタブメニューの背景画像と統一したのでデザインに統一感が生まれ、「見出し」としても見やすくなったと思います。

参考にさせていただいたサイト
見出しにグラデーションを使う - Seesaaブログをホームページ風にカスタマイズ! 


記事欄の一番下に「人気ブログランキング」のバナーが自動で挿入するように、HTMLページを改変

デフォルトでは日付にh2(見出し2)タグが当てられていたのを外し、h3(見出し3)だった記事タイトルをh2に変更

この2点では下記のサイトを参照しました。
ブログ? カスタマイズ? アフィリエイト?

画像の回り込み余白とランキングバナーのカスタマイズに合わせての、過去記事の再編集に手間がかかりました。カスタマイズしたいなら、なるべく早めにチャレンジしましょう(笑)
たとえ無料ブログサービス利用でも、カスタマイズ可能の範囲で手を入れると、自分のブログにいっそう愛着が沸いてきます。

※カスタマイズについて書いた過去記事
画像回り込みのカスタマイズ(Seesaaブログ)(2007.09.21)
カスタマイズのための参考サイト(2007.03.18)
Seesaaブログのカスタマイズ(2007.03.17)
ファビコン設置(2007.03.05)
ブログでの画像の使い方(回り込みなど)(2006.11.08)
ブログのデザインカスタマイズ(2006.01.03)



拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 17:13 | Comment(0) | TrackBack(0) | Seesaaブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

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

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。