WordPress Gutenberg(グーテンベルク)の使い方:テキスト編
[PR]プロモーションが含まれています

WordPress Gutenberg(グーテンベルク)の使い方:テキスト編

5月 6, 2024

Gutenberg(グーテンベルク)のテキストブロックの各パーツの使い方を解説します。

テキスト

選択できるテキストブロックは次の通りです。

  • 段落
  • 見出し
  • リスト
  • 引用
  • コード
  • 詳細
  • 整形済みテキスト
  • プルクオート
  • テーブル
  • クラシック

段落

すべての文章の基本の構成ブロックです。

HTMLで言うところの<p></p>タグでくくられる段落テキストのブロック。
Shiftを押しながらエンターキーで、<br>タグが入り改行入力できます。

表示プレビュー

見出し

文章の見出しを設定するブロックです。HTMLでは<h2>〜</h2>などでくくられるタグで<h2>から<h6>が設定できます(<h1>タグは基本的に投稿記事のタイトルが設定されるため、h2以降で指定します)
テーマによってデザインが設定されているので見た目は使用テーマによって異なります。

表示プレビュー

リスト

箇条書き(順序なし)、番号付き(順序付き)リストが選択できます。

  • リスト1
  • リスト2
  • リスト3

また、インデントボタンでリストの中にさらにリストを入れ子したり解除したりできます。

  1. リスト1
    • リスト1−2
    • リスト1−3
  2. リスト2
    • リスト2−2
    • リスト2−3

引用

引用文を視覚的に強調して入力できます。

人事を尽くして天命を待つ

引用元:胡寅(こいん)

コード

ソースコードが入力できます。

// 枠内にソースコードが表示されます。

.flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
}

詳細

表示/非表示を切り替えられるブロックです。▶️をクリックすると、詳細テキストが表示されます。

概要文など

詳細テキストが入ります。初期では閉じた状態で非表示になっています。

プルクオート

通常の引用ブロックよりも引用テキストを強調させる場合に使用します。

人事を尽くして天命を待つ

引用元:胡寅(こいん)

整形済みテキスト

HTMLでいう<pre></pre>タグ
改行したりスペース、タブを含むテキストがそのまま表示されます。

HTMLでいう<pre></pre>タグです。
改行したりスペース、タブを含むテキストがそのまま表示されます。

テーブル

カラム数&行数を指定して表(HTMLでいうところのテーブル)が作成できます。

品名種別料金
トマト野菜100円
レタス野菜120円
レモン果物100円
いちご果物200円
表示プレビュー

詩や歌詞の引用などに使用できます。サンプルで脚注を入れています。

およぐひとのからだはななめにのびる、
二本の手 1 はながくそろえてひきのばされる、
およぐひとの心臓こころはくらげのようにすきとおる、
およぐひとの瞳めはつりがねのひびきをききつつ、
およぐひとのたましいは水 2 のうえの月をみる。
  1. 脚注1テキストが入ります。 ↩︎
  2. 脚注2テキストが入ります 。 ↩︎

クラシックエディタ

クラシックエディタで入力できます。ブロックへの変換も可能。

表示プレビュー