トップページ > パンくずリスト > パンくずリストのスタイルを設定する NO.45

パンくずリストのスタイルを設定する NO.45

2006年04月27日
変更前の状態
sample52.gif

スタイルシートに次のように追記します。場所はどこでもいいですが、あとで自分で見やすい場所に記述するといいと思います。ちなみに私がスタイルシートを記述していく順番はページの上から、階層の上のほうから記述しています。


/*パンくずリスト*/
.pankuzu{
margin:0px ;
padding:3px 0px;
line-height: 150%;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
border-top:1px solid #423421;
border-bottom:1px solid #423421;
background-image:url('画像のURL');
}

.pankuzu a{
margin:3px 0px;
line-height: 150%;
text-align: left;
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
text-decoration:none;
}
設定したスタイルは次の通りです。
・背景に画像を設定した
・上下に枠線をつけた
・文字を左寄せにした
・文字サイズを記事本文と同じに合わせた
・リンクの下線を消した
使用した画像はフリー素材置き場にありますので、ご自由に使ってくださってOKです。見えにくいけど、すごーくちっちゃくて薄い「点」です。背景に設定するとパンくずリストの背景のような感じになります。


« パンくずリストの設置手順 NO.44 | トップページ | トップページのデザインを大幅に変えてみる その1 NO.46 »