
まずはじめに、投稿画面にブロックのメニューバーを出す方法を3つご説明します。さらに、メニューバーのアイコンについて「はじめに知っておきたい事」を説明しました。
1・左上の「+」ボタンをクリックすると、下記のように左側にカラムができて、「ブロック」「パターン」「メディア」3つのタブを切り替えると、利用可能なアイコンを見る事ができます。
2・本文中の「+」ボタンをクリックすると、以下の様な簡易メニューが表示されます。下にある「すべて表示」をクリックすると、①と同じ左側カラムにメニューが表示されます。
3・タイトルを追加の下、ブロックを選択するには「/」を入力の部分に、半角で/を入力すると下記のようなメニューバーが表示されます。
メニューバーの説明
3番目に出したメニューバーでそれぞれのアイコンの使い方を説明します。
段落
①のアイコンは「段落」です。段落は段落は「Enter」で改行していくと追加できますが、この段落アイコンをクリックすると、下に使いのメニューが表示されます。
テキストの配置
②のアイコンは、テキストの配置です。はじめは、左寄せになっていますが、中央寄せ、右寄せの3つから選択できます。
文字A
③のアイコンは、文字を太くしたり色を変えたりできます。
文字(ペン)
④のアイコンは、文字にアンダーラインやマーカーを付ける事ができます。
バッジ
⑤のアイコンは、文字の背景に色を付けて、文字を白抜きにすることができます。
フォントサイズ
⑥のアイコンは、フォントサイズを変更できます。
ショートコード
⑦のアイコンは、ショートコード(HTMLタグのようなもの)を挿入できるアイコンです。このショートコードは、非常に便利なアイコンで、再利用したり自作したりもできるので、改めて別ページで詳しく説明したいと思います。ここでは、ざっくりと覚えておいてください。
テンプレート
⑧のアイコンは、テンプレートを挿入できます。このテンプレートも追加する事ができるので、別ページにて詳しく説明したいと思います。例えば、以下の様に投稿すると、
公開されたページには、以下の様に表示されます。
アフィリエイトタグ
⑨のアイコンは、予め登録しておいたアフィリエイトタグを挿入する事ができます。登録方法については、別途説明ページを設けますのでお待ちください。また、アフィリエイトタグを挿入する方法は、他にも色々あります。
太文字
10のアイコンは、選択した文字を太く表示することができます。Ctri+BでもOKです。
イタリック
11のアイコンは、選択した半角英数字を斜め(イタリック)に表示できます。Ctri+IでもOKです。
リンク
12のアイコンは、文字にリンクを貼る事ができます。Ctri+KでもOKです。
さらに表示
13のアイコンは、メニューバーに表示されていないメニューの一覧です。
オプション
14のアイコンは、メニューバーに表示されていないオプションの一覧です。
設定パネルについて
投稿の編集エリアで、ブロックを選択した状態でさらに設定する事ができます。設定できる内容は、ブロックの種類によって、内容が違います。
設定は、右側の「設定パネル」で行います。例では、ブロック全体の文字色を赤にしました。
Gutenbergの使い方 おすすめ動画
【WordPress】Gutenbergの使い方【全てのコンテンツを解説】
ものすごく、勉強になる動画です。是非ご覧ください。
#メニューバー #アイコン #段落アイコン #テキストの配置 #文字 #バッジ #フォントサイズ #ショートコード #テンプレート #アフィリエイトタグ #太文字 #イタリック #リンク #さらに表示 #オプション #設定パネルについて #テキストブロック