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までの見出しを挿入できるブロックです。

「見出し」の使い道

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

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

「見出し」の使い方

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

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

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

---

---

---

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

オススメな使い方

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

リンク元	リンク先
URL入力部分に、「#アンカー名」と入力する	アンカーIDを指定する

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

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

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

段落

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

「段落」の使い道

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

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

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

「段落」の使い方

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

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

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

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

---

---

---

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

画像

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

「画像」の使い道

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

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

「画像」の使い方

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

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

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

---

---

---

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

リスト

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

リストの使い道

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

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

リスト使い方

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

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

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

---

---

---

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

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

カバー

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

「カバー」の使い道

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

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

「カバー」の使い方

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

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

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

---

---

---

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

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

ギャラリー

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

「ギャラリー」の使い道

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

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

「ギャラリー」の使い方

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

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

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

---

---

---

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

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

引用

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

「引用」の使い道

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

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

「引用」の使い方

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

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

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

---

---

---

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

音声

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

「音声」の使い道

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

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

「音声」の使い方

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

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

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

---

---

---

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

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

ファイル

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

「ファイル」の使い道

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

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

「ファイル」の使い方

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

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

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

---

---

---

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

動画

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

「動画」の使い道

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

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

「動画」の使い方

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

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

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

---

---

---

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

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

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

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

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

テーブル

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

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

「テーブル」の使い道

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

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

「テーブル」の使い方

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

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

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

---

---

---

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

クラシック

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

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

「クラシック」の使い道

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

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

「クラシック」の使い方

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

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

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

---

---

---

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

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

 

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

カスタムHTML

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

「カスタムHTML」の使い道

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

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

「カスタムHTML」の使い方

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

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

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

---

---

---

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

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

ソースコード

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

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

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

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

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

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

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

---

---

---

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

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

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

整形済み

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

「整形済み」の使い道

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

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

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

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

「整形済み」の使い方

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

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

---

---

---

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

プルクオート

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

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

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

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

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

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

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

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

---

---

---

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

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

詩

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

「詩」の使い道

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

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

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

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

「詩」の使い方

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

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

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

---

---

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

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

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

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

区切り

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

「区切り」の使い道

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

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

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

「区切り」の使い方

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

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

---

---

---

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

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

カラム

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

「カラム」の使い道

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

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

「カラム」の使い方

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

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

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

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

---

---

---

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

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

ボタン

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

ボタンの使い道

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

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

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

ボタンの使い方

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

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

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

---

---

---

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

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

メディアと文章

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

メディアと文章の使い道

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

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

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

メディアと文章の使い方

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

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

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

---

---

---

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

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

続きを読む

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

続きを読むの使い道

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

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

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

続きを読むの使い方

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

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

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

---

---

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

改ページ

改ページは、コンテンツを複数のページに分けて表示できる区切りのブロックです。

改ページの使い道

記事を書いていると、「文章が長すぎるからページを分けて表示したい」と思うことがあるかもしれません。

そのような時に、改ページのブロックを入れると、1ページ目・2ページ目…のように1記事を分割することができます。

ですので、長すぎて読みにくい文章や、ページが重くなってしまうときは改ページを活用することがオススメです。

改ページの使い方

改ページは、ブロック新規追加の「レイアウト要素」の中にあります。

適当な位置に改ページのブロックをいれると、前後のコンテンツのブロックを分けることができます。

そのため、ページを分けたい位置に改ページのブロックを追加しましょう。

では、改ページブロックのカスタマイズについて見ていきましょう。

---

---

---

このように、改ページのブロックは、特別な設定が用意されていないので、コンテンツを分けたい部分に挿入するだけで利用できます。

スペーサー

スペーサーは、コンテンツ内に指定した高さの余白を入れるブロックです。

スペーサーの使い道

スペーサーのブロックは、追加した位置に任意の高さの余白を表示できます。

そのため、文章の区切りとして余白を追加したい時や、コンテンツの見た目を整える目的で使用できます。

スペーサーの使い方

スペーサーは、ブロック新規追加の「レイアウト要素」の中にあります。

余白を入れたい部分にブロックを追加し、空白にしたい高さを指定しましょう。

スペーサーのカスタマイズ設定はこちらになります。

---

---

---

このように、好みの高さの余白を指定して、コンテンツの表示をカスタマイズしましょう。

「ウィジェット」のGutenbergブロックの使い道

Gutenbergのブロックカテゴリー「ウィジェット」は、以下の9種類の専用ブロックがあります。

カテゴリー 最新の記事 ショートコード アーカイブ カレンダー 最新のコメント RSS 検索 タグクラウド

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

カテゴリー

カテゴリーは、カテゴリーの一覧を追加出来るブロックです。

カテゴリーの使い道

コンテンツ内やフロントページにカテゴリー一覧を表示したいときは、カテゴリーブロックを追加しましょう。

カテゴリー一覧を表示することができ、ドロップダウン表示などのカスタマイズも行えます。

カテゴリーの使い方

カテゴリーは、ブロック新規追加の「ウィジェット」の中にあります。

一覧を表示させたい位置に、ブロックを追加しましょう。

では、カテゴリーのブロック設定について見ていきましょう。

---

---

---

このように、追加CSSを入力することで、より高度なカスタマイズ表示にすることもできます。

最新の記事

最新の記事は、最新の投稿の一覧を追加出来るブロックです。

最新の記事の使い道

コンテンツ内やフロンページなどに、最新の投稿を表示させたい時は、最新記事のブロックを追加しましょう。

最新の記事は表示数や並び順、指定カテゴリーのみの表示なども行えます。

最新の記事の使い方

