CSS編集~記事の行間設定 | FFXI FreaQ-Ency

CSS編集~記事の行間設定

どうにも記事の行間が大きすぎて、記事が縦に間延びしている気がする。

イマイチ見た目がよろしくないので、これを変えてみようと思い立つ。

今回の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編集って難しい…。