WordPress段落」ブロックの使い方を紹介します。段落内での改行、文字の装飾や字下げ、デザインや幅の変更、段落間の間隔や行間を広げる方法などを、豊富な図解でわかりやすく説明しています。

この記事をお読みいただく前に

この記事では、段落ブロックの使い方を解説するために、スクリーンショット画像を掲載しています。ご利用環境(WordPressのバージョンや使用テーマなど)によっては、実際の画面と異なる場合があります。

段落ブロックの基本

段落ブロックの概要

段落ブロックは、主に文章(テキスト)からなるブロックで、Webページ上で記事の本文を表示します。ブロックエディタの中でも、特によく使うブロックです。

段落ブロックでは、色やサイズの変更などによる装飾、リンクや画像の挿入などをすることができます。詳しい方法は、このページの「段落ブロックの使い方」でご紹介します。

段落ブロックの使い方を学ぶ前に、WordPress初心者の方にとって少々わかりにくいと思われる、改行と段落の違いと使い方について確認しておきましょう。

改行と段落の違いと使い方

「改行」と「段落」は、どちらも長い文章を区切ることによって、記事を読みやすくするために使います。改行と段落の違いは、次のとおりです。

改行とは
行を変えることによって、文章を区切ることです。
段落の中で行を変えるだけで、行間は変更されません
改行を挿入するには、区切りたい場所で[Shift]+[Enter]キーを押します。
段落とは
文章を「意味のある塊」で区切るために使います。
たんに行を変えるだけでなく、行間のスペースが広くなります
段落を分けるには、区切りたい場所で[Enter]を押します。
改行と段落の違い
行を変えるだけなら…[Shift]+[Enter
段落を分けるなら……[Enter

段落ブロックの使い方

段落ブロックの装飾や、リンクの挿入などの設定を行うには、[ブロックツールバー]や[パネル]を使います。

段落ブロックの[ブロックツールバー]と[パネル]
段落ブロックの[ブロックツールバー]と[パネル]

ブロックツールバーで設定できること

ブロックツールバーで設定できること
  1. 文字揃え(左寄せ・中央寄せ・右寄せ)を変更する
  2. 太字・イタリックにする
  3. リンクを設定する
  4. インラインコードを設定する
  5. 文章中に画像を挿入する
  6. キーボード入力を設定する
  7. 文字色を変更する
  8. 上付き・下付きを設定する
  9. 取り消し線を引く

※の設定項目は、一般的なブログやWebサイトでは使用機会があまりないと思われますので、簡潔に説明します。

文字揃え(左寄せ・中央寄せ・右寄せ)を変更する

段落ブロック全体の文字揃えを指定できます。初期状態は「左寄せ」です。

段落ブロックツールバー 文字揃えの設定

「中央寄せ」や「右寄せ」を設定すると、以下のように表示されます。

段落ブロック 文字揃えの設定例

太字・イタリックにする

段落ブロック内の一部のテキストを選択して、太字イタリックに変更することができます。

段落ブロックツールバー 太字・イタリックの設定
イタリックとは、いわゆる「斜体」文字のことで、強調や引用などを示す時に使われます。

リンクを設定する

一部のテキストを選択して、リンクを挿入することができます。

段落ブロックツールバー リンクの設定

外部サイトに移動するリンク(外部リンク)だけでなく、サイト内の別ページに移動するリンク(内部リンク)やページ内の任意の場所に移動するリンク(ページ内リンク)を設定することができます。

段落ブロックの一部のテキストにリンク先を指定
リンクの設定については、リンクの貼り方|WordPressでリンクを貼る方法とURLの埋め込みもあわせてお読みください。

インラインコードを設定する

文章中に、HTMLなどのソースコードを表示させるときに使います。

インラインコードの使用例
インラインコードの使用例

文章中に画像を挿入する

段落ブロック内の文章の途中に、画像ファイルを挿入することができます。画像を挿入したい位置をクリックして、[続きを読む]ボタン→[インライン画像]の順にクリックします。

段落ブロックツールバー インライン画像の設定

挿入したい画像ファイルを選択(またはアップロード)し、選択をクリックします。

挿入したい画像ファイルを指定し、選択をクリック
インライン画像の使用例
インライン画像の使用例

キーボード入力を設定する

キーボードなどで入力される文字列であることを示すために使います。

キーボード入力の使用例
キーボード入力の使用例

文字色を変更する

段落ブロック内の一部のテキストの、文字色を変更することができます。テキストを選択し、[続きを読む]ボタン→[テキスト色]の順にクリックします。

段落ブロックツールバー テキスト色の設定
段落ブロック全体の文字色を変更する場合は、[ブロックツールバー]ではなく[パネル]で設定できます。手順は、のちほど説明します。

色の候補がいくつか表示されます。表示される色の候補は、使用しているテーマによって異なります。クリックすると、文字色を変更することができます。

文字色の変更
文字色の変更
他の色に変更したい場合は[カスタムカラー]をクリックして、細かい設定をすることもできます。

他の色に変更した場合は[カスタムカラー]をクリック

マウスで色を選択できるほか、カラーコードを入力することもできます。

カスタムカラーの設定方法
カラーコードとは、Webページで表示する色を指定するためのコードです。「カラーコード 一覧」などで検索すると、さまざまな色見本とそれに対応するカラーコードを確認できるサイトが見つかります。

上付き・下付きを設定する

上付き、下付き文字を表示させるときに使います。

上付き・下付きの使用例
下付きの使用例

取り消し線を引く

段落ブロック内の一部のテキストに、取り消し線を引くことができます。設定したいテキストを選択して、[続きを読む]ボタン→[取り消し線]の順にクリックします。

段落ブロックツールバー 取り消し線の設定
取り消し線の使用例
取り消し線の使用例

パネルで設定できること

パネルで設定できること
  1. 文字の大きさを変更する
  2. 文字色を変更する
  3. 背景色を変更する
  4. 先頭文字を大きくする
  5. HTMLアンカーを設定する
  6. 追加CSSクラスを設定する

文字の大きさを変更する

タイポグラフィ]では、ブロック全体の文字の大きさを変更できます。プルダウンからサイズを選択するか、あるいは任意のサイズを数値(単位:ピクセル)で指定することができます。

ブロック全体の文字サイズを変更できる
ブロック全体の文字サイズを変更できる

文字色を変更する

]メニューの[テキスト色]では、ブロック全体の文字色を指定することができます。

