Gutenbergの各ブロックの使い道

Gutenbergのブロックは数が多いので、慣れるまではブロック選びに迷うかもしれません。

設定できる内容や項目はブロックごとに異なるので、各ブロックの使い道や詳しい設定方法について見ていきましょう。

「一般ブロック」のGutenbergブロックの使い道

Gutenbergのブロックカテゴリー「一般ブロック」は、以下の11種類の専用ブロックがあります。

  • Classic paragraph
  • 見出し
  • 段落
  • 画像
  • カバー
  • リスト
  • ギャラリー
  • 引用
  • 音声
  • ファイル
  • 動画

では、各専用ブロックについて、詳しく見ていきましょう。

※各ブロック内に埋め込んでいる動画は、女性の声の方が聞いていて癒されるので説明をお願いしました。

Classic paragraph

「Classic paragraph」は、旧エディターのようにある程度の装飾が行えるブロックです。

そのため、Gutenbergの使い方に慣れていない旧エディター派な方は、「Classic paragraph」ブロックだけでライティングが行えます。

ただ、「Classic paragraph」というブロックは、旧エディターの装飾追加として使用されている方の多いプラグイン「TinyMCE Advanced」のブロックです。

デフォルトでは「クラシックブロック」があり、同様の機能となっています。

「Classic paragraph」の使い道

Classic paragraphを使うと、このように使用したブロックが1つだけでも記事を作ることができます。

旧エディターで入力出来ていた見出し・表・リスト・テーブル・リンクなどを使用することができるので、ブロックの選択が手間に感じる時はClassic paragraphが使いやすいかもしれません。

「Classic paragraph」の使い方

Classic paragraphのブロックは、ブロックの追加にある「一般ブロック」の中にあります。

そして、ブロックを追加したあとは、文章を打つだけです。

Classic paragraphの装飾は、画面上部に表示されている項目を使用するだけなので簡単です。

このように、簡単な装飾が行えます。

ちなみにですが、Classic paragraphの装飾はこちらの種類があります。

  • 見出し(H1~H6)
  • 太字
  • イタリック
  • 引用
  • 番号なしリスト
  • 番号付きリスト
  • 左寄せ・中央揃え・右寄せ
  • リンク
  • テキスト色
  • テキスト背景色
  • テーブル
  • メディア

この他にも「ファイル」や「編集」などのメニューを開くと、改ページや「続きを読む」タグの挿入などが行えます。

見出し

「見出し」は、H1~H6までの見出しを挿入できるブロックです。

「見出し」の使い道

見出しを挿入したいときに「見出し」ブロックを挿入しましょう。

編集画面で見出しが分かりやすくなり、ライティング中にページ内リンクを作成したくなった時もスムーズな作業となります。

「見出し」の使い方

見出しのブロックは、ブロックの追加にある「一般ブロック」の中にあります。

ブロックを追加し、入力欄に任意のタイトルを入れましょう。

見出しブロックは、ブロック上部と画面左のブロック設定でカスタマイズが行えます。


ブロック上部の設定

  • 見出し2・見出し3・見出し4
  • 太字
  • イタリック
  • リンク
  • インラインイメージ
  • アンダーライン
  • 蛍光ペン

画面左のブロック設定

  • 見出し1・見出し2・見出し3・見出し4・見出し5・見出し6
  • テキストの配置(左寄せ・中央揃え・右寄せ)
  • superscript(文字を上に)
  • subscript(文字を下に)
  • strikehrough(文字を線で消す)
  • ソースコード
  • マーカー
  • clear formation(形成)
  • テキスト色
  • テキスト背景色
  • HTMLアンカー
  • 追加CSS

こちらの方が設定項目が多く表示されるので、より細かな設定を行うときはブロック設定も利用しながら、好みのカスタマイズを行いましょう。

オススメな使い方

ページ内リンクを作成するときは、リンク元とリンク先に以下の設定が必要となります。

リンク元 リンク先

 


URL入力部分に、「#アンカー名」と入力する

 


アンカーIDを指定する

例えば、アンカーに「midashi」と付けた場合は、リンクのURLに「#midashi1」を設定しましょう。

このように、ページ内リンクを作るときは、飛ぶ先にアンカー名を付ける必要があります。

Gutenbergの見出しのブロック設定は「HTMLアンカー」の入力欄があるので、見出しにつけたアンカー名をリンク元に「#アンカー名」として入力するだけで大丈夫です。

段落

「段落」は、一行ごとの文章を入力できるGutenbergの基本のブロックです。

