WordPress Cocoon

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

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

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

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

CSSでサクッと調整

今回のCSSはこれだけです↓

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

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

margin」で段落の間隔を上下1emだったのを2emに変更しています。「em」は文字の大きさを基準にした単位で「1em=1文字分」となります。

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

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

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

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

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

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

余白はお好みで!

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

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

コメント