段落ブロックパネル テキスト色の設定
他の色に変更したい場合は[カスタムカラー]をクリックして、細かい設定をすることもできます。
段落ブロック内の一部のテキストの色を変更する場合は、[パネル]ではなく[ブロックツールバー]で設定します。

背景色を変更する

]メニューの[背景色]では、ブロック全体の背景色を指定することができます。

段落ブロックパネル 背景色の設定
他の色に変更したい場合は[カスタムカラー]をクリックして、細かい設定をすることもできます。

先頭文字を大きくする

テキスト設定]メニューの[ドロップキャップ]をオンにすると、段落の先頭文字のサイズが大きくなります。

段落ブロックパネル ドロップキャップの設定
以下のHTMLアンカーを設定する追加CSSクラスを設定するについては、HTMLやCSSの知識が必要です。初心者さん向けに、簡単な使用例をご紹介します。

HTMLアンカーを設定する

HTMLアンカーは、主にそのブロックを「ページ内リンクの移動先」に指定する時に使います。

通常のリンクをクリックするとページの先頭部分に移動しますが、ページ内に「目印」をつけることでページ内の任意の場所にリンクを設定することができます。[HTML アンカー]には、この「目印」となる文字列を入力します。
段落ブロックパネル HTMLアンカーの設定
ページ内リンクの設定手順

手順1
段落ブロックの[HTML アンカー]に、「目印」となる文字列を半角英数字で入力します。このとき、スペースを含まないように注意してください。今回は、「link」と入力しました。

「HTML アンカー」にページ内リンクの目印を入力
「HTML アンカー」にページ内リンクの目印を入力

手順2
他のブロックで、ページ内リンクを設定したいテキストを選択し、[リンク]ボタンをクリックします。リンク先に「#link」と入力し、送信ボタンをクリックすると、ページ内リンクの設定が完了します。

HTMLアンカーを使用したページ内リンクの設定
手順③の#(ハッシュ)は半角で入力

ページ内リンクの設定方法については、リンクの貼り方 – ページ内リンクの貼り方で詳しくご紹介しています。

追加CSSクラスを設定する

特定のCSSクラスを割り当てることができます。ツールバーやパネルでは設定できない装飾やレイアウトなどを適用したい時に使います。

段落ブロックパネル 追加CSSクラスの設定

追加CSSクラスを使った設定

追加CSSクラスの簡単な使用例をご紹介します。

  • 段落ブロックに字下げを設定する
  • 段落ブロックの幅を変更する

字下げを設定する

特定の段落ブロックに、字下げ(インデント)を設定します。

手順1
字下げを設定したい段落ブロックの[追加 CSS クラス]に、クラス名を半角英数字で入力します。今回は、「indent」と入力しました。

「追加 CSS クラス」にクラス名を入力
「追加 CSS クラス」にクラス名を入力

手順2
使用しているテーマのCSSファイルを開きます。WordPress管理画面上でCSSを編集する場合は、[外観]→[カスタマイズ]をクリックします。

*画像
テーマカスタマイザーの開き方

手順3
追加CSS]をクリックします。

「追加CSS」をクリック

手順4
下記コードを記述し、公開をクリックします。

