ブロックのメニューバーの出し方とアイコンの説明|はじめに知っておきたい事

ブロックのメニューバーの出し方とアイコンの説明|はじめに知っておきたい事 WordPress
※このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています。
香奈枝
香奈枝

まずはじめに、投稿画面にブロックのメニューバーを出す方法を3つご説明します。さらに、メニューバーのアイコンについて「はじめに知っておきたい事」を説明しました。

1・左上の「+」ボタンをクリックすると、下記のように左側にカラムができて、「ブロック」「パターン」「メディア」3つのタブを切り替えると、利用可能なアイコンを見る事ができます。

左上+menu bar

2・本文中の「+」ボタンをクリックすると、以下の様な簡易メニューが表示されます。下にある「すべて表示」をクリックすると、①と同じ左側カラムにメニューが表示されます。

3・タイトルを追加の下、ブロックを選択するには「/」を入力の部分に、半角で/を入力すると下記のようなメニューバーが表示されます。

タイトルを追加の下、ブロックを選択するには「/」

メニューバーの説明

3番目に出したメニューバーでそれぞれのアイコンの使い方を説明します。

段落

①のアイコンは「段落」です。段落は段落は「Enter」で改行していくと追加できますが、この段落アイコンをクリックすると、下に使いのメニューが表示されます。

段落

テキストの配置

②のアイコンは、テキストの配置です。はじめは、左寄せになっていますが、中央寄せ、右寄せの3つから選択できます。

テキストの配置

文字A

③のアイコンは、文字を太くしたり色を変えたりできます。

ブロックメニュー文字

文字(ペン)

④のアイコンは、文字にアンダーラインやマーカーを付ける事ができます。

ペン

バッジ

⑤のアイコンは、文字の背景に色を付けて、文字を白抜きにすることができます。

バッジ

フォントサイズ

⑥のアイコンは、フォントサイズを変更できます。

フォントサイズ

ショートコード

⑦のアイコンは、ショートコード(HTMLタグのようなもの)を挿入できるアイコンです。このショートコードは、非常に便利なアイコンで、再利用したり自作したりもできるので、改めて別ページで詳しく説明したいと思います。ここでは、ざっくりと覚えておいてください。

ショートコード1

テンプレート

⑧のアイコンは、テンプレートを挿入できます。このテンプレートも追加する事ができるので、別ページにて詳しく説明したいと思います。例えば、以下の様に投稿すると、

テンプレート1

公開されたページには、以下の様に表示されます。

テンプレート2

アフィリエイトタグ

⑨のアイコンは、予め登録しておいたアフィリエイトタグを挿入する事ができます。登録方法については、別途説明ページを設けますのでお待ちください。また、アフィリエイトタグを挿入する方法は、他にも色々あります。

アフィリエイトタグを

太文字

10のアイコンは、選択した文字を太く表示することができます。Ctri+BでもOKです。

太文字

イタリック

11のアイコンは、選択した半角英数字を斜め(イタリック)に表示できます。Ctri+IでもOKです。

イタリック

リンク

12のアイコンは、文字にリンクを貼る事ができます。Ctri+KでもOKです。

リンク

さらに表示

13のアイコンは、メニューバーに表示されていないメニューの一覧です。

さらに表示

オプション

14のアイコンは、メニューバーに表示されていないオプションの一覧です。

オプション

設定パネルについて

投稿の編集エリアで、ブロックを選択した状態でさらに設定する事ができます。設定できる内容は、ブロックの種類によって、内容が違います。

設定は、右側の「設定パネル」で行います。例では、ブロック全体の文字色を赤にしました。
設定パネル

Gutenbergの使い方 おすすめ動画

【WordPress】Gutenbergの使い方【全てのコンテンツを解説】

ものすごく、勉強になる動画です。是非ご覧ください。

#メニューバー #アイコン #段落アイコン #テキストの配置 #文字 #バッジ #フォントサイズ #ショートコード #テンプレート #アフィリエイトタグ #太文字 #イタリック #リンク #さらに表示 #オプション #設定パネルについて #テキストブロック