WordPressブロックエディタの段落ブロックの使い方を解説

ブロックエディタとは

Gutenbergは、WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネームです。グーテンベルクが印刷業界に起こしたのと同じ大規模な革命をパブリッシング体験全体に起こすことを目的としています。現在、プロジェクトは WordPress のあらゆる部分と関連する4フェーズのプロセス、編集、カスタマイズ、コラボレーション、多言語対応の最初のフェーズにあり、新しい編集体験「ブロックエディター」にフォーカスしています。

WordPressブロックエディタは、WordPress 5.0から導入された新しいコンテンツエディタです。従来のテキストベースのエディタとは異なり、段落、画像、見出しなどを「ブロック」と呼ばれる要素として扱い、それらを組み合わせてページや投稿を作成します。

ブロックエディタの主な特徴:

• 直感的な操作: HTMLやCSSの知識がなくても、ドラッグ＆ドロップなどの操作で簡単にレイアウトを作成できます。
• WYSIWYGに近い編集: 編集画面でコンテンツがどのように表示されるかを確認しながら作業できます。
• 豊富なブロック: テキスト、画像、動画、リスト、引用など、様々な種類のブロックが用意されています。
• 柔軟なレイアウト: カラムレイアウトやメディアとテキストの配置など、より複雑なレイアウトも比較的簡単に作成できます。
• 再利用可能なブロック: よく使うブロックを保存しておき、再利用できます。

ブロックエディタのメリット:

• 初心者でもリッチなコンテンツを作成しやすい。
• レイアウトの自由度が高い。
• 編集作業の効率化が期待できる。

ブロックエディタは「Gutenberg（グーテンベルク）」という開発コード名でも呼ばれています。

ブロックエディタの段落ブロックの使い方

WordPressのブロックエディタ（Gutenberg）において、テキストを入力する最も基本的なブロックが「段落ブロック」です。以前のクラシックエディタでいうところの「テキストを入力する部分」に相当します。

1. 段落ブロックの追加方法

新しい段落ブロックを追加する方法はいくつかあります。

• Enterキーを押す: 既存のブロックの最後でEnterキーを押すと、自動的に新しい段落ブロックが追加されます。これが最も一般的な方法です。
• 「+」アイコンをクリック:
  • 既存のブロックの上下にマウスカーソルを合わせると表示される青い「+」アイコン（ブロックを追加）をクリックします。
  • エディタの左上にある「+」アイコン（ブロックを切り替えたり追加したりできます）をクリックします。 表示されるブロック選択画面で「段落」を選択します。検索窓に「段落」と入力すると見つけやすいです。
• 「/」コマンドを使用: 新しい行で「/」を入力すると、ブロックの候補が表示されます。ここで「段落」と入力して選択します。

2. テキストの入力

段落ブロックが追加されたら、カーソルが表示されている部分に直接テキストを入力していきます。

3. テキストの書式設定（ツールバー）

段落ブロックを選択すると、ブロックの上にツールバーが表示されます。ここで基本的な書式設定が可能です。

• B（太字）: テキストを選択し、Bアイコンをクリックするか、Ctrl/Cmd + B で太字にします。
• I（斜体）: テキストを選択し、Iアイコンをクリックするか、Ctrl/Cmd + I で斜体にします。
• リンク: テキストを選択し、リンクアイコンをクリックしてURLを入力します。
• その他のオプション（下向き三角または点3つのアイコン）:
  • ハイライト: テキストの背景色や文字色を変更できます。
  • インライン画像: テキスト内に小さな画像を挿入できます。
  • インラインコード: コードスニペットを埋め込む際に使用します。
  • キーボード入力: キーボードの入力をシミュレートする際に使用します。
• 配置: テキストの左揃え、中央揃え、右揃えを設定できます。

4. ブロック設定（サイドバー）

段落ブロックを選択した状態で、エディタ右側のサイドバーに「ブロック」タブが表示されます。ここでより詳細な設定が可能です。

• 文字設定:
  • フォントサイズ: 小、中、大、特大、またはカスタムサイズ（ピクセル、em、remなどで指定）を選択できます。
  • 表示（行の高さ）: 行の高さを調整できます。
  • 見た目: 太さや斜体など、テキストの見た目を調整できます（テーマやフォントに依存します）。
  • 大文字/小文字: テキストをすべて大文字、すべて小文字、または各単語の先頭を大文字にする設定ができます。
• 色設定:
  • テキスト: 文字の色を選択できます。
  • 背景: 段落ブロックの背景色を選択できます。
• 寸法:
  • 余白: ブロックの内側（パディング）と外側（マージン）の余白を設定できます。
• 高度な設定:
  • HTMLアンカー: ブロックに固有のIDを設定し、そのIDに直接リンクすることができます。
  • 追加CSSクラス: カスタムCSSを適用するために、追加のCSSクラスをブロックに割り当てることができます。

5. ブロックの移動と削除

• 移動:
  • ブロックを選択すると表示される上下の矢印アイコンをクリックして、ブロックを上下に移動できます。
  • ブロックを選択すると表示される6つの点（ドラッグハンドル）をドラッグして、ブロックを自由に配置できます。
• 削除: ブロックを選択し、ツールバーの点3つアイコンをクリックし、「削除」を選択します。または、ブロックを選択した状態で Delete キーを押します。

段落ブロックの注意点

