【Cocoon】行間と段落の間隔を調整して記事を読みやすくする方法

Cocoon行間、段落の間隔調整 Cocoon

WordPressテーマ【Cocoon】を使用している人向けの記事になります。

Cocoonのデフォルトの行間や段落だとちょっと読みづらいと私は思うんですよね。そうするとどうなるかっていうと、読者が記事を読んでくれなくなって、最終的には検索順位が上がらなくなっちゃう

だから行間と段落の間隔を調整して、より読みやすいブログ記事を作成しなきゃならない。大丈夫、Cocoonはとても優秀だからCocoon設定で簡単に変えられます。

また、ブロックエディタの投稿画面でもいくつか行間や段落の間隔を調整する方法がありますので、あわせてご紹介していきます。

難しい知識は一切不要です。ひとつずつ画像付きで丁寧に解説していきますが、さっくり1500字で終わります。

本記事を見ながらあなたも一緒にトライしてみましょう!

Cocoonで行間と段落の間隔を調整する方法

では早速行間と段落の間隔を調整するやり方を確認していきます。まずはワードプレスの編集画面からCocoon設定本文と進んでください。

①Cocoon設定⇒②本文
Cocoon設定→本文

この画面で設定がほぼ完結します

行間を調整する

本文のタブを開いたら、一番上の項目の【本文余白】というところで設定をしていきます。

本文余白で行間も段落間隔も変えられる
本文余白

行の高さがすなわち行間の調整になります。最小が1、最大が4です。

1だと行間なし、4だと行間に3行分のすき間ができます。

本文余白の図解

僕は画像のとおり行の高さは1.8です。いろいろ数値をいじってみて、一番見やすいところに設定しましょう

段落の間隔を調整する

段落の間隔は「行の余白」の数字をいじれば変えられます。

段落の間隔を調整

0.1だと詰め詰め、4だと広々。僕は3.8

これでCocoon設定での行間と段落の間隔の調整は終了です。アッという間ですね。

思ったより空白をとってゆったりした感じの方が見やすいと思います。試してみましょう

スペーサーブロックを使う

さて、この項目からは投稿画面で行間や段落の間隔を特定の場所だけに限定して広げる方法を見ていきます。

まずはスペーサーブロックを使ってやってみましょう。

ワードプレスの投稿画面からブロックの追加レイアウト要素スペーサーと続いてください。

スペーサーブロック

そうするとこんなブロックができます。

スペーサーブロックの形状

ただの空白のブロックですね。

実際にこの文章の下にスペーサーブロックを入れています

スペーサーを入れたので、空白がより大きくなりました。

空白はサイドバーで大きさを設定することができます。

ピクセル値をいろいろいじってみましょう
高さ調整

段落ブロックにスペースキーで空白を入れる

1段落分の間隔を開けたいなってときは段落ブロックにスペースだけ入れてみてください。

そうすればそこが空白の段落になって間隔あけられるから。簡単にできて便利ですよ。

Shift+Enterを使う

続いてはShift+Enterで行間を調整する方法です。通常は投稿画面で文章を書いていて、エンターを押すと、次の段落に移ります。

段落ブロックでエンター
段落でエンター

ところが、Shiftと一緒にエンターを押すと、段落はそのままに改行することができます。

段落でシフト+エンター

こちらの文章が実際にShift+エンターで改行してみた文章です。
段落ほど距離を話したくないけど改行したい。そんな時に使えます。

改行の仕組み

僕はこんな風に関連記事を入れるときに使います。
関連記事Cocoon使用者向け記事一覧

以上で行間と段落の間隔を調整する方法の紹介は終了です。

簡単だったでしょ?

行間と段落の間隔を調整すべき理由

行間と段落の間隔を調整すべき理由は突き詰めればあなたのブログの評価を高めるためといえます。

「記事が読みづらい→すぐ離脱→順位が下がる」という悪循環から

「記事が読みやすい→滞在時間UP→順位が上がる」という良い流れに変わります。

ま、ほんとのところはこんなに単純な話ではないのですが、記事の読みやすさは間違いなくあなたのブログの評価につながります。

プロは細かいところまでこだわって仕事をします。あなたもブログをやって、お金を稼ぐために記事を書くのであればもうプロです。

細部までこだわった記事を、読みやすい記事・ブログを作っていきましょう!

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント

  1. お久しぶりです、峠様

    以前にコメントさせていただきました
    ノブです。
    https://nobu1200su4.com/

    峠様の記事を読ませていただいて、サイト風のトップページと
    行間と段落の調整を行いました。
    おかげさまで見栄えがかなり良くなりました。

    今回もとてもわかりやすいご説明で、スムーズにカスタムできました。
    本当にありがとうございました。

    • ノブ様
      コメントありがとうございます。
      再度参考にしていただけたということでありがたいです。
      もっとたくさんの人に貢献できるよう頑張っていきたいと思います。

  2. 峠 様
    はじめまして。きょうわかと申します。ブログを初めて3日目の初心者です。
    リンクフリーと書いてありましたが、勝手にリンクを貼ったりするのもいかがと思いご挨拶に参りました。
    リンクを貼る力もまだありませんが、これから精進していきたいと思います。

    ブログも少し拝見させていただきまきました。初心者でもわかりやすい内容となっていました!
    自分ではこちらのブログを自分のバイブルにしたいと、勝手に思っております!

    これからよろしくお願いいたします(^^)

    • ご丁寧にあいさつどうもありがとうございます。
      リンクフリーですので、どんどんリンクしてください。
      出典は記載くださいね。

      よろしくお願いいたします