スポンサーリンク
サイドバーのタイトルに画像背景のつづきです。タイトル以外を加工します。
| 変更前 | 変更後 |
 |
 |
まずスキンの全てのHTMLのヘッドに次の通り書き込みます。
<!--[if IE]>
<style type="text/css">
<!--
body#multi table,body#doubleL table,body#doubleR table{
margin-bottom:-5px;
}
-->
</style>
<![endif]-->
これは、ブラウザがInternet Explorerの時だけ、書いてあるスタイルを適用せよという意味になります。
書く場所は<link href=”
style.css” rel=”stylesheet” type=”text/css” />の下にしてください。いったん元のスタイルシートを読み込んだ後で、この部分を上書きしたいからです。
スタイルシートに書いてある内容をブラウザが処理する際、ブラウザによって多少のクセがでます。それを調節するための方法です。今回はInternet Explorerだけ、タイトル画像の下の間隔が大きくなるので、それを調整しました。
| 適用前 | 適用後 |
 |
 |
次に、スタイルシートに以下を追加します。
body#multi table,body#doubleL table,body#doubleR table{
margin-bottom:3px;
}
div.side_text{
width:138px;
margin:0 0 2px 10px;
background-color:#F3D7FC;
}
div.side_text:hover{
background-color:#EAB5FB;
}
div.side_text a{
display:block;
text-decoration:none;
line-height:2em;
padding:0 5px;
color: #000;
}
div.side_text a img{
display:none;
}
一番上のブロックはタイトル文字との間隔指定です。
各行の文字はdiv.side_textの中に入っています。
タイトル行と合わせた横幅、138ピクセルにしてマウスが乗っていないときは#F3D7FC;色、マウスが乗っているとき（hover）は#EAB5FB;色にします。
div.side_text の中にはa（リンク文字）とimg(画像）が入っています。
aの文字は記事のタイトル部分をレイアウトと同じようにdisplay:block;にします。
imgは上の変更前の画像にあるように、文字の前についている小さな赤い丸印です。これは表示しないので、display:none;にします。
サイドバーのすべての項目が同じスタイルで構わないときはこれで完了です。
次回は、違う項目ごとにスタイルを変えます。
前回のままだとタイトル文字が細いので、太くします。また、最後の１行は微調整です。
追加するのは、赤文字の２行です。
body#multi .side_title,body#doubleL .side_title,body#doubleR .side_title{
background:url('画像のURL') left top no-repeat;
height:45px;
line-height:37px;
padding:8px 0 0 20px;
color:#fff;
font-weight:bold; //文字を太くする
text-align: center; //文字を真ん中に合わせる
}
関連コンテンツ
スポンサーリンク
こんにちは★
突然すいません(>_<)
ちょっとサイドバーについてお聞きしたいのですが
左サイドバーにある
プロフィール画像の表示される大きさを
変えることってできますか？
私の場合大きくするか
消したいのですが
画像を設定から削除してしまうと「No image」
と表示されてしまいますし
なんだか大きさもバランスが悪くて
悩んでいます。
どこを書きかえればいいのかもわからなくて
できたら教えてほしいです！
こんにちわ。
またすこしづつ カスタマイズをやろうと思っています。
今回はこのページに挑戦。
なかなか難しいですが頑張ります。
こんにちは。
この記事を参照にサイドバーを
カスタマイズしました。
有難う御座います。
このサイトを私のブログに、
リンクしたいのですが、
宜しいでしょうか？
こちらこそありがとうございます。
リンクはうれしいですが、うちはリンク集を作っていません。
それでもか舞わなければどうぞ。
こんばんは。
コメント有難う御座います。
相互リンクじゃなくて、全然かまいません。
私が、このサイトを参考させてもらったので、
是非リンクしたかっただけです。
そして、さっそく、リンクさせて頂きました。
何か、問題があれば、ご連絡ください。
今度とも、お世話になると思いますが、
どうぞよろしくお願いします。