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

目次

ブロックエディタとは

WordPressのブロックエディタ(通常、Gutenbergとも呼ばれます)は、ページや投稿のコンテンツを「ブロック」と呼ばれる要素で構築するためのエディターです。

各ブロックは独立した編集可能なセクションであり、テキスト、画像、ビデオ、ボタンなど多様なコンテンツタイプに対応しています。

段落ブロック

段落(Paragraph)ブロックは、最も基本的でよく使用されるブロックの一つです。このブロックは、テキストコンテンツを編集する際のデフォルトブロックとして機能します。

基本的な特性:

  1. テキスト入力: 単純なテキストからリンク、リスト、そしてその他のテキスト関連のフォーマットまで、多くのテキストエレメントをサポートしています。
  2. インラインスタイリング: テキストを太字、斜体、下線などにできます。
  3. テキストアラインメント: 左寄せ、右寄せ、中央寄せ、両端揃えなど、テキストのアラインメントを簡単に変更できます。

使い方:

  1. 新しい段落ブロックを追加するには、エディタで「+」ボタンをクリックし、”段落” または “Paragraph” を選択します。
  2. ブロックが追加されたら、その中にテキストを入力します。
  3. 上部のツールバーまたは右側の設定パネルを使用して、テキストのスタイルや設定を調整できます。

高度な設定:

  • カスタムスペーシング: ブロックのマージンやパディングを調整できます。
  • 背景色とテキスト色: 背景色やテキスト色をカスタムで設定することができます。
  • ドロップキャップ: 段落の最初の文字を大きく表示する「ドロップキャップ」機能もあります。
  • HTMLモード: 「詳細(More options)」メニューからHTMLモードを選び、直接HTMLを編集することもできます。

このように、段落ブロックは非常に多機能でありながら、使いやすい設計になっています。初心者から上級者まで、多くのユーザーにとって便利なブロックです。

見出しブロック

見出し(Heading)ブロックは、テキストを際立たせるため、また文章を構造的に分けるために使用されるブロックです。このブロックはSEO(検索エンジン最適化)にも重要な役割を果たします。

基本的な特性:

  1. 階層的見出し: H1からH6までの見出しレベルを選ぶことができます。
  2. テキストアラインメント: 左寄せ、右寄せ、中央寄せを選べます。
  3. テキスト装飾: 斜体、太字、テキストリンクなどの基本的なテキスト装飾が可能です。

使い方:

  1. 新しい見出しブロックを追加するには、エディタで「+」ボタンをクリックし、「見出し」または “Heading” を選択します。
  2. 追加されたブロックにテキストを入力します。
  3. 上部のツールバーまたは右側の設定パネルで、見出しのレベル(H1, H2, H3, etc.)やその他の設定を調整できます。

高度な設定:

  • HTMLアンカー: 見出しにIDを付けて、他のページや同じページ内でリンクを作ることができます。
  • 文字色: カラーパレットを使用して見出しの色を変更することができます。
  • 追加のCSSクラス: カスタムスタイリングを適用するために、追加のCSSクラスを指定できます。

見出しブロックは、内容を整理し、ユーザーと検索エンジンにとって読みやすい形にするために非常に重要です。適切なレベルの見出しを使うことで、文書の構造が明確になり、SEOにも寄与します。

リストブロック

リスト(List)ブロックは、順序付きリスト(番号付き)または順序なしリスト(箇条書き)を作成するためのブロックです。このブロックは、情報を整理しやすく表示するために非常に有用です。

基本的な特性:

  1. リストタイプ: 順序付き(Ordered)と順序なし(Unordered)の2種類のリストがあります。
  2. インデント: リスト項目をインデントしたり、インデントを解除したりすることができます。
  3. テキスト装飾: 斜体、太字、リンクなどの基本的なテキスト装飾が可能です。

