WordPress — ブロックエディター

WordPressのブロックエディターはGutenberg（グーテンベルク）と呼ばれています。PC・スマホの双方で使えるように設計されている優れたエディターです。ホームページ特有の階層構造をうまく行き来できるようにも設計されています。テーマやプラグインによって豊富な機能拡張が行われてもいます。

ここでは純正WordPressの機能だけを紹介しましょう。

これがGutenbergエディターの操作の基本になります。

基本操作

左端にひとつ上の階層（親ブロック）が表示されており、その横が現在の階層のブロックです。親ブロックのボタンを押すことでひとつ上の階層に移動することができます。ひとつ下の階層に移動することはできません。

ブロック間を移動する場合は、Gutenbergエディターを使うより、左サイドバーのツリー表示を利用したほうが便利でしょう。

ブロックごとに表示されるボタンが違い、常に表示されているのはブロック配置までです。ブロック配置もブロックごとに少しずつボタンが変わっていきます。

ブロック配置以降はそのブロック固有のボタンが並び、そこから直感的な操作が行えるようになっています。こちらはおもに右サイドバーに表示されている項目です。

ボタンのひとつひとつを説明すると膨大な量になってしまうので、以下は隠れ技のような機能の紹介にとどめたいと思います。

Gutenbergエディターを一時的に消す

赤丸の部分をドラッグすると、エディターを一時的に消すことができます。

見えない部分を見る際に使いましょう。

そのまま上下にずらすとブロックの順番を変更することができます。

この方法は最上位のブロックを選択している時にしか使えません。

ブロックの変換

現在の階層ブロックを押すと、ブロックを変換することができます。

画像に文字をかぶせる

ボタンひとつで画像を『カバー』のブロックに変換できます。

画像が大きすぎると思った場合は、ブロックをグループ化して、横並びブロックに変換するといいでしょう。ブロックをグループに変換しても、ブロックの上の階層にグループが作成されるだけなので、元のブロックは影響を受けません。

暗い画像がイヤだなと思ったら、背景の不透明度を０％にしましょう。

文字色の変更

文字を選択して『ハイライト』を選択すると、文字色を変更できます。

赤枠をクリックすると、Color Picker Handler（〇印）で色を指定できます。下にHex番号があるので（オレンジ枠）、番号で色を指定することも可能です。

文字が見えにくいと思った場合は、文字に背景を付けることも可能です。

WordPressでは文字に縁取ることはできない仕様になっています。縁取り（アウトライン）を入れたい場合は、そのようなテキスト画像を作成して、画像として文字を張り付けましょう。

等幅フォントにする

『キーボード入力』を使うことで等幅フォントに変えることができます。文字の幅をそろえたい場合に使いましょう。『インラインコード』にも同様の効果があります。

日本語は等幅フォントだと思うのですが、アルファベットはそうはいかないですね。不等号＜＞も大きく位置をずらしてしまっています。

数式を挿入する

LaTexコマンドを使うことで数式を埋め込むことが可能です。

まず最初に、ブロックを段落に変換するために何か文字を打ち込みましょう。そこから数式を入力します。LaTexコマンドは難しいので、素直にAIに聞いたほうが良いと思われます。

・$R_{\mu\nu} – \frac{1}{2} g_{\mu\nu} R + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4} T_{\mu\nu}$

できました。最後に要らない文字を消して完成させます。

$R_{\mu\nu} – \frac{1}{2} g_{\mu\nu} R + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4} T_{\mu\nu}$

独自の数式を埋め込みたい場合は。。。 勉強しましょう (^_^;。

お疲れさまでした。