「段落」の使い道

段落ブロックは基本ブロックなので、文章を打つときに使います。

一行単位でブロックが分かれるようになっていて、改行すると新たな段落ブロックが出現します。

そのため、面倒なブロックの追加を何度も行う必要はありません。

「段落」の使い方

段落のブロックは、「一般ブロック」の中にあります。

また、他のブロックを使用している時にENTERキーで改行をすると、出現することがあります。

段落は文章を打つブロックなので、スラスラとライティングを行いましょう。

ブロックの装飾は、以下の種類があります。


ブロック上部の設定

  • 左寄せ・中央揃え・右寄せ
  • 太字
  • イタリック
  • リンク
  • インラインイメージ
  • アンダーライン
  • 均等割付
  • 蛍光ペン

画面左のブロック設定

  • 文字サイズ(小・標準・中・大・特大・カスタム)
  • ドロップキャップ
  • superscript(文字を上に)
  • subscript(文字を下に)
  • strikehrough(文字を線で消す)
  • ソースコード
  • マーカー
  • clear formation(形成)
  • テキスト色
  • テキスト背景色
  • 追加CSS

このように、好みの項目を選択するだけで、印象的な文章を作り上げることができます。

画像

「画像」は、メディアを追加できるブロックです。

「画像」の使い道

1枚の画像を追加する時に使用するブロックなので、メディアを表示する際に使うことの多いブロックです。

追加したブロックは任意の画像とキャプションを入力できるので、写真などを表示したい時に利用しましょう。

「画像」の使い方

画像のブロックは、「一般ブロック」の中にあります。

ブロックを追加し、表示したい画像を選びましょう。

画像ブロックの装飾は以下の種類があります。


ブロック上部の設定

  • 画像の配置(左寄せ・中央揃え・右寄せ・幅広・全幅)

画面左のブロック設定

  • Altテキスト(代替テキスト)
  • 画像サイズ
  • リンク設定
  • 追加CSS

このように、画像の細かな設定を行うことができます。

リスト

「リスト」のブロックは、番号なしリストや番号付きリストを追加できるブロックです。

リストの使い道

リストは箇条書きしたい項目や、番号順に説明したい内容を入力する際に使用するブロックです。

ulタグやolタグで形成されるブロックなので、CSSの編集や追加CSSでカスタマイズすることが可能です。

リスト使い方

一般ブロックの中にある「リスト」を選択すると、専用ブロックを追加できます。

テキストを入力しながら改行し、次の項目を入力しましょう。

リストブロックの装飾は、次の通りとなります。


ブロック上部の設定

  • 箇条書きリストに変換
  • 順序付きリストに変換
  • リスト項目のインデントを戻す
  • リスト項目をインデント
  • 太字
  • イタリック
  • リンクインラインイメージ
  • アンダーライン
  • 蛍光ペン

画面左のブロック設定

  • Superscript
  • Subscript
  • Strilethrough
  • ソースコード
  • マーク
  • Clear fomating
  • 文字色
  • 文字背景色
  • 追加CSS

このように、簡単なカスタマイズはブロック設定で決めることができます。

こだわった装飾を行いたい時は、追加CSSを活用しましょう。

カバー

「カバー」は、背景に設定した画像の上にテキストを表示できるブロックです。

「カバー」の使い道

画像の上にフィルターをかけられるので、画像上に表示されている文字を読みやすくすることができます。

そのため、インパクトのあるキャッチフレーズや、目立たせたい項目を表示することに適したブロックです。

「カバー」の使い方

カバーのブロックは、一般ブロックの中にあります。

追加して任意の画像を選び、段落などのブロックを追加しながら画像上に表示されるコンテンツを作成しましょう。

カバーのブロックの装飾はこちらになります。


ブロック上部の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅

画面右のブロック設定

  • 固定背景
  • 焦点
  • オーバーレイの色
  • 背景の透過率
  • 追加CSS

このように、背景画像の色や焦点、画像の位置などのカスタマイズが行えます。

また画像上に表示されるエリアは、それぞれ追加したブロックの設定を行うことが可能です。

ギャラリー

ギャラリーは、リッチギャラリーに複数の画像を表示できるブロックです。

「ギャラリー」の使い道

複数の画像をリッチギャラリーに表示できるので、複数枚の画像を貼りたい時に活用できるブロックです。

表示させたい画像を選択し、ギャラリーを作りましょう。

「ギャラリー」の使い方

ギャラリーのブロックは、一般ブロックから追加できます。