使い方:

  1. 新しいリストブロックを追加するには、エディタで「+」ボタンをクリックし、「リスト」または “List” を選択します。
  2. 追加されたブロックにテキストを入力します。Enterキーを押すと、新しいリスト項目が作成されます。
  3. 上部のツールバーで、リストのタイプ(順序付きか順序なし)を切り替えたり、インデントを調整したりできます。

高度な設定:

  • 開始値: 順序付きリストで、開始する番号を指定できます(HTMLの start 属性)。
  • リバースオーダー: 順序付きリストの番号を逆順にすることができます(HTMLの reversed 属性)。
  • 追加のCSSクラス: カスタムスタイリングを適用するために、追加のCSSクラスを指定できます。

リストブロックは情報を視覚的に整理するのに役立ち、ユーザーエクスペリエンスを向上させるとともに、SEOにも影響を与える場合があります。適切に使用することで、コンテンツの品質とアクセシビリティを高めることができます。

引用ブロック

引用(Quote)ブロックは、他のソースからの引用文を整形して表示するためのブロックです。このブロックは、文献や他のウェブサイト、有名な言葉などを引用する際に特に有用です。

基本的な特性:

  1. テキストフィールド: 引用したいテキストをこちらに入力します。
  2. 引用元フィールド: 引用の出典や著者名を記述するためのフィールドがあります。
  3. テキスト装飾: 引用テキストに対して、斜体、太字、リンクなどの基本的なテキスト装飾が可能です。

使い方:

  1. 新しい引用ブロックを追加するには、エディタで「+」ボタンをクリックして、「引用」または “Quote” を選択します。
  2. 引用ブロックが追加されたら、引用したいテキストとその出典(オプション)を入力します。
  3. 上部のツールバーまたはサイドバーで、テキストのスタイルや装飾を調整できます。

高度な設定:

  • ブロックスタイル: いくつかのプリセットされたスタイルが用意されている場合があります(例:大きな引用符、小さな引用符など)。
  • 追加のCSSクラス: カスタムスタイリングを適用するために、追加のCSSクラスを指定できます。

引用ブロックを使用すると、コンテンツに深みを与え、信頼性を高めることができます。また、正確な引用と出典の記載は、著作権に関する問題を防ぐためにも重要です。

コードブロック

コードブロックは、WordPressのブロックエディタ(通常はGutenbergと呼ばれる)でプログラムコードを整形して表示するための専用ブロックです。このブロックは主にプログラムコードを記事やページに掲載する際に使用されます。

基本的な特性:

  1. 非装飾テキスト: コードブロック内のテキストは、一般的なテキストブロックとは異なり、HTMLやMarkdownなどの形式で解釈されません。
  2. 固定幅フォント: ほとんどの場合で等幅(モノスペース)フォントが使用され、コードの構造が明確に表示されます。
  3. エスケープ: 特殊文字(例:<, >, & など)もそのままの形で表示されます。

使い方:

  1. 新しいコードブロックを追加するには、エディタで「+」ボタンをクリックし、「コード」または “Code” を選択します。
  2. ブロックが追加されたら、コードをそのままコピーアンドペーストするか、手動で入力します。
  3. コードブロックは基本的に装飾が不要なため、テキスト装飾のオプションはありません。

高度な設定:

  • 追加のCSSクラス: もし独自のスタイリングを適用したい場合は、追加のCSSクラスを指定できます。

コードブロックは特にテクニカルな記事やチュートリアル、プログラミングに関する投稿で便利です。ただし、シンタックスハイライト(コードの色分け表示)を行いたい場合は、専用のプラグインや追加の手段が必要になることがあります。

整形済みテキストブロック

整形済みテキストブロック(Preformatted Text Block)は、WordPressのブロックエディタにおいて、テキストをそのままの形式で表示するためのブロックです。このブロックは、行間、空白、インデントなどを元の形式で保持します。

基本的な特性:

  1. 非装飾テキスト: 整形済みテキストブロック内のテキストは、HTMLやMarkdownのようなマークアップ言語による装飾が適用されません。
  2. 固定幅フォント: 通常、等幅(モノスペース)フォントが使用されます。これにより、コードやテキストが整列され易くなります。
  3. 空白とインデントの保持: 入力されたテキスト内の空白(スペースやタブ)と改行はそのまま表示されます。

