WordPressを5.0にアップデートしたら、エディターがガラリと変わってビックリした人も多いはず！
新しいエディターの名前は『Gutenberg（グーテンベルク）』って言いますが、見た目が変わって戸惑いますよね。
特に、!– wp:paragraph — みたいなコードが出てきて、何のことか分からなかった人もいるんじゃないかな？
実はこれ、段落を表すコードなのです。
ちょっと専門用語が多いから最初は戸惑うけど、一つ一つ解説していくと、意外と簡単。
一緒にブロックエディターについて学んで、もっと楽しくWordPressを使ってみましょう！
!– wp:paragraph –ってなに⁉️Gutenbergブロックのコード
ブロック編集中、ブロックのメニューを見てみると、ちょっと不思議なコード「!–wp:paragraph–」を発見しますよね。
これは、WordPressがブロックを管理するための特別な合言葉のようなもの。
HTMLとはちょっと違う、WordPress独自のルールで書かれているんです。
この合言葉があると、「ここから先は段落として扱ってね！」とWordPressに伝えることができるので、文章がスッキリと整理されるんです
さてブロックは実際に使ってみないと、使い勝手が分かってこないので、是非、どんどん使ってみましょう。
Gutenberg を「まずは！知ること」が大事なので、私は記事を書きながらお勉強始めていきたいと思います。
Gutenberg よく使うブロックとコード一覧
初めの一歩として 、Gutenbergの主役である「ブロック」を一つ一つ読み解いていきたいと思います。
ブロックは次の５つのカテゴリーに分類されています。そのカテゴリーごとに見ていきましょう。
プラスをポチッとクリックして下さい。
ブロックの種類が表示されます。
マウスを動かしてみてください。ブロック（段落）の間 間に⊕が出てきますよ
- 一般ブロック
- フォーマット
- レイアウト要素
- ウィジェット
- 埋め込み
一般ブロック
ここには、よく使うものがまとめられています
一般ブロックには、10種類のブロックがあります。
記事を書く上でよく使う基本となるブロックが多く含まれています。
段落
コード:!– wp:paragraph —
タグ: p
これは、文章を入力するブロックです。
一番良く使うブロックです。
<p>タグで囲むマークアップが付きます。
（※マークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することです。）
ブロックの追加や削除は、ショートカットで覚えておくと楽です！
ブロックエディターは、レゴブロックで建物を作るようなもの。
一つのブロックが一つの部屋だとすると、改行するたびに新しい部屋ができてしまうイメージです。
以前のエディタでは、文章の最後に2回改行すると、ちょうど紙に書くときのように、空行が1行入る感じでした。
でも、新しいエディタでは、2回改行すると、文章のブロックが一つ増えるようなイメージです。
スペサー /余白を作るポイント！
ブロックエディタの「スペーサー」は、文章や画像などのブロック間に一定の空白や間隔を作るためのブロックです。
目に見えない「隙間」を作ることで、ページのデザインに深みを出したり、視覚的なバランスを整えたりすることができます。
余白は数値(px)で指定できます。
見出し
コード:– wp:heading —
タグ: <h>
段落の次に利用頻度の高いのは見出しですね。
これは見出しを設定するブロックです。
h1〜h6まで選べます。
h5〜は設定から選びます。
— wp:tadv/classic-paragraph –クラシックに変わっていたら、従来の通りのところから選択できます。
TinyMCEプラグインを有効にしていると、文章を入力する部分が『Classic Paragraph』という少し古いタイプの編集画面に変わってしまうことがあります。
このプラグインを停止すれば、通常の段落ブロックに戻ってスムーズに編集できるようになるはずです。
（クラシックになった時の見え方 ↓前のエディタ）
埋め込み
埋め込みは、他のウェブサイトやサービスから、動画、地図、ツイートなどのコンテンツを、自分のウェブサイトに直接取り込む機能のことです。
例えば、YouTubeの動画を自分の記事の中に埋め込んだり、Googleマップをブログに表示したりすることが可能です。
フォーマット枠
Gutenbergの投稿フォーマットは、文章を書くときの『スタイル』みたいなものです。
例えば、日記を書いたり、レシピを紹介したり、引用文を載せたり、それぞれ書き方が違いますよね。
このフォーマットを使うことで、文章の種類に合わせて、見栄えやレイアウトを簡単に変えることができるんです。
フォーマットカテゴリーには、7種類のブロックがあります。
- テーブル
- カスタムHTML
- クラシック
- ソースコード
- 整形済み
- プルクオート
- 詩
テーブル
コード：!– wp:table —
タグ:<table>
Gutenbergのブロックエディタではテーブル（表）も作成できるようになっています。行や列の追加も簡単です。気軽にテーブルを使えるようになりました。
テーブルのデザインが、デフォルトとボーダーの2種類用意されています。
カスタムHTML
コード：– wp:html —
タグ:自由
独自のHTMLコードを本文内で使いたい時にカスタムHTMLブロックを使います。HTMLのコード表示からプレビューに切替えて、すぐに表示を確認できるのも便利。グーグルマップの埋込みで利用しています。
クラシック
TinyMCEを使う以前のエディタで書けるブロックです。
「クラシックエディタ」がそのブロックで使えます。もし「使い勝手が悪いからクラシックエディタに戻す」という理由でしたら、このフォーマットを使うことでプラグインを利用することなく回避できます。
バージョン5.0以前のワードプレスからアップデータした場合には、以前書いた記事がクラシックブロックに変換されます。
ソースコード
!– wp:★★★★★–
タグ:<figure>+<blockquote>
HTMLなどのコードをそのまま記載できます。他のブロックに、タグを含む文字列を貼り付けると、タグとして認識されてしまいますが、ソースコードブロックでは、変換されずにそのまま表示されます。
<pre>タグ、<code>タグで囲まれるマークアップが施されます。
プルクオート
★!– wp:★★★
タグ:<figure>+<blockquote>
プルクオートは 文章全体の中から強調したい箇所を引用し、主なポイントやフレーズを強調する時に使う表現方法です。
<figure>タグ、<blockquote>タグで囲まれるマークアップが付きます。
コメント