ブログ運営

爆速WordPressテーマcocoonの行間を変更する方法【CSSカスタマイズ】

人気テーマのcocoonをカスタマイズする方法をご紹介します。今回は「行間の変更」です。
みなさんこんにちは!筋肉カメレオンです。

爆速WordPressテーマとして人気のある「cocoon」ですが、気になる点がひとつだけあります。

それは「行間の狭さ」です。

デフォルトの表示

若干詰まり気味なので少し読みづらいのです。テキストをテンポよく読めるようにするには、行間がもう少し欲しいです。

カスタマイズ後の表示

いかがでしょうか。少し読みやすくなったのではないでしょうか。

カスタマイズ内容

CSSで行間を指定します。

「外観」->「カスタマイズ」を開き、「追加CSS」のページを開きます。
テキストエリアに下記の追加CSSを入力します。

追加CSS

.entry-content p{
margin-bottom: 2.5em;
}

CSSを解説すると、

.entry-content p ・・・投稿本文の段落
margin-bottom: 2.5em;・・・要素の下部に空白を2.5文字分空けましょう

という指定になります。

厳密には行間ではなく、段落間の空白の指定ですね。

さいごに

cocoonは素晴らしいWordPressテーマではありますが、自分好みにカスタマイズできるのが、WordPressの良いところです。

ぜひカスタマイズしてより良いサイト運営をしましょう!

それでは。

追記

Cocoon設定の「本文」タブの中に「行の余白」の設定がありましたが、ここで行の余白を設定してしまうと、行の上下に余白が出てしまいます。

見出しとの間のスペースが開きすぎてしまうので、追加CSSに下記の記述を追加すると見た目が綺麗になります。

margin-bottom: 0;

 

 

ABOUT ME
アバター
たけぴー
2018年に体調を崩して激やせしてから筋トレにハマり、筋肉をつけて体重を10kg増加。 ホームトレーニーとして自宅でできる筋トレ方法や筋肉の知識、栄養学などを主にYouTubeにて学ぶ。 好きな筋肉は上腕二頭筋。得意な筋肉は大胸筋。 二児の父。 本業は大手Web制作会社のディレクター兼エンジニア。副業でいくつかのサイトを運営中。 詳しいプロフィールはこちら