使い方:

  1. 新しい整形済みテキストブロックを追加するには、エディタ内で「+」ボタンをクリックして、「整形済みテキスト」または “Preformatted” を選択します。
  2. ブロックが追加されたら、テキストをそのままコピー&ペーストするか、手動で入力します。

高度な設定:

  • 追加のCSSクラス: 特定のスタイリングを適用したい場合は、ブロック設定で追加のCSSクラスを指定することができます。

整形済みテキストブロックは、ソースコードだけでなく、詩やアートワーク、テキストベースの図表など、特定の形式を維持したいテキストに便利です。

プルクオートブロック

整形済みテキストブロック(Preformatted Text Block)は、テキストをそのままの形式で表示するためのブロックです。このブロックは、行間、空白、インデントなどを元の形式で保持します。

基本的な特性:

  1. 非装飾テキスト: 整形済みテキストブロック内のテキストは、HTMLやMarkdownのようなマークアップ言語による装飾が適用されません。
  2. 固定幅フォント: 通常、等幅(モノスペース)フォントが使用されます。これにより、コードやテキストが整列され易くなります。
  3. 空白とインデントの保持: 入力されたテキスト内の空白(スペースやタブ)と改行はそのまま表示されます。

使い方:

  1. 新しい整形済みテキストブロックを追加するには、エディタ内で「+」ボタンをクリックして、「整形済みテキスト」または “Preformatted” を選択します。
  2. ブロックが追加されたら、テキストをそのままコピー&ペーストするか、手動で入力します。

高度な設定:

  • 追加のCSSクラス: 特定のスタイリングを適用したい場合は、ブロック設定で追加のCSSクラスを指定することができます。

整形済みテキストブロックは、ソースコードだけでなく、詩やアートワーク、テキストベースの図表など、特定の形式を維持したいテキストに便利です。

テーブルブロック

テーブルブロックは、行と列からなるシンプルなテーブルをページや投稿に挿入できます。データの整理や比較、リスト作成などに便利です。

主な特性:

  1. 行と列の追加/削除: テーブルに新しい行や列を追加、または削除できます。
  2. セルの結合: 特定のセルを結合して、より複雑なテーブルを作成することも可能です。
  3. テキスト整列: セル内のテキストを左寄せ、中央寄せ、または右寄せにできます。
  4. スタイリング: テーブルやセルの背景色を変更するオプションもあります。

使い方:

  1. 新しいテーブルブロックを追加するには、エディタ内で「+」ボタンをクリックしてから、「テーブル」を選択します。
  2. 初期設定として、行と列の数を指定します。
  3. テーブルが挿入されたら、各セルにテキストや数字を入力できます。

高度な設定:

  • 追加のCSSクラス: あらかじめ定義したCSSを適用するための「追加のCSSクラス」フィールドがあります。

テーブルブロックは、簡単なデータの整理や提示に非常に便利ですが、非常に複雑なテーブルやデータベースのような機能は提供していない点には注意が必要です。もっと高度なテーブルを作成する場面では、専門のプラグインを検討することもあります。

画像ブロック

画像ブロックは、WordPressのブロックエディタ(Gutenberg)で非常によく使用されるブロックの一つです。このブロックを使用すると、WordPressの投稿やページに簡単に画像を挿入できます。

主な特性:

  1. 画像のアップロード: ローカルストレージから画像をアップロードできます。
  2. メディアライブラリ: 既にWordPressにアップロードされた画像を選択できます。
  3. 外部URL: 外部URLから画像を挿入することも可能です。
  4. キャプション: 画像の下にテキストキャプションを追加できます。

使い方:

  1. 新しい画像ブロックを追加するには、エディタ内で「+」ボタンをクリックして、「画像」を選択します。
  2. 画像をアップロードするか、メディアライブラリから選ぶか、URLを指定して画像を挿入します。

