２０１８年末から実装された、WordPressの新しいエディタ「Gutenberg」ですが、初めて使用すると非常に戸惑います。
特に、旧エディタで慣れていた方は、初めて使うと取っ付き難く、嫌になって旧エディタに戻ってしまうかもしれません。
Gutenbergはまだまだ不安定要素も多く、機能も不完全でプラグインも少ないですので、もう少し様子見も良いかと思います。
ただ、ブロック要素や表作成機能など、慣れてしまえば非常に便利な機能も搭載していますので、今から慣れておくのも有りかな、とも考えます。
しかし、不具合や使いにくい点もありますので、筆者が使ってみて困った点で解決した問題を備忘録として記録しておきます。
Gutenbergでメニューバーが本文のテキストに被って本文が編集できない
これは一部のブラウザで発生するバグです。
上の図のように、下部にあるメニューバーが途中に浮いてきて本文に被っています。このため本文の一部が見えなくて編集作業が出来ません。
この不具合はインターネットエクスプローラ（IE11）で発生する場合があります。
もしIE11でこの不具合が出た場合は、EdgeかGoogle Chromeで行うと不具合は解消されます。
ブロックの上部タブが本文に重なる
ブロックでテキストを書いていると、現在書いているブロックの上にタブ（ツールバー）が表示されます。
利用するには近くて良いのですが、すぐ上のブロックに被り本文が非常に見難いです。
このツールバーを移動する事が出来ます。
下の図のように、画面右上の３点ボタンをクリックし、設定メニューを出します。
メニューの一番上のトップツールバーを選択すると、今までブロックに付いていたメニューバーが画面上部に移動します。
下の図のようにツールバーが上部に移動しています。
これで本文が見やすくなりました。
リスト表示の変更方法
Gutenbergではブロックのタイプによって、見出しや段落、画像、表など様々な表記が可能になります。
箇条書きがしたい場合は、ブロックの選択から「リスト」を選んで文字入力すると、簡単に箇条書きが出来ます。
そして箇条書きの設定も、画面上部のメニューから可能です。
上部のメニューから、箇条書きの先頭を「・」か番号に変更することが可能で、更に入れ子構造にもすることもできます
一部の文字を強調する
文字の一部を強調したり、斜字体にすることが可能です。
但し、インターネットエクスプローラ11（IE11）ではエラーで何回かハングアップしました。GutenbergはIE11とは相性が悪いようです。
強調したい文字列をカーソルで選択し、上のツールバーから太字（Bold）を選ぶと、文字が強調されます。
Gutenbergでの外部リンクの方法
Gutenbergで外部リンクする場合、上部のメニューのリンクアイコンからリンク設定が可能ですが、このリンク設定では表示がアドレスになってしまい、何のリンクなのかよくわかりません。
また内部リンクの設定も、同様にアドレス表示になり非常に不便です
Gutenbergのリンクでは、アドレス表示になってしまい非常にわかり難い。どこにリンクしているのか分かり易くするためには、クラッシックエディタを使用します。
ブロックの追加から、「クラッシック」を選択します。
クラッシックエディタのメニューからリンクを選びます。
リンク先のアドレスを入力し、左端の歯車マークをクリックします。
Windowの中の「リンク文字列」に表示させたい文字を入力し、下の「更新」ボタンを押します。
すると、クラシックエディタでは、入力した文字列をクリックするとリンク先に飛ぶようになります。
プレビューで実際の表示を確認すると、クラッシックエディタで設定した方は、しっかり文字列になっています。
内部リンクを張りたい場合も、同様にクラッシックエディタのリンクから設定を行います。
内部リンクの場合は、設定時下側にリンク先の記事が表示されますので、ここから選択すると簡単に内部リンクを設定できます。
上の図のように、内部リンクが設定されました。
WordPressにGutenbergが実装されてから、慣れるまでにかなりの時間とエラーの対処をしてきました。
この記事が問題解決のお役に立ちましたら大変うれしいです。
