WordPressエディタ「Gutenberg」で用意されている各ブロックの解説

サイト構築関連

一般ブロック

「一般ブロック」は記事を書く際必要なブロック群なのでそれに分類されているものの多くは前記事で紹介しておきました。
前記事で説明をしていないブロックは以下。

音声とファイル

音声は文字通り音楽なんかを記事ページに貼り付けることができるものです。
ブロックを選ぶと音楽などを挿入することができます。
実際に挿入すると例えば以下のようになります。
以下の例では再生ボタンをクリックすると音楽が流れます。
右の音声設定で「自動再生」や「繰り返し再生」を選ぶこともできます。

またフィルブロックはリンク先にあるファイルをダウンロードすることができるようにするもので。
ダウンロードボタンをつけることができます。

Brightop-1 ダウンロード

圧縮ファイルは無理なようですが。
PDFとか画像とか動画とか、様々なものをおくことができるようですね。

引用とリスト

これらのブロックでは両方共背景色や文字色を変えることができます。
またマーキングもできます。

引用はその他に下に「引用元を入力」という記述で誘導がなされていまして。
なにげに便利そうです。
またスタイルを変えることができます。
右の設定には２種類ありまして。

インコ（鸚哥、true parrots）はインコ科（鸚哥科、Psittacidae）に属する約330種類の鳥の総称で、オウム目（Psittaciformes）を構成するふたつの科のうちの一つである。もうひとつの科であるオウム科（Cacatuidae）の鳥も英語ではparrotsとよばれるが、インコ true parrots には分類されない。インコはオウムよりも広く分布しており、アメリカ、アフリカ、アジア、オーストラリアとポリネシアに至る太平洋東方まで生息している種がある。
Wikipedia

というように表示が変えられます。

もちろん背景色や文字色も変えられますので以下のように表示できたりもします。

インコ（鸚哥、true parrots）はインコ科（鸚哥科、Psittacidae）に属する約330種類の鳥の総称で、オウム目（Psittaciformes）を構成するふたつの科のうちの一つである。もうひとつの科であるオウム科（Cacatuidae）の鳥も英語ではparrotsとよばれるが、インコ true parrots には分類されない。インコはオウムよりも広く分布しており、アメリカ、アフリカ、アジア、オーストラリアとポリネシアに至る太平洋東方まで生息している種がある。
Wikipedia

リストブロックでは順番有り無しで２種類の表示ができます。
しかし、もしもっと装飾をしたければCSSを使うしかありません。

HTML ul ol liタグで作る箇条書きリスト使い方の基本

このブロックでできる装飾は背景の色や文字の色を変えることだけですが。
とりあえず簡単に装飾できますので使いみちはあると思います。

セキセイインコ
オカメインコ
コザクラインコ

フォーマット

フォーマットも使えるブロックがたくさんあります。
メニューは以下。

この内クラッシクブロックはClassic Paragraphと同じ働きしかしないと思われますので割愛します。

カスタムHTML・整形済み・詩・ソースコード

HTMLの加工に関するフォーマットは４つあります。

カスタムHTMLとソースコード

とても便利だなあと感じたのがカスタムHTML。
旧バージョンではHTMLを確認するためには必ず「コードエディタ」に戻っってHTMLを確認しなくてはならず。
「ビジュアル」と「コード」を何回も行き来しなくてはなりませんでしたが。
カスタムHTMLブロックを使えばビジュアルページと同じページでHTMLの記述をすることができ。
かつブラウザ表示のプレビューも見ることができます。

かつプレビューボタンをクリックすると実際のブラウザ表示を見ることができます。

それとは別に全体のテキストを見る事もできまして。
その場合はページ右上の一番端の３つの点のところをクリックし。
出てきたメニューからエディタの項目で切り替えができます。

ソースコードブロックはHTMLをそのままブラウザ表示させるものです。

こんな感じになります。

