CSS編集~記事の行間設定
どうにも記事の行間が大きすぎて、記事が縦に間延びしている気がする。
イマイチ見た目がよろしくないので、これを変えてみようと思い立つ。
今回のCSS編集に関しては、
参考にさせていただきました。感謝!
どうでしょう、行間が減ってスマートになったかな?
で、おさらいのためと、今後のためにメモを残しておくことにする。
デザインの設定→CSS編集を開き下記の部分を編集する。
■メイン記事の行間設定
/* ----------------------- MainColumn ----------------------- */
(上文省略)
.entry .contents{
margin-top: 15px;
margin-bottom: 15px;
padding-left: 20px;
}
.entry .contents p {
line-height: 1.5; ←メイン記事の行間設定はココ
} 今回はここを、2から1.5に変えた。
■メッセージボードの行間設定
/* ----------------------- font-information ----------------------- */
(上文省略)
.entry .contents,
#message .contents{
font-size: 10px;
line-height: 1.5; ←メッセージボードの行間設定はココ
■両サイドのカラムの行間設定
/* ----------------------- list-item ----------------------- */
#theme_list li,
#recent_entries li,
#favorite li,
#archives li,
#bookmark li,
#recent_comment li,
#recent_trackback li {
display: block;
padding-left: 12px;
background: url(http://
~~) no-repeat 0px 8px;
line-height: 1.5; ←両サイドのカラムの行間設定はココ
以上、このような感じで編集しました。
それから「ぷちテク」CSS の「1.CSS編集する前に! 」のトコロに
ポイントが書いてありますが、これもおさらいしておこうっと。
・CSSをいじる前に全文のバックアップを取っておく
・余計な記号文字などは勝手に追記しない
・ /* と */ の間で挟まれた部分はコメントとして扱われる
・CSS文は基本的に半角文字で書く
この4項目は覚えておくに越したことはないですね!
全文バックアップとか全然考えてもみなかった私でした。。
新しいスキンに変更した時でも、
コメントを書き記した全文をバックアップしておけば、
そのバックアップを眺めながら編集できますからね。更
にスキンが気に入らなかった場合にも、元に戻すのが容易になりますよねぇ。
それにしても、もっとこう簡単に編集できるようにならないものか…。CSS編集って難しい…。