AN(tcd014)で記事本文のline-heightを調整する方法

記事本文のline-heightを調整する方法

記事本文のフォントサイズは、テーマオプションで変更できますが、行間(正確には「行の高さ」)は、CSSで変更する必要があります。

行間はline-heightプロパティで調整するのですが、ANでは記事本文のline-heightが240%になっています。行間がちょっとスカスカだなァ…と気になる場合は、CSSでline-heightの値を調整してみてください。

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

basic settingのline-heightを変更する

変更するのは、スタイルシート(style.css)です。外観→テーマ編集で、スタイルシート(style.css)を選択してください。

style.cssの最初は、「このテーマは、AN TCD014ですよ~」という宣言文があり、そのすぐ下に、basic settingという部分があります。

basic settingの4行目にある、line-height(ラインハイト)の数値を変更します。

変更前

a img { border:none; verticle-align:top; }
a, a:visited { outline:none; }
a:hover { }
p { margin:0 0 1.5em 0; padding:0; line-height:240%; }

ここはline-height240%です。

朝、食堂でスウプを一さじ、すっと吸ってお母さまが、「あ」と幽かな叫び声お挙げになった。「髪の毛?」スウプに何か、イヤなものでも入っていたのかしら、と思った。

「いいえ」お母さまは、何事も無かったように、またひらりと一さじ、スウプをお口に流し込み、すましてお顔を横に向け、お勝手の窓の、満開の山桜に視線を送り、そうしてお顔を横に向けたまま、またひらりと…。

変更後

a img { border:none; verticle-align:top; }
a, a:visited { outline:none; }
a:hover { }
p { margin:0 0 1.5em 0; padding:0; line-height:160%; }

ここはline-height160%です。

朝、食堂でスウプを一さじ、すっと吸ってお母さまが、「あ」と幽かな叫び声お挙げになった。「髪の毛?」スウプに何か、イヤなものでも入っていたのかしら、と思った。

「いいえ」お母さまは、何事も無かったように、またひらりと一さじ、スウプをお口に流し込み、すましてお顔を横に向け、お勝手の窓の、満開の山桜に視線を送り、そうしてお顔を横に向けたまま、またひらりと…。

これで行間が少し狭くなりました。色んなサイト様を見てみると、だいたい〝1.5~1.6〟(単位なしの実数)に設定している人が多いように感じます。ちなみに私は、〝160%〟に設定しています。

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (2)
  1. いつも参考にさせていただいております。
    テーマのUPDATEをてきようしたため、これまで反映させていただいていたカスタマイズが基に戻ってしまったため、改めて貴サイトを参考にしようとしたところ、ページのリンクが一覧と異なっておりました。
    参考にしたかったのは、「右サイドにカテゴリとアーカイブ以外を表示させる」でしたが、このページにリンクされており、参照することができませんでした。
    申し訳ありませんが、該当ページのURLを教えていただけないでしょうか?

サイト内検索

おすすめ記事

ページ上部へ戻る