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

たけぴー 2020年7月1日

人気テーマのcocoonをカスタマイズする方法をご紹介します。今回は「行間の変更」です。

みなさんこんにちは！筋肉カメレオンです。

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

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

お好きな所から読める目次

デフォルトの表示

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

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

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;

稼げるアフィリエイトASP

アフィリエイトを始めるなら、まず登録いただきたいASPが「A8.net」
豊富な広告と、使いやすい管理画面。
アフィリエイト満足度ランキングで9年連続1位を獲得！
成果報酬を即日振込申請できる、即時支払機能で報酬を即現金できます。