【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう

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

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

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

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

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

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

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

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

①Cocoon設定⇒②本文

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

行間を調整する

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

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

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

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

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

段落の間隔を調整する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Shift+Enterを使う

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

段落ブロックでエンター

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

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

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

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

簡単だったでしょ?

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

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

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

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

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

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

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

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

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

タイトルとURLをコピーしました