ブロック追加後は、ギャラリーに表示したい画像を選びましょう。

ギャラリーの装飾は、以下の項目があります。


ブロック上部の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅

画面右のブロック設定

  • カラム数
  • 画像の切り抜き
  • リンク先
  • 追加CSS

このように、一行に表示する画像の数や整列カスタマイズを行うことができます。

そのため、複数の画像を並べて表示したい時は、ギャラリーブロックを活用しましょう。

引用

引用ブロックは、引用テキストを視覚的に強調できるブロックです。

「引用」の使い道

他者のテキストやコンテンツを引用する際に、引用ブロックを使用しましょう。

引用をアピールすることができ、URLの表示も簡単にカスタマイズすることができます。

「引用」の使い方

引用ブロックは、一般ブロックの中にあります。

ブロックを追加して上部に引用テキストを、下部に引用元のURLを入力しましょう。

また、引用ブロックのカスタマイズは、下記の通りとなります。


ブロック上部の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 太字
  • イタリック
  • リンク
  • インラインイメージ
  • アンダーライン
  • 蛍光ペン

画面右のブロック設定

  • スタイル
  • Superscript
  • Subscript
  • Strikethrough
  • ソースコード
  • マークClear fomating
  • 文字色
  • 文字背景色
  • 追加CSS

このように、引用テキストの文字装飾やスタイルの変更を行うことができます。

音声

音声ブロックは、音声プレイヤーを追加できるブロックです。

「音声」の使い道

メディアにある音声や音源のURLを貼ると、音声プレーヤーを追加することができます。

キャプションの入力や、自動再生などの設定も行えるので、利便性を高めましょう。

「音声」の使い方

音声のブロックは、一般ブロックの中にあります。

ブロックを追加してメディアにある音声や、音声のURLを貼り付けて音声プレーヤーを表示しましょう、

音声ブロックの設定は、次の通りとなります。


ブロック上部の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅

画面右のブロック設定

  • 自動再生
  • 繰り返し再生
  • 先読み
  • 追加CSS

このようなカスタマイズが行えます。

また、追加CSSを入力すると、プレーヤーの表示カスタマイズも行えます。

ファイル

ファイルは、ダウンロードするリンクを作れるブロックです。

「ファイル」の使い道

ダウンロードできるようにするリンクを追加したい時は、「ファイル」ブロックを活用しましょう。

任意のファイルやメディアに保存しているデータをダウンロードコンテンツとして表示することができます。

「ファイル」の使い方

ファイルのブロックは、一般コンテンツの中にあります。

ブロックを追加し、ダウンロードできるようにする任意のファイルを選択しましょう。

ファイルブロックのカスタマイズ設定は、こちらになります。


ブロック上部の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅

画面右のブロック設定

  • リンク先
  • ダウンロードボタンの表示
  • 追加
  • CSS

このように、ダウンロードコンテンツを作成することが可能です。

動画

動画のブロックは、メディアライブラリの動画や動画URLを埋め込むことが出来ます。

「動画」の使い道

ページ内に動画を埋め込めるブロックなので、メディアライブラリに保存した動画や動画のURLを張り付けましょう。

すると、ページ内でそのまま動画を再生できるようになります。

「動画」の使い方

動画のブロックは、一般ブロックの中にあります。

ブロックを追加し、任意の動画を選択しましょう。

また、動画ブロックのカスタマイズは、以下の通りです。


ブロック上部の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅

画面右のブロック設定

  • 自動再生
  • 繰り返し再生
  • ミュート
  • プレイバックコントロール
  • 先読み
  • ポスター画像
  • 追加CSS

このように、動画の再生方法やポスター画像の設定などが行えます。

「フォーマット」のGutenbergブロックの使い道

Gutenbergのブロックカテゴリー「フォーマット」は、以下の7種類の専用ブロックがあります。

  • テーブル
  • クラシック
  • カスタムHTML
  • ソースコード
  • 整形済み
  • プルクオート

では、各専用ブロックについて、詳しく見ていきましょう。

テーブル

テーブルは、表を挿入できるブロックです。

チャートやデータを表示する際に、使いやすいです。

「テーブル」の使い道

好みの行数と列数で作れる表なので、一覧などを作成する際に重宝するブロックです。

横幅を固定した作りにできるので、表示する際のページのデザイン崩れも防げます。

「テーブル」の使い方

テーブルは、ブロックのカテゴリー「フォーマット」の中にあります。