最新の記事は、ブロック新規追加の「ウィジェット」の中にあります。

ブロックを追加し、好みの表示設定にカスタマイズを行いましょう。

では、最新の記事のブロック設定について見ていきましょう。

---

---

---

このように、リスト表示やグリットビューの変更も行えるので、サイトにあったカスタマイズを行いましょう。

ショートコード

ショートコードは、ワードプレスのショートコードで追加のカスタム要素を挿入出来るブロックです。

ショートコードの使い道

ワードプレスのショートコードを挿入したいときに使用するブロックが、ショートコードブロックです。

カスタム要素などのショートコードを入力し、反映させましょう。

ショートコードの使い方

ショートコードは、ブロック新規追加の「ウィジェット」の中にあります。

表示させたい位置にブロックを追加し、ショートコードを入力しましょう。

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

---

---

---

このように、特別なカスタマイズはないので、ショートコードを入力するだけで表示できます。

アーカイブ

アーカイブは、記事の月別アーカイブを追加出来るブロックです。

アーカイブの使い道

コンテンツ内やフロントページに、投稿記事のアーカイブを表示させたい時に称するブロックです。

ドロップダウン表示等のカスタマイズも行えるので、好みの設定を挿入しましょう。

アーカイブの使い方

アーカイブは、ブロック新規追加の「ウィジェット」の中にあります。

月別アーカイブを表示させたい場所にブロックを挿入し、カスタマイズを行いましょう。

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

---

---

---

このように、好みのカスタマイズ設定で、月別アーカイブを表示させることができます。

カレンダー

カレンダーは、サイト上の投稿カレンダーを追加出来るブロックです。

カレンダーの使い道

投稿日のカレンダーを表示させたい時に使用するブロックが、カレンダーです。

ブロックを追加するだけで、すぐに投稿カレンダーを表示させることができます。

カレンダーの使い方

カレンダーは、ブロック新規追加の「ウィジェット」の中にあります。

投稿カレンダーを表示させたい場所に、ブロックを追加しましょう。

では、カレンダーのブロック設定について見ていきましょう。

---

---

---

このように、追加CSSを入力すると、さらにこだわった表示をすることも可能です。

最新のコメント

最新のコメントは、自分の最近のコメント一覧を追加出来るブロックです。

最新のコメントの使い道

自分の最新のコメントを表示したい時は、最新コメントブロックを追加しましょう。

アバターの表示や抜粋などの細かな設定も行うことが可能です。

最新のコメントの使い方

最新のコメントは、ブロック新規追加の「ウィジェット」の中にあります。

自分の最新コメントを表示させたい場所に、ブロックを追加しましょう。

では、最新のコメントのブロック設定について見ていきましょう。

---

---

---

このように、追加CSSを入力すると、さらにこだわった表示をすることも可能です。

RSS

RSSは、RSSやAtomフィードからの投稿を表示できるブロックです。

RSSの使い道

RSSを読み込みたい時に使用するブロックが、RSSブロックです。

読み込んだRSSを表示させたい位置にブロックを挿入するだけで、簡単に表示させることができます。

RSSの使い方

RSSは、ブロック新規追加の「ウィジェット」の中にあります。

読み込んだRSSを表示させたい場所に、ブロックを追加しましょう。

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

---

---

---

このように、追加CSSを入力すると、さらにこだわった表示をすることも可能です。

検索

検索は、訪問者がコンテンツを見つけられるように手助けする検索枠を追加出来るブロックです。

検索の使い道

コンテンツ内やフロントページなどに、検索枠を追加できるブロックです。

検索枠を表示させたい場所にブロックを追加し、好みのカスタマイズを行いましょう。

検索の使い方

検索は、ブロック新規追加の「ウィジェット」の中にあります。

ブロックを追加し、好みの設定にカスタマイズしましょう。

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

---

---

---

このように、検索枠内に表示させるコメントのカスタマイズも可能です。

タグクラウド

タグクラウドは、カテゴリーやタグの一覧を追加出来るブロックです。

タグクラウドの使い道

コンテンツ内やフロントページなどに、タグやカテゴリーの一覧を追加できるブロックです。

表示させたい位置にブロックを追加し、タクソノミーを選択しましょう。

タクソノミーの使い方

タクソノミーは、ブロック新規追加の「ウィジェット」の中にあります。

ブロックを追加し、好みの設定にカスタマイズしましょう。

では、タクソノミーのブロック設定について見ていきましょう。

---

---

---

このように、追加CSSを入力すると、さらにこだわったカスタマイズも可能です。

「埋め込み」のGutenbergブロックの使い方

Gutenbergのブロックカテゴリー「レイアウト要素」は、合計33種類の専用ブロックが用意されています。

どのブロックも埋め込みたいURLを入力するだけなので、ここではワードプレスのブロックについてご紹介させていただきます。

WordPress

WordPressは、ワードプレスの投稿を埋め込めるブロックです。

wordpressの使い道

コンテンツ内におすすめ記事や別の記事への誘導をする際に使用するブロックです。

ブロックを追加した場所にワードプレスのコンテンツをリンクブロックとして埋め込むことができます。

wordpressの使い方

wordpressは、ブロック新規追加の「埋め込み」の中にあります。

ブロックを追加し、好みの設定にカスタマイズしましょう。

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

---

---

---

このように、追加CSSを入力するとさらにカスタマイズすることも可能です。

まとめ

Gutenbergのブロックは、初期から使用できるものでもこれだけの量があります。

最初の段階で全てのブロックを覚えることは大変かもしれませんが、使用頻度の多いブロックだけでも覚えておくと便利です。

好みにあったブロックを使用して、簡単にできるお洒落なカスタマイズを行いましょう。