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>」が挿入されます。

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

余白はお好みで!

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

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

コメント

  1. はじめまして。cocoonそしてブログ初心者のりーと申します。
    今、行間調整をしようとしているのですが、2時間以上も分からずこちらのサイトにたどり着きました。
    とっても分かりやすい「行間」の説明ですごく納得しているところです。
    スタイルシートの変更も画像をみてよく分かるのですが、私はそれ以前の問題でして。
    外観→テーマ編集→「スタイルシートstyle.css」の「.entry-content p」の「line-height」の数値を変えればいいのですよね?
    その「.entry-content p」を探しだすことができません。
    上から下までじっくりスクロールして探しているのですが見当たりません。
    スタイルシート内のどこらへんにあるのでしょうか?
    どうかご教示いただけましたら幸いです。

    • コメントありがとうございます!
      CSSは子テーマの「スタイルシートstyle.css」に全部丸ごと追記してください。
      /*必要ならばここにコードを書く*/の下にコピペしてもらえれば大丈夫です。
      子テーマをまだ使って無い場合はCocoonのサイトからダウンロードしてくださいね。

  2. DICE様
    ありがとうございます。
    あーそういうことなんですね。コピペすればよかったのですね。
    理解するまでに半日かかりました(汗)。

    お陰さまで、行間調整そして読みやすい表示にすることができました。

    本当に初心者にむけての分りやすい説明のサイトを読むとほっとします。
    感謝です!
    本当にありがとうございました。

  3. いつもありがとうございます!とても参考になりました!

    • コメントありがとうございます!
      お役に立てて幸いです。
      今後ともよろしくお願いします^^