高度な設定:

  • サイズ調整: 画像のサイズを調整するオプションがあります。具体的には、幅と高さをピクセル単位で調整できます。
  • テキスト整列: 画像の整列(左寄せ、中央寄せ、右寄せ)を調整できます。
  • リンク: 画像をクリックしたときに特定のURLにリダイレクトする設定もあります。
  • 追加のCSSクラス: さらにカスタマイズするために、追加のCSSクラスを指定できます。

画像ブロックは非常に直感的で使いやすく、基本的な画像の挿入から高度なカスタマイズまで対応しています。特にビジュアルに訴える内容を投稿する際には欠かせないブロックと言えるでしょう。

ギャラリーブロック

ギャラリーブロックは、複数の画像を一つのコンテナ内にまとめて表示するためのブロックです。これを使うことで、写真やイラストなどを効果的に並べられます。

主な特性:

  1. 複数画像選択: メディアライブラリから複数の画像を一度に選択して追加することができます。
  2. 並び替え: ギャラリー内の画像は、ドラッグアンドドロップで簡単に並び替えることができます。
  3. キャプション: 各画像にはキャプション(説明テキスト)を追加できます。

使い方:

  1. エディタ内で「+」ボタンをクリックし、ブロックの一覧から「ギャラリー」を選択します。
  2. メディアライブラリが開くので、追加したい画像を選択(またはアップロード)します。
  3. 「作成する」ボタンをクリックしてギャラリーを作成します。

高度な設定:

  • カラム数: 画像をいくつのカラムに分けて表示するか設定できます。
  • 画像サイズ: サムネイル、中サイズ、大サイズなど、表示する画像のサイズを選べます。
  • リンク設定: 各画像をクリックしたときの動作(メディアファイル、添付ページ、なし)を選べます。
  • 追加のCSSクラス: カスタマイズのために追加のCSSクラスを設定できます。

ギャラリーブロックは、ビジュアルな要素が重要なブログポストやウェブページで非常に有用です。特に、製品の特徴を複数の画像で見せたい場合や、イベントの写真をまとめて公開する場合などに便利です。

音声ブロック

音声ブロックは、音声ファイルをウェブページや投稿に簡単に埋め込むことができるブロックです。このブロックを使用することで、ポッドキャスト、インタビュー、バックグラウンドミュージックなどのオーディオコンテンツを効果的に公開できます。

主な特性:

  1. 簡単なアップロード: メディアライブラリから音声ファイル(MP3, WAV, OGGなど)を簡単に選択できます。
  2. プレーヤー機能: 埋め込まれた音声ファイルは、ブラウザ内蔵の音声プレーヤーで再生、一時停止、スキップなどが可能です。
  3. プレビュー: エディタ内で音声ファイルのプレビューを聞くことができます。

使い方:

  1. エディタ内で「+」ボタンをクリックして、ブロックの一覧から「音声」を選択します。
  2. メディアライブラリが開くので、アップロードしたい音声ファイルを選択またはアップロードします。
  3. 「挿入」ボタンをクリックして、音声ブロックをページに追加します。

高度な設定:

  • 自動再生: 頁が読み込まれた際に音声が自動的に再生されるかどうかを設定できます(一部のブラウザでは制限されている場合があります)。
  • ループ再生: 音声が終わった後、自動的に最初から再生するか設定できます。
  • 追加のCSSクラス: カスタマイズのために追加のCSSクラスを設定できます。

音声ブロックは、音声コンテンツを効果的に展示するための簡単かつ便利な手段です。注意点としては、自動再生の設定はユーザーエクスペリエンスに影響を与える可能性があるため、慎重に設定することが推奨されます。

カバーブロック

カバーブロックは、画像、動画、または単色の背景の上にテキストや他のブロックを重ねることができます。主にヘッダーセクションや注目すべきコンテンツを強調するために使用されます。