ブロックを追加し、好みの列数や行数を指定しましょう。

テーブルのブロックで設定できる項目は、次の通りとなります。


ブロック上の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ
  • 幅広
  • 全幅
  • 上に行を追加
  • 下に行を追加
  • 行の削除
  • 左に列を追加
  • 右に列を追加
  • 列の削除

画面右のブロック設定

  • スタイル(デフォルト・ストライプ)
  • 固定幅のテーブルセル
  • 背景色
  • 追加CSSクラス

このように、作成したテーブルは、後から列や行の増減をすることも可能です。

クラシック

クラシックのブロックは、旧エディタのように使える入力枠です。

一般ブロックの「Classic Paragraph」と同様の仕様となっており、クラシックがwordpressの初期状態からあるブロックです。

「クラシック」の使い道

旧エディタのように、1つのブロックにズラズラと入力したい時はクラシックを使用します。

ブロックの選択が面倒に感じる時や、細かなカスタマイズが不要な時は、クラシックを活用しましょう。

「クラシック」の使い方

クラシックのブロックは、カテゴリー「フォーマット」の中にあります。

ブロックを追加し、任意のテキストを入力しましょう。

また、クラシックでの入力時は以、下の装飾機能を使用できます。


ブロック上部の設定

  • 段落(見出し1~6)
  • 太字
  • イタリック
  • 引用
  • 番号なしリスト
  • 番号付きリスト
  • 左寄せ
  • 中央揃え
  • 右寄せ
  • リンク
  • テキスト色
  • テキスト背景色
  • テーブル
  • メディアの追加
  • Insert Pretty Link
  • 改行なしスペース
  • アンカー
  • 横ライン
  • 「続きを読む」タグを挿入
  • 改ページ
  • 下線
  • 打ち消し
  • 上付き
  • 下付き
  • ソースコード

画面右のブロック設定

項目なし


このように、クラシックのブロック1つを使うだけでも、文章を作成することが可能です。

また、ブロック右上の3つの点を押して詳細設定を開き、ブロックへ変換を押すと該当ブロックごとに分けることができます。

 

変換前

変換後

そのため、クラシックブロックでざっくりと文章を作成を行い、ブロックに変換後に細かなカスタマイズを行うことがおすすめです。

カスタムHTML

カスタムHTMLは、直接HTMLコードを入力して記事内に反映させられるブロックです。

「カスタムHTML」の使い道

カスタムHTMLは、ブロックや追加CSSでカスタマイズしきれない要素がある時に、直接HTMLを入力出来るブロックです。

また、ブロック内にプレビュー機能が備わっているため、編集画面で完成イメージを確認することが可能です。

「カスタムHTML」の使い方

まず、ブロック追加のカテゴリー「フォーマット」の中にある、「カスタムHTML」を追加しましょう。

カスタムHTMLブロックの基本的な使い方は、入力欄にHTMLコードを入力するだけです。

また、編集画面では以下の操作が可能です。


ブロック上部の設定

  • HTMLコードの入力
  • プレビュー

画面右のブロック設定

項目なし


このように、直接HTMLコードを入力できるので、細かなカスタマイズもコードで入力することができます。

HTML

プレビュー

編集画面内でプレビューも確認できるので、手軽にコードの入力が行えます。

ソースコード

ソースコードは、記事内にHTMLなどのコードをそのまま表示する時に使用するブロックです。

「ソースコード」の使い道

余白やタグを考慮したコードスニペットを表示できるブロックなので、入力したコードをそのまま記事に表示することができます。

そのため、HTMLコードやCSSコードなどを変換せずに、そのまま文字列として表示したい時に使用しましょう。

「ソースコード」の使い方

ソースコードは、ブロック追加のカテゴリー「フォーマット」にあります。

ブロックを追加し、記事内に文字列で表示させたいソースコードを入力しましょう。


ブロック上部の設定

表示設定なし


画面右のブロック設定

  • 追加CSS

このように、特別なカスタマイズをしなくても、ソースコードを表示することができます。

ちなみにですが、デフォルトの状態のままコードを入力し、投稿記事を確認すると以下のように表示されます。

編集画面

記事画面

投稿後も文字列が変換されることなく、そのまま表示できていますね。

整形済み

整形済みブロックは、スペースやタブを含むテキストをスタイリングして表示出来るブロックです。

「整形済み」の使い道

整形済みブロックは<pre>タグで囲まれるブロックなので、入力した文字をそのまま表示することができます。

