人気テーマの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;
コメント