主な特性:

  1. 背景選択: 画像や動画、単色など、多様な背景オプションがあります。
  2. テキストオーバーレイ: 背景にテキストや他のブロックを簡単に追加できます。
  3. 配置とサイズ: テキストの位置やブロックの高さ、幅も自由に設定できます。
  4. 効果: 線形グラデーションやフィルター(例:ぼかし、明るさ)などの視覚効果を加えることができます。

使い方:

  1. エディタ内で「+」ボタンをクリックし、ブロック一覧から「カバー」を選択します。
  2. 背景として設定するメディア(画像または動画)または色を選びます。
  3. カバーブロックにテキストや他のブロック(例:ボタン、見出し等)を追加します。
  4. サイドバーの設定パネルで、さまざまなカスタマイズオプションを調整します。

高度な設定:

  • 固定背景: スクロール時に背景が固定される「パララックス効果」を選択できます。
  • 内部ブロックの追加: カバーブロック内に、例えば段落、見出し、リスト、ボタンなど、さまざまなブロックを追加できます。
  • 追加のCSSクラス: より高度なスタイリングのために、カスタムCSSクラスを追加できます。

カバーブロックは非常に多機能で、クリエイティブなページデザインを可能にします。ただし、動画背景や高度な効果を多用する場合は、ページのパフォーマンスやユーザーエクスペリエンスに影響を与える可能性があるため、注意が必要です。

ファイルブロック

ファイルブロックは、PDF、DOCX、MP3など、さまざまなタイプのファイルをページや投稿に埋め込むために使用されます。このブロックを使うことで、訪問者は特定のファイルを直接ダウンロードすることができます。

主な特性:

  1. ファイル選択: メディアライブラリからファイルを選択するか、新しいファイルをアップロードできます。
  2. ダウンロードボタン: 通常、ファイルブロックはダウンロードボタンを含みますが、このボタンは必要に応じて非表示にもできます。
  3. リンクテキスト: ファイルの名前または説明をリンクテキストとして表示できます。
  4. カスタマイズ: ブロックの設定パネルから、ファイルのリンクテキストやダウンロードボタンのテキストなどをカスタマイズできます。

使い方:

  1. エディタ内で「+」ボタンをクリックし、ブロック一覧から「ファイル」を選択します。
  2. メディアライブラリから既存のファイルを選択するか、新しいファイルをアップロードします。
  3. サイドバーの設定パネルで、ダウンロードボタンの表示/非表示やリンクテキストの編集などを行います。

注意点:

  • ファイルのサイズが大きい場合や、セキュリティに配慮が必要な場合は、適切な措置を講じることが重要です。
  • サポートされているファイルタイプは、WordPressの設定やサーバーの設定に依存する場合があります。

ファイルブロックは、マニュアル、ガイド、音声ファイル、プレゼンテーションなど、多くの異なるコンテンツを簡単に共有する方法を提供します。

メディアとテキストブロック

メディアとテキストブロックは、テキストとメディア(画像、動画など)を同じ行に配置するためのブロックです。

主な特性:

  1. サイドバイサイド配置: 一つのブロック内でテキストとメディアを横並びに表示します。
  2. メディア選択: メディアライブラリから画像や動画を選ぶことができます。
  3. テキストエリア: シンプルなテキストエディターが含まれており、リッチテキスト(太字、斜体、リンクなど)もサポートされています。
  4. フレキシブルデザイン: ブロック設定から、メディアとテキストの比率を変更したり、配置をスイッチしたりすることができます。

使い方:

  1. エディタ内で「+」ボタンをクリックし、「メディアとテキスト」ブロックを選択します。
  2. メディア部分には、画像や動画をドラッグ&ドロップまたはメディアライブラリから選びます。
  3. テキスト部分には、必要なテキストやリッチテキスト要素を追加します。
  4. サイドバーの設定パネルで、ブロックのレイアウトやデザインをカスタマイズします。

注意点:

  • レスポンシブデザインに対応していますが、多くのテキストと大きなメディアファイルを組み合わせる場合は、デスクトップとモバイルでの表示が異なる可能性があります。