通常のHTMLであれば、連続する半角空白文字などは1つにまとめる処理などが行われますが、<pre>タグの場合はそのままの文字列で表示することができます。

そのため、AA(アスキーアート)やデザイン上の都合で複数の改行を行いたい時は、整形済みブロックを活用することがオススメです。

整形済みの場合

通常ブロックの場合

上記画像を比較すると、整形済みテキストと通常テキストでは、連続する文字の表示が異なることがわかります。

「整形済み」の使い方

整形済みブロックは、ブロックの追加の「フォーマット」内にあります。

ブロックを追加し、そのまま表示したいバランスでテキストを入力しましょう。


ブロック上部の設定

  • 太字
  • イタリック
  • リンク
  • インラインイメージ
  • アンダーライン
  • 蛍光ペン

画面右の設定

  • Superscript
  • Subscript
  • Strikethrough
  • ソースコード
  • マーク
  • Clear formatting
  • テキスト色
  • テキスト背景色
  • 追加CSSクラス

このように、整形済みテキストも段落ブロック同様のカスタマイズが行えるので、好みの設定を行いましょう。

プルクオート

プルクオートは、引用テキストに特別な視覚的強調を加えられるブロックです。

「プルクオート」の使い道

通常の引用ブロックよりも強調したい内容は、プルクオートを使用しましょう。

グレー背景の引用ブロックに比べて、印象的な表示ができます。

「プルクオート」の使い方

プルクオートは、ブロック追加のフォーマット内にあります。

ブロックを追加し、引用テキストと引用元のURLを入力しましょう。

また、プルクオートのカスタマイズ設定は、以下の項目があります。


ブロック上部の設定

  • 左寄せ
  • 右寄せ
  • 幅広
  • 全幅
  • 太字
  • イタリック
  • リンク
  • インラインイメージ
  • アンダーライン
  • 蛍光ペン

画面右のブロック設定

  • スタイル(デフォルト・無地)
  • メインカラー
  • 文字色
  • Superscript
  • Subscript
  • Strikethrough
  • ソースコード
  • マーク
  • Clear formatting
  • テキストカラー
  • 背景色
  • 追加CSSクラス

このように、モノトーン表示だけでなく、カラーなデザインにもカスタマイズ可能です。

また、無地の設定もあるので、普段と違った印象の引用を作りたいときに活用しましょう。

詩のブロックは、特別な余白形式を使用したい時などに活用出来るブロックです。

「詩」の使い道

詩のブロックは、整形済みと同様に<pre>タグで囲まれているブロックです。

カスタマイズの方法も同様なので、一部ユーザーからは「ネタとして作られたのでは?」と言われているブロックです。

説明には「歌詞の引用など~」と記載されているので、整形済みブロックで使用頻度の多い特別な表示のカスタマイズ用かもしれません。

ちなみに、詩のブロックはclass「wp-block-verse」に指定されているので、こちらのcssをカスタマイズしておけば追加CSSを毎回入力する手間が省けますね。

「詩」の使い方

詩は、ブロック追加のカテゴリー「フォーマット」にあるブロックです。

ブロックを追加し、表示させたい内容を入力しましょう。

また、詩のブロックで行えるカスタマイズ設定は以下のとおりです。


ブロック上部の設定

  • 太字
  • イタリック
  • リンク
  • インラインイメージ
  • アンダーライン
  • 蛍光ペン

画面右のブロック設定

  • Superscript
  • Subscript
  • Strilethrough
  • ソースコード
  • マーク
  • Clear formatting
  • 文字色
  • 文字背景色
  • 追加CSSクラス

「レイアウト要素」のGutenbergブロックの使い道

Gutenbergのブロックカテゴリー「レイアウト要素」は、以下の7種類の専用ブロックがあります。

  • 区切り
  • カラム
  • ボタン
  • メディアと文章
  • 続きを読む
  • 改ページ
  • スペーサー

では、各専用ブロックについて、詳しく見ていきましょう。

区切り

区切りブロックは、アイデアやセクションの間に水平な線を追加出来るブロックです。

「区切り」の使い道

テキストやコンテンツを作成している時に、「見出しは必要ないけど、改行だけでは見づらい」と思ったことはありませんか?

そのようなページ内に区切りを付けたい時に、役立つブロックが「区切り」です。

区切りブロックを追加すると横長な線を追加できるので、仕切りの役割として利用することができます。

「区切り」の使い方

区切りは、ブロック追加の「レイアウト要素」の中にあります。

ブロックを追加すると水平な線が追加され、以下の項目のカスタマイズが設定できます。