これは旧エディタと同じですので説明は省きます。

   <p>インコは扱いやすくてかわいいよ</p>
  </div> 

  <div id="test2">
  	<h2>インコの種類</h2>
  	<p>
  		インコには沢山の種類がありますが、一番お手軽なのは<span>セキセイインコ</span>です。
  	</p>
  	<p>
  		<a href="https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%B3">wikipediaに移動します。</a>
  	</p>
  </div>

  </body > 
 
</html>

整形済み・詩

この「整形済み」と「詩」ブロックなんですが。
そのままテキストを入れてもどこがどうなるのかよくわかりませんよね。
例えば「整形済み」ブロックを呼び出して文章を記述して見ます。
するとこんなふうにブラウザ表示されます。

 インコ科は、インコ亜科 (一般のインコとその仲間) と
ヒインコ亜科のふたつの亜科から構成される。

しかしこれとは異なる分類法もあり、


これらふたつのグループが 
 インコ科（Psittacidae）とヒインコ科（Loriidae）と呼ばれ、
正規の科として記述される場合もある。

うーん、だからなんだって感じですね^^;
ただ整形済みに引用したいテキストなんかを入れてそれをコピペして
引用に貼り付けると以下のようになります。

インコ科は、インコ亜科 (一般のインコとその仲間) と
ヒインコ亜科のふたつの亜科から構成される。

しかしこれとは異なる分類法もあり、

これらふたつのグループが
インコ科（Psittacidae）とヒインコ科（Loriidae）と呼ばれ、
正規の科として記述される場合もある。

このブロックにテキストを挿入することで自動的に整理される、ということだと思います。

実際にブラウザ表示をさせた時にきれいに見えるように使うんじゃないかな、って思ったのは「詩」ブロックの使い方がまさにそういう目的だったからです。

「人生よありがとう」というビオレッタ・パラの名作の

歌詞をコピーしてそのまま貼り付けると以下のようになってしまいます。

Gracias a la vida que me ha dado tanto Me dio dos luceros, que cuando los abro, Perfecto distingo lo negro del blanco Y en el alto cielo su fondo estrellado Y en las multitudes el hombre que yo amo Gracias a la vida que me ha dado tanto Me ha dado el oído que en todo su ancho Graba noche y día, grillos y canarios, Martillos, turbinas, ladridos, chubascos, Y la voz tan tierna de mi bien amado Gracias a la vida que me ha dado tanto Me ha dado el sonido y el abecedario; Con el las palabras que pienso y declaro: Madre, amigo, hermano, y luz alumbrando La ruta del alma del que estoy amando Gracias a la vida que me ha dado tanto Me ha dado la marcha de mis pies cansados; Con ellos anduve ciudades y charcos, Playas y desiertos, montañas y llanos, Y la casa tuya, tu calle y tu patio Gracias a la vida que me ha dado tanto Me dio el corazón que agita su marco Cuando miro el fruto del cerebro humano, Cuando miro al bueno tan lejos del malo, Cuando miro al fondo de tus ojos claros Gracias a la vida que me ha dado tanto Me ha dado la risa y me ha dado el llanto Así yo distingo dicha de quebranto, Los dos materiales que forman mi canto, Y el canto de ustedes que es mi mismo canto, Y el canto de todos que es mi propio canto Gracias a la vida que me ha dado tanto

しかし「詩」ブロックに入れてから

 Gracias a la vida que me ha dado tanto
 Me dio dos luceros, que cuando los abro,
 Perfecto distingo lo negro del blanco
 Y en el alto cielo su fondo estrellado
 Y en las multitudes el hombre que yo amo
 
Gracias a la vida que me ha dado tanto
 Me ha dado el oído que en todo su ancho
 Graba noche y día, grillos y canarios,
 Martillos, turbinas, ladridos, chubascos,
 Y la voz tan tierna de mi bien amado
 
Gracias a la vida que me ha dado tanto
 Me ha dado el sonido y el abecedario;
 Con el las palabras que pienso y declaro:
 Madre, amigo, hermano, y luz alumbrando
 La ruta del alma del que estoy amando
 