メディアとテキストブロックは、教育的なコンテンツ、製品説明、チュートリアルなどに特に有用です。このブロックを使うことで、コンテンツが一目で理解でき、ユーザーエンゲージメントを高めることができます。

動画ブロック

動画ブロックは、ウェブページに動画を埋め込むために使用されます。

主な特性:

  1. 動画アップロード: コンピュータから直接動画をアップロードすることができます。
  2. 動画リンク: YouTube、Vimeoなどの外部プラットフォームから動画をリンクすることも可能です。
  3. オプション: 自動再生、ループ再生、ミュートなど、さまざまな再生オプションを設定できます。
  4. ブロック設定: 動画のサイズ、アスペクト比、位置などを調整できるオプションがあります。

使い方:

  1. エディタ内で「+」ボタンをクリックし、「動画」ブロックを選択します。
  2. ドラッグ&ドロップで動画をアップロードするか、メディアライブラリから選びます。または外部リンクを使用する場合は、URLを貼り付けます。
  3. サイドバーの設定パネルで、動画のレイアウトやオプションをカスタマイズします。

注意点:

  • ファイルサイズとフォーマットに制限がある可能性があります。一般的にはMP4形式が広くサポートされています。
  • 外部から動画をリンクする場合、そのプラットフォームの制限や設定に依存することがあります。

動画ブロックはプロモーションビデオ、チュートリアル、製品紹介など、さまざまな用途に使用できます。適切に設定とカスタマイズを行えば、訪問者に高いエンゲージメントを提供することが可能です。

ボタンブロック

ボタンブロックは、ウェブページにクリック可能なボタンを追加するために使用されます。

主な特性:

  1. リンク設定: ボタンをクリックしたときに移動するURLを設定できます。
  2. デザインカスタマイズ: ボタンの色、サイズ、形状などを自由にカスタマイズできます。
  3. テキスト: ボタンに表示するテキストも自由に編集できます。
  4. ブロック設定: ボタンにアイコンを追加したり、テキストとボタンの位置(左揃え、中央揃えなど)を調整するオプションもあります。

使い方:

  1. エディタ内で「+」ボタンをクリックし、「ボタン」ブロックを選択します。
  2. ボタンに表示するテキストと、クリック時に遷移するURLを設定します。
  3. サイドバーの設定パネルを使用して、ボタンのスタイル(色、サイズ、形状など)をカスタマイズします。

注意点:

  • モバイルやデスクトップなど、異なるデバイスでの表示を確認することが重要です。
  • カラー設定やサイズはブランドガイドラインに合わせるとよいでしょう。

ボタンブロックはコンバージョン率を高めるために非常に有用なツールです。例えば、「今すぐ購入」「詳細を見る」「お問い合わせ」などのアクションを促す用途に使用されます。適切な設定とデザインにより、訪問者のエンゲージメントを高められます。

カラムブロック

カラムブロックは、ページまたは投稿に複数のカラム(列)を簡単に追加できます。それぞれのカラム内にはテキスト、画像、ボタンなど、他の任意のブロックを配置することができます。

主な特性:

  1. 可変カラム数: 2列から6列までのカラムを作成できます。
  2. 幅調整: 各カラムの幅をパーセンテージまたはピクセルで調整できます。
  3. 垂直整列: カラム内の内容を上揃え、中央揃え、または下揃えにすることができます。
  4. カラムギャップ: カラム間のスペースを調整できます。
  5. カラム内ブロック: 各カラムには、テキストブロック、画像ブロック、リストブロックなど、さまざまなブロックを追加できます。

使い方:

  1. エディタで「+」ボタンをクリックし、「カラム」ブロックを選択します。
  2. 作成したいカラム数を選びます。
  3. 各カラムに追加したいブロック(テキスト、画像など)を配置します。
  4. 右側の設定パネルで、カラムの幅、整列、ギャップなどを調整します。

