サイト構築関連

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

Sponsored Link

Sponsored Link

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しました。

それで新エディタ「Gutenberg」では前記事で紹介したものの他にも様々なブロックが用意されていまして。
ブロックはいくつかのカテゴリーに分かれています。
今回はそれらのうち私が使えると思ったものについて一つ一つ説明をしていきます。

一般ブロック

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

赤で囲んだ部分が未解説

音声とファイル

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

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

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

引用とリスト

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

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

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

Wikipedia

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

Wikipedia

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

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

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

Wikipedia

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

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

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

フォーマット

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

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

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

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

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

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

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

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

ソースコードブロックは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を使うしかありません。

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

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

ブルクオート

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

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

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

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


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

レイアウト要素

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

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

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

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

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




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

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

ボタン

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

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

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

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

メディアと文章

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

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

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

カラム

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

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

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

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

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

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

その他のブロック群

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

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

まとめ

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

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


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

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

今回はここまでです。

Sponsored Link

Sponsored Link

関連記事

  1. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明…
  2. WordPressのフォルダ構成とバックアップの仕方
  3. 【Basics of site construction】多すぎ…
  4. サーバって何?どのレンタルサーバーを選べばよいのか?
  5. 【Basics of site construction】ドメイ…
  6. 【Basics of site construction】カテゴ…
  7. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  8. WordPressエディタ「Gutenberg」の使い方 総まと…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  2. サーバって何?どのレンタルサーバーを選べばよいのか?
  3. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  4. Windows10 でフォルダの拡張子を表示するには?
  5. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  6. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  7. WordPress新エディタ「Gutenberg」の使い方
  8. Windows10でブルーライトカットの設定 コントロールパネルの使い方

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

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

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

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

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

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

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl合成モードの種類とその効果 使い方
AviUtlのすべてのエフェクトについての解説⑪アニメーション効果(1)
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説⑫アニメーション効果(2)
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク

ソフト・アプリの使い方

PAGE TOP