Gracias a la vida que me ha dado tanto
 Me ha dado la marcha de mis pies cansados;
 Con ellos anduve ciudades y charcos,
 Playas y desiertos, montañas y llanos,
 Y la casa tuya, tu calle y tu patio
 
Gracias a la vida que me ha dado tanto
 Me dio el corazón que agita su marco
 Cuando miro el fruto del cerebro humano,
 Cuando miro al bueno tan lejos del malo,
 Cuando miro al fondo de tus ojos claros
 
Gracias a la vida que me ha dado tanto
 Me ha dado la risa y me ha dado el llanto
 Así yo distingo dicha de quebranto,
 Los dos materiales que forman mi canto,
 Y el canto de ustedes que es mi mismo canto,
 Y el canto de todos que es mi propio canto
 Gracias a la vida que me ha dado tanto

それをコピペしてカスタムHTMLブロックに貼り付けると

Gracias a la vida que me ha dado tanto
Me dio dos luceros, que cuando los abro,
Perfecto distingo lo negro del blanco
Y en el alto cielo su fondo estrellado
Y en las multitudes el hombre que yo amo

Gracias a la vida que me ha dado tanto
Me ha dado el oído que en todo su ancho
Graba noche y día, grillos y canarios,
Martillos, turbinas, ladridos, chubascos,
Y la voz tan tierna de mi bien amado

Gracias a la vida que me ha dado tanto
Me ha dado el sonido y el abecedario;
Con el las palabras que pienso y declaro:
Madre, amigo, hermano, y luz alumbrando
La ruta del alma del que estoy amando

Gracias a la vida que me ha dado tanto
Me ha dado la marcha de mis pies cansados;
Con ellos anduve ciudades y charcos,
Playas y desiertos, montañas y llanos,
Y la casa tuya, tu calle y tu patio

Gracias a la vida que me ha dado tanto
Me dio el corazón que agita su marco
Cuando miro el fruto del cerebro humano,
Cuando miro al bueno tan lejos del malo,
Cuando miro al fondo de tus ojos claros

Gracias a la vida que me ha dado tanto
Me ha dado la risa y me ha dado el llanto
Así yo distingo dicha de quebranto,
Los dos materiales que forman mi canto,
Y el canto de ustedes que es mi mismo canto,
Y el canto de todos que es mi propio canto
Gracias a la vida que me ha dado tanto

確かに詩らしいレイアウトになりました。

テーブルとブルクオート

テーブル

テーブルブロックでは行数と列数を指定して簡単にテーブルを挿入することができます。
また右端にある設定で。
色設定で背景色、Text Colorで文字の色、スタイルでデザインを少し（2種類）変えたりすることができます。

ただ、見出しだけ背景を変えたりなど、更に変更を加えたい場合はCSSを使うしかありません。

HTML　CSS　テーブル（表）の作り方とその装飾の仕方基本

設定項目は旧バージョンよりも少ないです。

セキセイインコ	オカメインコ
安い	高い
かわいいし飼いやすい	かわいいけど寂しがり屋

ブルクオート

これはいわゆる引用ブロックの別バージョンです。

デフォルトでは上と下に線があって別バージョンでは線が消え、背景に色が付きます。右端の設定でその線の色を変えたり、
テキストの色や背景色を全部または一部変えたりできます。
例えば以下のような感じです。

インコ科は、インコ亜科 (一般のインコとその仲間) と
ヒインコ亜科のふたつの亜科から構成される。

しかしこれとは異なる分類法もあり、

これらふたつのグループが
インコ科（Psittacidae）とヒインコ科（Loriidae）と呼ばれ、
正規の科として記述される場合もある。

レイアウト要素

レイアウト変えるためのブロックです。

続きを読む・改ページ・区切り・スペーサ

この中で「改ページ」ブロックは一つの記事をいくつかのページに分けるものです。
このブロクを入れるごとに新しいページが作られていきます。

また「続きを読む」ブロックはそのブロックの手前までがアーカイブページに抜粋として表示されます。
抜粋は非表示にすることもできます。