.indent{
 text-indent: 1em;
}
「追加CSS」にコードを記述

プレビューを確認すると、追加CSSクラスを指定した段落に字下げが設定できています。

指定した段落に字下げが設定できている

追加CSSクラスを利用した設定方法を、簡単にまとめます。

追加CSSクラスを利用した設定手順

  • 手順1:[追加 CSS クラス]にクラス名を入力
  • 手順2:CSSファイルを開く
  • 手順3:CSSファイルにコードを記述

幅を変更する

通常、段落ブロックの内容は、Webページ上では親要素と同じ幅で表示されます。今回は、段落の幅をその半分(50%)に設定してみましょう。

幅を半分に変更するためのCSSクラスを「width50」とすると、追加CSSクラスを利用した設定手順は、以下のとおりです。

  • 手順1:[追加 CSS クラス]にクラス名「width50」を入力
  • 手順2:CSSファイルを開く
  • 手順3:CSSファイルに下記コードを記述
.width50 {
 width: 50%;
}

このように、CSSやHTMLを使えるようになると、さまざまな装飾やレイアウトを設定できます。WordPressが学べるおすすめ本では、HTML・CSSを学べる本をはじめ、WordPressの使い方をマスターするのに役立つ解説書をご紹介しています。

段落ブロックを追加する

ブロックを追加するには、いくつかの方法があります。ブロックを追加する方法では、以下の5つについて手順を詳しくご紹介しています。

  1. ブロック内の末尾で[Enter]を押す
  2. ブロックツールバー[オプション]→[前に挿入/後に挿入]をクリック
  3. 画面左上の[+]をクリック
  4. 空白ブロック右側の[+]をクリック
  5. ブロック間の[+]をクリック

段落ブロックを削除する

ブロックを削除するには、ブロックツールバーの[オプション]→[ブロックを削除]の順にクリックします。

ブロックツールバーの[オプション]→[ブロックを削除]の順にクリック

ブロックタイプまたはスタイルを変更する

ブロックツールバー左端にあるボタンをクリックすると、ブロックの種類や表示スタイルを変更することができます。

段落ブロックのブロックタイプ・スタイルの変更

文章を見やすくするコツ

段落の余白を広げる

段落の下に大きな間隔を空けるために改行を繰り返すのは、Web制作のルールにおいて好ましくありません。こんなときは「スペーサー」ブロックが便利です。

手順1
余白をとりたい部分に、「スペーサー」ブロックを追加します。

「スペーサー」ブロックを追加

手順2
スペーサーブロックの底辺を上下にドラッグすることで、余白の大きさを調節できます。

スペーサーブロックの底辺を上下にドラッグ

段落内の行間を変える

テーマによっては、段落内の行間を変更できる機能があります。WordPress標準テーマ「Twenty Twenty-One」では、段落ブロックの[パネル]で[行の高さ]を調節できます。

標準テーマ「Twenty Twenty-One」では行の高さを設定できる
標準テーマ「Twenty Twenty-One」では行の高さを設定できる

使用しているテーマに行間を変える機能がない場合は、追加CSSクラスを利用して設定することができます。例えば、

  • 手順1:[追加 CSS クラス]にクラス名「lh300」を入力
  • 手順2:CSSファイルを開く
  • 手順3:CSSファイルに下記コードを記述
.lh300 {
 line-height: 300%;
}

「300」の部分を変更することで、行間の大きさを調節できます。

今すぐ使えるかんたんEx HTML&CSS 逆引き事典
今すぐ使えるかんたんEx HTML&CSS 逆引き事典
2020年4月 技術評論社
Kindleで無料サンプルを読めます!(2021年7月現在)

文章ばかり続けない

1つの段落に文字が多くなりすぎると、とても読みづらくなります。

文字数についてのはっきりした基準は言えませんが、このサイトでは1つの段落あたり3~4行を目安にしています。ただし、この目安はパソコンで見たときのものです。

同じ文字数でも、スマートフォンで見ると2倍ほどの行数になります。場合によっては、スマホの画面が文字だらけの状態に。記事の見栄えを確認するときは、パソコンだけでなく、スマホも活用するといいでしょう。

同じ文字数でも、PCとスマホでは見栄えが異なる
同じ文字数でも、PCとスマホでは見栄えが異なる

また、ブロック間の間隔を空けることができるとは言え、段落ブロックを何度も連続して使うことも、記事が読みづらくなる原因になります。「見出し」「画像」「リスト」ブロックなどを活用して、記事にメリハリをつけるといいでしょう。

まとめ

段落ブロックは、主に記事の本文を表示するために使います。ブロックツールバーやパネルを使って、デザインの変更やリンクの挿入などをすることができます。

文章ばかりが続くコンテンツは、見づらくなりがちです。余白や行間を広げたり、見出しや画像などを織り交ぜたりして、読みやすい記事を作成しましょう!