注意点:

  • モバイル表示でのレイアウトも確認してください。カラム数が多すぎると、モバイルでの表示が崩れる可能性があります。
  • カラム内に配置するコンテンツがバランスよく配置されているか確認してください。

カラムブロックは、特にランディングページやプロダクトページでよく使用されます。それぞれのカラムに特定の情報やアクション項目を配置することで、より整理されたデザインとユーザー体験を提供できます。

グループブロック

グループブロックは、複数のブロックを一つのグループとしてまとめることができる非常に便利なブロックです。このブロックを使うことで、一連のブロックに対して一括でスタイリングや背景色、スペーシングなどを適用することができます。

主な特性:

  1. 一括管理: テキスト、画像、ボタンなど、さまざまなブロックを一つのグループ内に配置できます。
  2. スタイリング: グループ全体に背景色やテキスト色、カスタムCSSクラスなどを適用できます。
  3. レイアウト: グループブロックを使用すると、内部のブロックに対して一括でマージンやパディングを調整することができます。
  4. 再利用: グループ化されたブロックは、再利用ブロックとして保存して、他のページや投稿でも使うことができます。

使い方:

  1. エディタで「+」ボタンをクリックし、「グループ」ブロックを選択します。
  2. グループブロック内に追加したいブロック(テキスト、画像、リストなど)をドラッグ&ドロップまたはクリックして追加します。
  3. グループブロックを選択した状態で、右側の設定パネルを使用して背景色、テキスト色、スペーシングなどを調整します。

注意点:

  • グループブロック内の各ブロックは、個別にもスタイリングを適用できますが、グループブロックのスタイリングが優先されます。
  • 一度グループ化されたブロックは、グループから外すことも可能です。その場合は、グループブロックを選択して「ブロックをアングループ化」オプションを使用します。

グループブロックは、コンテンツのセクションを整理したり、特定のスタイリングを一括適用したい場合に非常に便利です。特に大規模なページや複雑なレイアウトを持つサイトでの利用価値が高いです。

続きブロック

“続きブロック”(More Block)は、WordPressのブロックエディター(Gutenberg)で用意されている特殊なブロックの一つです。このブロックは、記事やページの特定の部分で「続きを読む」または「Read More」などのテキストを挿入することができます。通常、ブログの一覧ページなどで記事の一部だけを表示し、その後に「続きを読む」のリンクを置く場合に使用されます。

主な特性:

  1. カスタマイズ可能なテキスト: “続きを読む” といったテキストは、任意のテキストに変更できます。
  2. プレビュー制御: このブロックを挿入した部分までが、記事のプレビューとして表示されます。

使い方:

  1. エディタで記事またはページの内容を入力します。
  2. 「続きを読む」を挿入したい位置にカーソルを置きます。
  3. エディタの「+」ボタンをクリックして、「続き」または「More」ブロックを選択します。
  4. 必要に応じて、ブロックの設定で表示テキストを変更できます。

これにより、訪問者は「続きを読む」リンクをクリックすることで、記事やページの完全な内容を表示できるようになります。これは特にブログの記事一覧などで有用であり、長い記事をスキャンしやすくするためによく使用されます。

アーカイブブロック

“アーカイブブロック”は、過去の投稿をリスト形式またはドロップダウン形式で表示するためのブロックです。このブロックは、特にブログやニュースサイトで役立ち、訪問者が過去の記事を簡単に探すことができるようにします。

主な特性:

  1. 表示形式: リスト形式またはドロップダウン形式を選べます。
  2. 月別・年別: アーカイブを月別または年別で表示できます。
  3. ポストタイプ: どのようなタイプの投稿を表示するか選べます(例:記事、ページ、カスタムポストタイプなど)。
  4. ソートオプション: 昇順または降順で表示できます。

使い方:

  1. ブロックエディタで新しいブロックを追加するために、「+」ボタンをクリックします。
  2. 検索ボックスに「アーカイブ」と入力し、アーカイブブロックを選択します。
  3. ブロックが挿入されたら、右側の設定パネルで表示オプションをカスタマイズします。

