昨日行ったBlackoot Liteのカスタマイズですが、まだ足りませんでした。全部真っ黒にしたつもりでしたが、よく見たら、記事の題名の下に細い線が1本残っていました。

これは何なのか考えたのですが、隙間があったというわけではないような気がしました。と言うことは、他の可能性を考えないといけません。

これはたぶんボーダーですね。区画の縁に色を付けていたけれど、それを排除するのを忘れたのに違いありません。

元のCSSをざっと見ると、黒以外の色はRGBで指定しているらしいので、見つけるのは簡単でした。RGBで検索すれば、出てきます。そこでこれかなと思ったものを選んで、値を変更しました。

#page-title {
position: relative;
margin: 0;
background: #000000;
border-bottom: 1px solid #000000;
}

まだ、他にも出てくるかもしれません。気がついたら、またコードを追加していくしかありませんね。

codeが読みにくいので、ちょっと色を変えて、マージンを作っておこうかと思います。

code {
display:block;
background-color:#202020;
margin-left:20px;
margin-right:20px;
padding:10px;
}

codeはインライン要素であるため、区画を作れません。あくまでも区画の中身になります。だからcodeで背景色を指定すると、その文字列の背景色となり、区画全体の背景色ではなくなります。つまり、codeが複数行に渡ると、行間には背景色が適用されず、元のままになります。

これでは困るので、codeをブロック要素化して、区画を作らせます。それが・・・

display:block

・・・の部分です。これでcodeで囲まれた部分が文字列ではなく、区画になります。まあ、わかりやすく言えば、ボックスになります。従って、codeに背景色を指定すると、そのボックス全体の背景色になるわけです。

これ便利ですよ。まあ、区画を作るブロック要素であるdivなどで外側を囲ってもいいわけですが、二つもタグを使うのは面倒ですからね。

それでは、また。

関連ページ:
WordPressテーマBlackoot Liteのカスタマイズ方法