Gutenberg（WordPress）のブロック要素の使い方を解説
Gutenberg は WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネームです。グーテンベルクが印刷業界に起こしたのと同じ大規模な革命をパブリッシング体験全体に起こすことを目的としています。現在、プロジェクトは WordPress のあらゆる部分と関連する4フェーズのプロセス、編集、カスタマイズ、コラボレーション、多言語対応の最初のフェーズにあり、新しい編集体験「ブロックエディター」にフォーカスしています。
Gutenbergは、「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。「Gutenberg」は従来の「Classic Editor」から切り替えられるとアナウンスされ、公式サイトでは以下のようにコメントされています。「Classic Editor」 は公式な WordPress プラグインであり、少なくとも2022年まで、または必要なくなるまでの間、完全にサポート・保守されます。
Gutenberg のテキストブロック
テキストブロックには記事を書くためによく使われる要素が配置されています。
- 段落は<p>タグで囲まれ文章を記述できます。
- 見出しは<H2～６>タグで囲まれ、見出しを記述できます。
- リストは<ul,ol>タグで囲まれ箇条書きを記述できます。
- 引用は<BLOCKQUOTE>で囲まれ引用を埋め込むことができます。
- コードはプログラムのソースコードを記述。
- 整形済みテキストは<PRE>タグで囲まれスペースや改行などをそのまま等幅フォントで表示
- プルクオートは強調された引用を記述できます。
- テーブルは表を記述
- 詩は歌詞などの引用に使います。
編集画面上部左には図のようなアイコンが並んでいます。左から、w は記事一覧を表示できます。右の鉛筆のようなアイコンは編集と選択を切り替えます。その内容は操作時の状況によって提供される内容が異なります。続く二つのアイコンでは操作を基に戻したり、やり直したりすることができます。右端には詳細とリストアイコンが並んでいます。リストアイコンをクリックするとアウトライン形式でブロックが表示されます。
（※ 内容や順番は操作時の状況やテーマによっても異なることがあります。）
Gutenberg のメディアブロック
メディアブロックには画像、音声、動画に関連するブロックを編集することが可能です。
- 「画像」は画像を挿入することができます。
- 「ギャラリー」は複数の画像をギャラリー形式で表示できます。
- 「音声」は音声プレーヤーを埋め込みます
- 「カバー」はテキストオーバーレイを含む画像か動画を追加できます。
- 「ファイル」はファイルをダウンロードするリンクを追加します。
- 「メディアとテキスト」では画像と文章を横並びのレイアウトにします。
- 「動画」は動画を埋め込むことができます。
Gutenberg に関連する記事
Gutenberg はCSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ～ 3列に分割して、それぞれに画像や文章でデザインしたいことがあります。tableを使ったデザインは比較的容易に作ることができますが、レスポンシブに対応させる…
Gutenberg は、 ブロックエディタとも呼ばれ、段落（文章）や画像、見出し等をブロック単位でHTMLやCSSの知識を必要としない、編集方法になっています。また旧ビジュアルエディタよりさらに機能が追加されテーマのデフォルト装飾に依存することなく装飾をす…
Gutenberg のタグはタグ名を直接入力する仕様になっていて、使いがっては少し不便です。カテゴリーのようにチェックボックスで入力出来れば操作性が向上します。タグは関連する記事を複数のカテゴリーに渡って紐づけできる機能で、サイトの内の回遊率アップにも貢献…
Gutenbergは、「専門知識がなくてもコンテンツを作成できるようにする」、「インターフェースを改善する」、「コンテンツの作成方法を統一する」ことを目的に開発されました。Gutenbergは従来の「Classic Editor」から切り替えられるとアナウ…
Gutenberg はWordPress Ver.5.0以上からのビジュアルエディターになりました。Gutenberg は、ブロックを利用して見出しや本文、画像等を作成し組み合わせていきます。ブロックや文章を入力するエリア以外は基本的に従来と同じ使い方がで…