これで、選択した条件に基づいて過去の投稿が表示されるようになります。これは特に、長い期間にわたって多くのコンテンツがあるサイトで便利です。訪問者は過去の記事や情報を容易に探し出すことができます。

ページ区切りブロック

“ページ区切りブロック”(Page Break Block)は、特に長い記事やページに対してページネーション(複数のページに分割)を追加する目的で設計されています。ページ区切りブロックを挿入すると、その位置でコンテンツが次のページに分かれ、ウェブサイトのフロントエンドでは「次へ」や「前へ」といったリンクが自動的に生成されます。

主な特性:

  1. シンプルな操作: ブロックを追加するだけで、自動的にページが分割されます。
  2. ユーザーエクスペリエンス向上: 長い記事を分割することで、読者にとって読みやすくなります。
  3. SEO対策: 長いコンテンツを分割することで、検索エンジンによる評価が高まる可能性があります。

使い方:

  1. ブロックエディタで新しいブロックを追加するために、「+」ボタンをクリックします。
  2. 検索ボックスに「ページ区切り」や「Page Break」と入力し、ページ区切りブロックを選択します。
  3. ブロックをコンテンツの特定の位置に挿入します。

これで、挿入した位置でページが分割され、ページネーションが適用されます。この機能は、特に読者に段階的に情報を提供したい場合や、長い記事を読みやすくしたい場合に有用です。

区切りブロック

“区切りブロック”(Separator Block)は、コンテンツ内でセクションや要素を明確に分けるために使用されます。通常は水平線や空白、あるいは他の視覚的な区切りとして機能します。

主な特性:

  1. ビジュアルの強調: コンテンツ内で明確な区切りを作ることで、読者にとって見やすく、理解しやすいレイアウトを提供します。
  2. カスタマイズ可能: スタイルや太さ、色など、多くの場合でビジュアルの要素をカスタマイズできます。
  3. 単純で使いやすい: 高度な設定やコーディングは不要で、ブロックを挿入するだけで簡単に利用できます。

使い方:

  1. ブロックエディタで新しいブロックを追加するために、「+」ボタンをクリックします。
  2. 検索ボックスに「区切り」や「Separator」と入力し、区切りブロックを選択します。
  3. ブロックをコンテンツの特定の位置に挿入します。
  4. 必要に応じて、ブロックの設定パネルからスタイルや太さをカスタマイズします。

区切りブロックは、他のブロックと連携して効果的に使用できます。たとえば、テキストブロックと画像ブロックの間に挿入することで、コンテンツがより整理され、視覚的に魅力的に見えるようにすることができます。

スペーサーブロック

“スペーサーブロック”(Spacer Block)は、コンテンツの間に垂直方向の空間(マージン)を作成するためのブロックです。このブロックを使用すると、コンテンツの要素(テキスト、画像、動画など)の間に適切な間隔を取ることができます。これにより、視覚的な隙間が生まれ、より読みやすく、見やすいページレイアウトを作成することができます。

主な特性:

  1. 調整可能な高さ: スペーサーブロックの高さは、ドラッグアンドドロップまたは数値の入力によって簡単に調整できます。
  2. 簡単な操作: 特別な技術的スキルは不要で、ブロックエディター内で直感的に操作できます。
  3. レスポンシブ: モバイルビューでも適切な間隔が確保されます(ただし、テーマや追加のCSSによっては異なる場合があります)。

使い方:

  1. ブロックエディタで新しいブロックを追加するために、「+」ボタンをクリックします。
  2. 検索ボックスに「スペーサー」や「Spacer」と入力し、スペーサーブロックを選択します。
  3. ブロックをコンテンツの特定の位置に挿入します。
  4. スペーサーブロックを選択した状態で、高さを調整するためにドラッグするか、右側の設定パネルで高さを数値で設定します。

スペーサーブロックは主にデザインとレイアウトに影響を与えるブロックなので、コンテンツが煩雑に見える場合や、特定の要素間に明確な区切りをつけたい場合に有用です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次