ブロック上部の設定

項目なし


画面右のブロック設定

  • スタイル
    • デフォルト
    • 幅広線
    • ドット
  • 追加CSSクラス

このように、短い線や幅広線、ドット状の線を追加することができます。

改行だけではわかりにくい内容の場合は、区切りブロックを活用しましょう。

カラム

カラムは、複数のカラム表示に出来るブロックです。

「カラム」の使い道

テーブルのように横に並べてコンテンツを表示したい時は、カラムブロックを使用すると列を増やすことができます。

最大6カラムまで増やすことができるので、画像やテキストを並べて表示したい時に使用しましょう。

「カラム」の使い方

カラムは、ブロック追加の「レイアウト要素」の中にあります。

ブロックを追加し、好みのカラム数に設定しましょう。

カラムブロックの中をクリックすると、それぞれのカラム内に新たなブロックを追加することができます。

では、カラムのブロック設定について見ていきましょう。


ブロック上部の設定

  • 幅広
  • 全幅

画面右のブロック設定

  • カラム数
  • 追加CSSクラス

このように、カラムブロック自体の設定は、カラム全体のカスタマイズとなっています。

カラム内に追加したブロックは、各ブロックの設定を行うことが出来るので、好みのカスタマイズを行いましょう。

ボタン

ボタンは、訪問者にリンクをアピールしやすくなる装飾が行えるブロックです。

ボタンの使い道

ボタンのブロックは、URLやテキストリンクだけでは物足りないリンクの作成に使用できます。

任意のテキストとリンク先を指定できるので、アピールしたいリンクに使用しましょう。

一目でわかるリンクボタンを作ることで、訪問者に行動を伝えやすくすることが出来ます。

ボタンの使い方

ボタンのブロックは、新規追加の「レイアウト要素」の中にあります。

ブロックを追加して、任意のテキストとURLを入力しましょう。

そして、ボタンブロックの装飾は、以下の種類があります。


ブロック上部の設定

  • 左寄せ
  • 中央揃え
  • 右寄せ

画面右のブロック設定

  • スタイル
    • デフォルト
    • アウトライン
  • 背景色
  • 文字色
  • 追加CSSクラス

このように、ボタンのデザインや色を変更することが出来ます。

ブログの雰囲気やリンク先の内容にあったカスタマイズをして、リンクをアピールしましょう。

メディアと文章

メディアと文章は、画像と文章を横並びのリッチなレイアウトにできるブロックです。

メディアと文章の使い道

画像と文章を別々のブロックで入力すると、改行された状態で表示されるので、コンパクトに表示したいと思うかもしれません。

メディアと文章は、2カラムの状態で画像の横に文章を入力できるので、横並びにしたい時に活用しましょう。

また、文章の部分には、見出しやリスト、ボタンなどのブロックを追加することが出来ます。

メディアと文章の使い方

メディアと文章は、ブロック新規追加の「レイアウト要素」の中にあります。

ブロックを追加して、任意の画像と文章部分のブロックのカスタマイズを行いましょう。

メディアと文章のブロックのカスタマイズできる項目は、こちらになります。


ブロック上部の設定

  • 幅広
  • 全幅
  • メディアを左に表示
  • メディアを右に表示

画面右のブロック設定

  • モバイルで重ねる
  • 背景色
  • 追加CSSクラス

このようなカスタマイズが行えるので、好みの設定を行いましょう。

「モバイルで重ねる」で、モバイルとPCでの表示方法を変えられるのも面白いですね。

続きを読む

続きを読むは、アーカイブページに抜粋として表示する部分の区切り用ブロックです。

続きを読むの使い道

文章を作成していると、「続きの文章が見えてしまうと面白みが半減する」と思うことがあるかもしれません。

例えば、クイズの下にすぐ答えが見えてしまうと、考える前に答えを見てしまいそうですよね。

そのような時は、続きを読むブロックを追加すると、ブロックの前に記載したクイズの内容だけが抜粋として表示されます。

続きを読むの使い方

続きを読むは、ブロック新規追加の「レイアウト要素」の中にあります。

抜粋として表示したい文章の入力を終えたら、「続きを読む」を挿入しましょう。

では、続きを読むブロックのカスタマイズについてみていきましょう。


ブロック上部の設定

  • なし

画面右のブロック設定

  • コンテンツ全文ページで抜粋を非表示

このように、続きを読むブロックを利用することで、コンテンツの表示パターンに変化を付けることが出来ます。