WordPressのブロックエディタにおけるテキストブロック（主に「段落」ブロックや「見出し」ブロックなど）を使用する際の注意点はいくつかあります。以下に主な点を挙げます。

1. 用途の明確化と適切なブロックの選択

• 段落ブロック（Paragraph）: 最も基本的なテキストブロックで、通常の文章記述に使用します。
• 見出しブロック（Heading）: ページの構造を示すために使用します。SEOの観点からも重要で、H1（通常はタイトルに予約）からH6まで適切なレベルを選択します。デザインのためだけに見出しブロックを使用せず、コンテンツの階層を正しく表現することが重要です。
• リストブロック（List）: 箇条書きや番号付きリストを作成する際に使用します。手動でハイフンや数字を打ち込むのではなく、必ずこのブロックを使用しましょう。
• 引用ブロック（Quote）: 他のソースからの引用を明示する際に使用します。
• コードブロック（Code）/整形済みテキストブロック（Preformatted）: プログラミングコードや、改行やスペースをそのまま表示したいテキストに使用します。

注意点: 各ブロックにはそれぞれの役割があります。例えば、見出しブロックを単なる大きな文字として使ってしまうと、SEOに悪影響を及ぼしたり、スクリーンリーダーを利用するユーザーにとって情報の構造が分かりにくくなったりします。

2. アクセシビリティへの配慮

• 十分なコントラスト: テキストの色と背景色のコントラストが十分に高いことを確認しましょう。特に、薄い色の背景に薄い色のテキストを使用すると、視覚に障がいのあるユーザーにとって読みづらくなります。WordPressテーマによっては、コントラスト比をチェックする機能を持つものもあります。
• 適切な見出し構造: 前述の通り、見出しブロックは正しい階層で使用します（例：H2の下にH3）。見出しレベルを飛ばしたり（例：H2の次にH4）、見た目だけのために見出しを使用したりしないようにしましょう。
• 代替テキスト（alt属性）: 画像を挿入する際は、必ず意味のある代替テキストを設定しましょう。テキストブロックに直接関係はありませんが、ブログ全体のアクセシビリティに関わる重要な点です。

3. コピー＆ペースト時の注意

• 余分な書式設定の持ち込み: 外部のアプリケーション（Word、Google ドキュメントなど）からテキストをコピー＆ペーストすると、意図しないHTMLタグやCSSスタイルが一緒にペーストされることがあります。これにより、レイアウトが崩れたり、表示が意図と異なる場合があります。
• 対策:
  • 「プレーンテキストとしてペースト」機能を利用する: 多くの場合、右クリックメニューやブロックエディタのツールバーにこのオプションがあります。
  • 一度プレーンテキストエディタ（メモ帳など）にペーストしてから再度コピーする: これにより、余分な書式設定が取り除かれます。
  • WordPressのエディタ内で書式を再設定する: ペースト後に、WordPressのブロックエディタのツールバーで、太字、イタリック、リストなどの書式を再設定しましょう。

4. レスポンシブデザインの確認

• デバイスごとの表示確認: 作成したテキストが、デスクトップ、タブレット、スマートフォンなど、さまざまなデバイスで適切に表示されるかを確認しましょう。ブロックエディタには通常、プレビュー機能でデバイス別の表示を確認できるオプションがあります。
• 長すぎる行: 特にデスクトップ表示で、1行の文字数が非常に多くなると読みにくくなります。適切な行長（一般的には50～75文字程度が読みやすいとされています）になるように調整しましょう。

5. 不要なスペースや改行の管理

• 余分な改行: テキストブロック内で連続してEnterキーを押すと、空の段落ブロックが生成されたり、不要な<br>タグが挿入されたりすることがあります。これは見た目の問題だけでなく、HTML構造を複雑にする原因にもなります。
• シフト+エンターとエンターの使い分け:
  • Enterキー: 新しい段落を作成します。これにより、HTMLでは新しい<p>タグが生成されます。
  • Shift + Enterキー: 段落内で改行します（ソフト改行）。これにより、HTMLでは<br>タグが生成されます。同じ段落内で見た目だけ改行したい場合に利用します。

6. SEO（検索エンジン最適化）への配慮

• キーワードの適切な配置: テキストブロック内に、ターゲットとするキーワードを自然な形で配置しましょう。キーワードの詰め込み（キーワードスタッフィング）は避け、読者にとって価値のあるコンテンツを作成することが最優先です。
• コンテンツの品質: ユーザーにとって有益で、高品質なコンテンツを提供することが、SEOの最も重要な要素です。

7. スタイルの一貫性

• テーマのスタイルを尊重: ブロックエディタは柔軟性がありますが、基本的には使用しているWordPressテーマのスタイルを尊重しましょう。個々のブロックで極端に異なるフォントサイズや色を使用すると、サイト全体の統一感が損なわれる可能性があります。
• カスタムCSSの乱用を避ける: 個別のブロックにカスタムCSSを適用しすぎると、サイトの保守が難しくなったり、将来的なテーマの変更やWordPressのアップデートで問題が生じる可能性があります。可能な限り、テーマのカスタマイザーやブロック設定で提供されるオプションを利用しましょう。

これらの注意点を意識することで、WordPressのブロックエディタをより効果的に活用し、ユーザーにとって読みやすく、SEOにも強いコンテンツを作成することができます。