【Cocoon】文字の行間と段落の間隔を調整するカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はCSSで「文字の行間」と「段落の間隔」を調整したいと思います。

余白の取り方は好みが別れるところですが、個人的にはCocoonのデフォルトのままよりは、段落の間隔は少し広げた方が読みやすいかなと思います。

それではいってみましょう！

【追記】Cocoonのバージョン1.5.7以降は設定から簡単に余白を調整できるようになりました。

Cocoon設定から簡単に調整できる

バージョン1.5.7からは「Cocoon設定＞本文＞本文行間設定」で簡単に余白を調整できるようになりました↓

「行の高さと」と「行の余白」については以下で解説していますので参考にしてみてください。

CSSでサクッと調整

CSSで調整する場合はこれだけです。（バージョンアップで不要になりました）

.entry-content p {
    line-height: 1.75;
    margin: 2em 0;
}

まず「.entry-content」のclass名で投稿ページと固定ページの本文のみ適用されるようにしています。

「line-height」が行間の指定ですが、Cocoonのデフォルトが1.75なので変更する場合はお好みで変えてみてください。

「margin」が段落の間隔ですが「2em 0」というのは上下の余白が2em分、左右は0で余白なしという意味です。

Cocoonのデフォルトは上下1em、左右0です。「em」は文字の大きさを基準にした単位で「1em=1文字分」となります。文字サイズが18pxなら、1em=18pxとなります。

文字のサイズ変更は管理画面で

Cocoonで文字の大きさを変更する場合は管理画面でやった方がお手軽です。「Cocoon設定 ＞ 全体」で簡単にPCとモバイルの文字サイズを個別に設定することができます↓

画像のキャプションを使用している場合

コメントをいただいて気付いたんですが、画像のキャプションを使用している場合は先ほどのCSSが適用されてしまいます。

解決策としてはキャプションに付与されているクラス名「.wp-caption-text」でCSSを追記してあげると、キャプションだけに新たな指定をすることができます↓

.wp-caption-text, .gallery-caption {
    margin: 1em 0;
    font-size: 80%;
    color: #333;
}

「.gallery-caption」っていうクラス名はどこの部分のものか分かりませんが、もともとセットで指定されているものなので念のため書いて置いたほうが良さげです。

クラス名が分かっちゃえばキャプションだけサイズや文字色を変えたりすることも簡単にできますね。ついでに「font-size」と「color」もデフォルトのやつを入れていますが、変更しなければ削除してもオッケーです。

行間と段落の違いについて

行間は行の高さのことで、段落は「Enterキー」で区切ったまとまりです。

HTMLだと「<p>〜</p>」で囲まれたものが段落。段落の途中で「Shift + Enter」で改行した場合は「<br>」が挿入されます。

図にするとこんな感じですね↓

余白はお好みで！

たまにメチャメチャ行間広いブログとかありますが、ポエムチックな文章だったりするとより雰囲気が出てそれも良いな〜なんて思ったりします。

ブログの内容に合わせて余白も調整すると良いかもしれませんね！皆さんも色々試してみてください。ではまた〜♪