「区切り」ブロックは水平の区切りを使って、セクションの間で改行するもので、このブロックでは３種類の線が引けます。

「スペーサー」はブロックの間に、高さをカスタマイズ可能な余白を追加するブロックで。
余白は右端の余白の設定のところで調整ができます。
下にスペーサブロックを入れてありますのでブラウザ表示では次のセンテンスとの間に余白ができています。

このように慣れてくればブロックを挿入するだけで様々なレイアウトの変更を行うことができます。

ボタン

ボタンをブロックで挿入することができるのも新エディタの特徴です。

ボタンは３種類のデザインがあり。
文字の色も背景色も選ぶことができます。
もちろんボタンに名前をつけることもできますし。
リンク先を書き込むところがあってそこにURLを入れれば良いなど、至れり尽くせり。

実際にボタンを作ってみます。
スタイルは角型で青いボタンに灰色文字。
このサイトのトップをURLに指定します。

テスト

するとこんな感じになりました。

メディアと文章

画像と文章を横並びさせるブロックです。
文章の方は背景色や文字の色を変えることができます。
またモバイル用に画像が見られない場合に画像の説明をする代替テキストを入れることができます。
例えば以下のような感じです。
かなり使えそうです。

フィリピンで知り合ったまりちゃん。

あの頃は楽しかったね。
元気でいるかな？

カラム

複数のカラムを並べることができるブロックです。
カラムスは右端の

で調整をすることができます。

例えば３カラムにしてみます。

インコ（鸚哥、true parrots）はインコ科（鸚哥科、Psittacidae）に属する約330種類の鳥の総称で、オウム目（Psittaciformes）を構成するふたつの科のうちの一つである。もうひとつの科であるオウム科（Cacatuidae）の鳥も英語ではparrotsとよばれるが、インコ true parrots には分類されない。インコはオウムよりも広く分布しており、アメリカ、アフリカ、アジア、オーストラリアとポリネシアに至る太平洋東方まで生息している種がある。

インコ科は、インコ亜科 (一般のインコとその仲間) とヒインコ亜科のふたつの亜科から構成される。しかしこれとは異なる分類法もあり、これらふたつのグループがインコ科（Psittacidae）とヒインコ科（Loriidae）と呼ばれ、正規の科として記述される場合もある。

ほとんどのオウム目の鳥がそうであるようにインコ科の鳥も基本的に種子食である。個々の種によって多少バリエーションがあり、果実、ナッツ、葉そして昆虫や、時には他の動物を捕食するものも種類によっては存在する。ヒインコは主に花の蜜を食べているが、他のインコも同様に蜜を食べる。ほとんどのインコは木のウロに巣をかけ、一夫一婦でつがいを作る。
九官鳥と同様、教えることによって人語やその他の音声をまねて発声するようになる。記録では、100語以上発話できた個体もいる。

その他のブロック群

他にウィジェッドと埋め込みがあるんですが。
これらはただ埋め込んでいくだけのものですので詳しい説明は省略をします。
ただ埋め込みは細かく別れていまして先程はYouTubeの動画を埋め込んだりしましたが。

アマゾンの本なんかを埋め込んだりすることもできます。

まとめ

WordPressの旧エディタを使いこなしている方にとってこの新エディタは非常に使いにくいものだと思います。
かく言う私自身暫くの間旧エディタを使っていましたが、試しに時間をとって触っているうちにかなり便利なものであるということがわかってきました。

まだできたばかりなんで、未熟な点も多々ありますので。
エディタの設計思想が全く違うので、慣れるまではたしかに大変ですが、HTMLの間違っている記述を指摘してくれる機能もあったり、今まではCSSを使わないと表現することができなかったものがブロックを使うことで簡単に記事に装着できるなど、旧エディタよりも遥かに優れていると私は確信しました。

そうでなくたってしばらくすれば旧エディタのサポートは行われなくなってしまいます。
そうなればWordPressを使うかやめるかの決断をしなくてはなりません。

是非早めに「Gutenberg」に触ってほしいと思い、記事にしてみました。

今回はここまでです。