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

スポンサーリンク
Wordpress
人気テーマの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;

 

 

コメント