【WordPress】 新エディタ「Gutenberg」

SITE/BLOG

 WordPress5.0からエディタが変わった。Gutenberg(グーテンベルク)。まだ使い始めたばかりだが、以前のエディタ(Classic Editor)よりも使いこなせそう。プレビューしなくても大体どんな感じになるのかイメージが掴める。

スポンサーリンク

ブロックエディタ

 各段落(パラグラフ)がブロック(ひと塊)になって、
 ブロック毎に下のような文字装飾エディタが表示される。

以前の装飾エディタ

   太字やイタリック(斜体)にしたり、
   リンク設定したり、
   文字の色や大きさを変えたり、
   マーカーやアンダーラインマーカーを付けたり、
   バッジを付けたり、……。
   適当に整えていけば文章は出来上がり。

 最初は段落のブロックから。
 改行(ENTER)すると新たに段落のブロックが作られる。
 ブロック内で改行したいときは、SHIFT +  改行(ENTER)

 ブロックの左に表示される(上下の)矢印ボタンでブロックを上下へ移動させることができる。
  +)今は装飾エディタの左に表示

 装飾エディタの一番右にある詳細設定からブロックを削除することができる。
  ※ 今は詳細設定ではなくオプション

ブロック

 HTMLの<p> </p>タグが段落(パラグラフ)で、
 電子書籍(epub本)を作る時も各段落がブロック状になっていたので、馴染めそう。

 ブロックは段落のほか、見出し、リスト、引用、画像、動画、音声など多々ある。
 ブロックの下に表示されるをクリックするか、画面左上のをクリックすると各種ブロックが表示される。ブロックインサーター。

 見出しはH2、H3、H4(HTMLのタグはH6まである)。
 Cocoon(テーマ)の場合、見出し2つ以上(デフォルト)で目次を自動的に作ってくれる。

 テーブル(表)もある。

 ギャラリーは、画像のリスト。複数の画像を並べて表示させることができる。

 カバーは、いまいちよく分からなかったが、画像の上に文字を重ねることができた。

まじか

 詩というブロックもある。

うばい合えば足らぬ
わけ合えばあまる

みつを

 SNSやウィジェットも選択できる。

 今度こそ
 ビジュアルエディタを使いこなせない ⇒ 昔ながらのタグ組みに戻る
の繰り返しから抜け出せそう。

スポンサーリンク

+)WordPress覚え書き

 アンカーリンク(ページ内リンク)設定 <a id = "○○○">
  ・ 装飾エディタオプション - HTMLとして編集
    aリンクのタグにid = "○○○"を加える
  or
  ・ ブロック - 高度な設定
    HTMLアンカーに○○○を入力

 ブロック - 高度な設定
 追加CSSクラスもある。

 COCOONブロック
  Cocoon(テーマ)の場合。

  当ブログは白抜きボックス、ブログカードを多用。

  吹き出し
   Cocoon設定 - 吹き出しで人物を設定。吹き出しブロックのサイドメニューで人物を選択しながら「会話」。

  将来テーマを変更する場合、対応が必要になりそう。

スポンサーリンク