![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
ワードプレスで入力するときに、ブロックの上に四角いバーが出てくるんだけど、あれって何なの?
![選択したブロックのすぐ上に表示される横長のバー](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-14_16h28_25.png)
![選択したブロックのすぐ上に表示される横長のバー](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-14_16h28_25.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
あれは、「ブロックツールバー」と言ってブロックの細かい設定をするためのものです。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
そういえば、過去にあれを使って文字を太くした記憶がある・・・
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
よく覚えていましたね!
文字を太くしたり、配置を変えたり、様々な機能がある便利なバーです。
ワードプレスでブログやお知らせなどの投稿をしたことがある方なら、一度は見たことがある「ブロックツールバー」。
あのバーは「ブロックツールバー」という名前ということは知っていましたか?
私はテクこやでブロックエディタの紹介をするときに初めて知りました。
以前に何回か登場しているので使い方をなんとなく知っている方も、全ての機能を使うことはなかなかないと思います。今回は、「ブロックツールバー」の使い方をわかりやすく、徹底的に紹介していきます!
↓その他ワードプレスの基本的な解説記事も必見です!
ブロックツールバーとは
先ほども少し紹介しましたが、ブロックツールバーとは「選択したブロックの細かい設定をするためのバー」です。
スタイリッシュなバーにアイコンがいくつか並んでいますが、見た目以上にたくさんの機能があります。
基本的な設定の半数は、ここから変更できます。
また、ブロックによって表示されるアイコンも変わります。これは、そのブロック特有の機能が表示されている、もしくは不要なものが表示されていないからです。
そのブロックに必要な機能だけが表示されているため、とても使いやすく便利なバーと言えます。
ブロックツールバーの使い方
非常によく使われる「見出しブロック」を例に、ブロックツールバーの解説をしていきます。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
ブロックによって表示される機能は変わるので、あくまで一例としてご覧ください。
右側にある「
![∨を押すとさらに7項目出てくる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-14_17h24_28-1.png)
![∨を押すとさらに7項目出てくる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-14_17h24_28-1.png)
![一番右の点をクリックすると11項目表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-14_17h39_32.png)
![一番右の点をクリックすると11項目表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-14_17h39_32.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
たくさんあるね!
1.選択しているブロック
![ブロックツールバー一番左のアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_10h47_37.png)
![ブロックツールバー一番左のアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_10h47_37.png)
ブロックツールバーの一番左にあるアイコンには、「選択しているブロック」が表示されています。
アイコンは選択されているブロックのものになっています。
画像には「段落:ブロックまたはスタイルを変更」と書いてあるので、段落ブロックが選択されていることがわかります。「ブロックタイプまたはスタイルを変更」とは、段落ブロックを他のブロックに変更する設定のことです。
段落のアイコンをクリックすると、「段落」から変更できるブロック一覧が表示されます。
![段落ブロックから変更できるブロック一覧](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_11h00_23.png)
![段落ブロックから変更できるブロック一覧](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_11h00_23.png)
段落ブロックから変更できるブロックは、見出し・リスト・引用・カラムなどが表示されています。
※表示されるブロックは、お使いのテーマや選択しているブロックによって変わります
2.ドラッグして移動
![「選択しているブロック」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_11h25_13.png)
![「選択しているブロック」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_11h25_13.png)
「選択しているブロック」の右側にあるアイコンには、「ドラッグ」と表示されています。
アイコンは点が6つならんでいるものです。。
このアイコンにマウスを乗せるとカーソルが手の形に変わります。
手の形に変わったら、ドラッグして上下に移動させることでブロックの位置を自由に移動できます。
![「ブロックツールバー」という文章が一番下の行にある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h03_05.png)
![「ブロックツールバー」という文章が一番下の行にある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h03_05.png)
![一番下の行にあった「ブロックツールバー」という文章を一番上の行に移動した](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h03_30.png)
![一番下の行にあった「ブロックツールバー」という文章を一番上の行に移動した](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h03_30.png)
3.矢印をクリックして上下に移動
![「ドラッグして移動」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h12_29.png)
![「ドラッグして移動」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h12_29.png)
「ドラッグして移動」の右側にあるアイコンには、「(上)下に移動」と表示されています。
アイコンは上向きと下向きの矢印が上下に並んでいるものです。
画像では「下」と表示されていますが、矢印が上下にあるので上の矢印を選択すると上に、下の矢印を選択すると下に移動します。
![「ブロックツールバー」という文章が一番上の行にある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h24_24.png)
![「ブロックツールバー」という文章が一番上の行にある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h24_24.png)
![一番上の行にあった「ブロックツールバー」という文章を一番下の行に移動した](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h27_42.png)
![一番上の行にあった「ブロックツールバー」という文章を一番下の行に移動した](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h27_42.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
「2.ドラッグして移動」と「3.矢印をクリックして上下に移動」はどう違うの?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
「2.ドラッグして移動」は好きな位置に、「3.矢印をクリックして上下に移動」はクリックした数だけそれぞれ移動します。
移動する、という意味では同じなのでお好みに合わせて使い分けてくださいね。
4.テキストの配置
![「矢印をクリックして移動」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h30_59.png)
![「矢印をクリックして移動」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_12h30_59.png)
テキストの配置はバーのほぼ中央にあり、「テキストの配置を変更」と表示されています。
アイコンは「三」のような形をしていて、配置によって多少形が変わります。
テキストは「左寄せ」「中央寄せ」「右寄せ」の3種類から選択できます。
![漢字の三のようなアイコンをクリックすると、「左寄せ」「中央寄せ」「右寄せ」の3つが表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_13h35_10.png)
![漢字の三のようなアイコンをクリックすると、「左寄せ」「中央寄せ」「右寄せ」の3つが表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_13h35_10.png)
![画面左側を軸に「左寄せ」、画面中央を軸に「中央寄せ」、画面右側を軸に「右寄せ」](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_13h39_54-1024x274.png)
![画面左側を軸に「左寄せ」、画面中央を軸に「中央寄せ」、画面右側を軸に「右寄せ」](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_13h39_54-1024x274.png)
5.太字
![「テキストの配置」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h22_08.png)
![「テキストの配置」の右隣りにあるアイコン](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h22_08.png)
太字の配置はバーのほぼ中央にあり、「太字」と表示されています。
アイコンは「B」の形をしています。
ドラッグで選択した部分の文字を太くすることができます。
![選択した部分しか太くできないので、太くしたい部分をドラッグして選択する](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h27_37.png)
![選択した部分しか太くできないので、太くしたい部分をドラッグして選択する](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h27_37.png)
![ブロックツールバーのほぼ真ん中にある「B」のアイコンをクリック](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h29_22.png)
![ブロックツールバーのほぼ真ん中にある「B」のアイコンをクリック](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h29_22.png)
![選択を解除すると太字になるのが確認できる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h30_55.png)
![選択を解除すると太字になるのが確認できる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h30_55.png)
6.イタリック
![太字の「B」の右隣りにある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h35_09.png)
![太字の「B」の右隣りにある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h35_09.png)
「太字」の右側にあるアイコンは、「イタリック」です。
アイコンは斜めの線の形をしています。
ドラッグで選択した部分の文字を斜めの形にします。
![先ほどの太字と同じように、選択した部分だけが斜めになる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h51_21.png)
![先ほどの太字と同じように、選択した部分だけが斜めになる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h51_21.png)
![中央やや右側にある「/」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h52_38.png)
![中央やや右側にある「/」をクリック](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h52_38.png)
![選択を解除すると斜めになっているのが確認できる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h53_42.png)
![選択を解除すると斜めになっているのが確認できる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h53_42.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
あれ?斜めになっているのかわからないよ?
フォントによっては、斜体にならないものもあります。よく使われる「メイリオ」というフォントも斜体に対応していません。
どうしても斜体にしたい場合は、対応しているフォントに設定を変更してください。
![日本語もアルファベットも右に傾いている](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h59_43.png)
![日本語もアルファベットも右に傾いている](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h59_43.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
斜体に対応しているとこうなります!
7.リンク
![ブロックツールバーの右半分の中央辺りにある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h35_22.png)
![ブロックツールバーの右半分の中央辺りにある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-15_18h35_22.png)
「イタリック」の右側にあるアイコンは、「リンク」です。
アイコンは丸の間に線がある、唇のような形になっています。
他のサイトや同じサイトの他のページなどのURLを貼り付けて、クリックするとそのページへ飛べるようになります。
![太字、斜体同様に選択した部分だけにリンクが貼られる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-16_17h21_05.png)
![太字、斜体同様に選択した部分だけにリンクが貼られる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-16_17h21_05.png)
![アイコンをクリックすると、正方形の枠が表示されて、URLが入力できる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-16_17h23_19.png)
![アイコンをクリックすると、正方形の枠が表示されて、URLが入力できる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-16_17h23_19.png)
リンクの詳細設定
URL入力の下の画面は、クリックしたときにどのような表示をするか、という設定の選択です。
- 「新しいタブで開く」はそのURLをクリックすると、現在開いているタブではなく、新しいタブで開きます。
![URL入力欄の下にある「新しいタブで開く」にチェックを入れると、実際にURLをクリックしたときに新しいタブで開く](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_11h06_44.png)
![URL入力欄の下にある「新しいタブで開く」にチェックを入れると、実際にURLをクリックしたときに新しいタブで開く](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_11h06_44.png)
- 「新しいタブで開く」は読者(ユーザー)にも関わる項目ですが、その下にある「Add」から始まる3点はグーグルなどの検索エンジン向けの項目です。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
主にSEO対策(グーグルなどの検索結果で上位表示させる)のための項目です。
![「新しいタブで開く」の下に英語表記の3つの項目がある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_12h30_34_01.png)
![「新しいタブで開く」の下に英語表記の3つの項目がある](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_12h30_34_01.png)
Add “nofollow” to linkとは
グーグルなどの検索エンジンに対して「このリンクはフォローしないでください(nofollow)」と伝えるためのリンク。お金を払ってリンクを貼ってもらう場合や、関連づけたくないとき、信頼できないサイトのリンクなどを貼り付ける場合にチェックしてください。
Add “sponsored” to linkとは
サイトのスポンサーの広告リンクや、有料リンクを貼り付ける場合はここにチェックをします。
Add “ugc” to linkとは
ugcとはUser Generated Contents(ユーザー作成コンテンツ)のことで、コメントや投稿などのユーザーが書き込むコンテンツのことを指します。
そういったコンテンツのリンクを貼り付ける場合は、ここにチェックを入れます。
一番下にある「Add title attribute to link」とは、URLを貼り付けた文字にカーソルを合わせたときに表示される文字の設定のことです。(画像右)
![リンクにカーソルを合わせても何も表示されない](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h20_47.png)
![リンクにカーソルを合わせても何も表示されない](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h20_47.png)
![リンクにカーソルを合わせると「みてね」と表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h20_11.png)
![リンクにカーソルを合わせると「みてね」と表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h20_11.png)
手順は、まずリンクを貼り付けるURLを入力して右側にある矢印をクリックします。
![URLを入力後、矢印をクリックして決定](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h54_59.png)
![URLを入力後、矢印をクリックして決定](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h54_59.png)
一番下の長方形の枠に表示したい文章を入力してから、すぐ上にある「Add title attribute to link」をクリックします。
(ここでは「みてね」と入力しました)
![枠の一番下にある四角に「みてね」と入力](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h57_55.png)
![枠の一番下にある四角に「みてね」と入力](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h57_55.png)
一番上のURLの上に「みてね」と表示されています。
![枠の一番上にリンクの貼られた「みてね」が表示された](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h58_11.png)
![枠の一番上にリンクの貼られた「みてね」が表示された](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h58_11.png)
「プレビュー」で実際のページを確認してみましょう。
リンクを貼り付けた「ブロック」の文字にカーソルを合わせると色が変わり、入力した「みてね」という文字が表示されます。
![リンクを貼った「ブロック」が黒からオレンジ色に変わり、「みてね」と四角で囲まれた文字が表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h58_37-1.png)
![リンクを貼った「ブロック」が黒からオレンジ色に変わり、「みてね」と四角で囲まれた文字が表示される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_13h58_37-1.png)
リンクの取り消し方
リンクを取り消したい場合は、貼り付けたときと同じようにリンクのアイコンをクリックします。
![リンクが設定されている部分はアイコンに斜線が入っているので、それをクリックするとリンクの設定を取り消せる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h24_40.png)
![リンクが設定されている部分はアイコンに斜線が入っているので、それをクリックするとリンクの設定を取り消せる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h24_40.png)
ブロックツールバーの表示を変える方法
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
ブロックツールバーってブロックの上にあって便利だけど、少し邪魔だなと思ったことありませんか?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
あります…
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
実はブロックツールバーの表示位置は変えられます。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
なんだって!?
スタイリッシュなのにたくさんの機能があるブロックツールバーですが、
「使いにくい」「すぐ上のブロックが見えなくて邪魔」「いつもブロックの上にあるのに消えた」
という経験ありませんか?
ブロックツールバーは編集画面の一番上に固定することができます。使いにくい場合はそこへ移動して、消えてしまったと思ったときは一番上を探してみましょう。
ブロックツールバーを上に固定するときは、「トップツールバー」を使いましょう!
![ブロックツールバーはブロック一つ分(広めの一行)なので、すぐ上にあるブロックを隠してしまう](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h44_45.png)
![ブロックツールバーはブロック一つ分(広めの一行)なので、すぐ上にあるブロックを隠してしまう](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h44_45.png)
![トップツールバーを使用することでブロックツールバーが上部へ移動して、一つ上のブロックが見えるようになった](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h48_23.png)
![トップツールバーを使用することでブロックツールバーが上部へ移動して、一つ上のブロックが見えるようになった](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h48_23.png)
トップツールバーは編集画面右上の「公開」などのアイコンの一番右側にある「
「トップツールバー」をクリックしてチェックすることで、ブロックツールバーが編集画面上部に固定表示されます。
![右上の縦の三点リーダーを選択するとメニューが開くので、一番上の「トップツールバー」をクリックする
そうすれば、ブロックツールバーが上部に固定される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h57_33-1-1024x245.png)
![右上の縦の三点リーダーを選択するとメニューが開くので、一番上の「トップツールバー」をクリックする
そうすれば、ブロックツールバーが上部に固定される](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_14h57_33-1-1024x245.png)
編集画面上部の固定表示を解除したい場合は、先ほどつけたチェックをもう一度クリックすることで解除できます。
![トップツールバーをもう一度クリックするとチェックが外れ、ブロックツールバーがブロックの真上に移動する](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h04_15-1024x287.png)
![トップツールバーをもう一度クリックするとチェックが外れ、ブロックツールバーがブロックの真上に移動する](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h04_15-1024x287.png)
選択しているブロックに集中したいときは、「スポットライトモード」を使いましょう!
![選択しているブロック、選択していないブロック共に黒字で表示されている](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h10_07.png)
![選択しているブロック、選択していないブロック共に黒字で表示されている](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h10_07.png)
![選択されているブロックだけが黒字、選択されていないブロックはグレーで表示されている](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h11_36.png)
![選択されているブロックだけが黒字、選択されていないブロックはグレーで表示されている](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h11_36.png)
スポットライトモードは編集画面右上の「公開」などのアイコンの一番右側にある「
「スポットライトモード」をクリックしてチェックすることで、選択しているブロック以外の文字色が薄くなり、選択しているブロックが目立ち、わかりやすくなります。
![トップツールバーの下にある「スポットライトモード」をクリックすると、選択されたブロックだけ](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h17_50-1024x343.png)
![トップツールバーの下にある「スポットライトモード」をクリックすると、選択されたブロックだけ](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h17_50-1024x343.png)
スポットライトモードを解除する場合は、先ほど同じようにチェックをもう一度クリックすることで解除できます。
![スポットライトモードをもう一度クリックするとチェックが外れ、全ての文章ブロックの文字色が黒くなる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h36_06-1024x356.png)
![スポットライトモードをもう一度クリックするとチェックが外れ、全ての文章ブロックの文字色が黒くなる](https://techkoya.com/wp/wp-content/uploads/2022/09/2022-09-20_15h36_06-1024x356.png)
まとめ
今回は「ブロックツールバー」の紹介をしました。
ブロックツールバーとは、「選択したブロックの細かい設定をするためのバー」です。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
今回は以下の7つを紹介しました。
- 選択しているブロック
- 現在選択しているブロックのアイコンが表示されて、他のブロックに変更することもできる
- ドラッグして移動
- 矢印をクリックして上下に移動
- ブロックを自由に移動することができる
- テキストの配置
- 左寄せ、中央寄せ、右寄せから選択できる
- 太字
- イタリック
- 選択した部分を太字、斜めにできる
- リンク
- サイト内、他サイトのURLを貼り付けることができる
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
また、ブロックツールバーをより使いやすくするためのオプションを2つ紹介しました。
- トップツールバー:ブロックツールバーを編集画面上部に固定する
- スポットライトモード:選択しているブロックだけをわかりやすく表示する
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
いっぱい知識が増えたね!
次回は、今回紹介していない「インライン画像」や「文字色の変え方」などの紹介をするので、お楽しみに!
質問などあれば気軽に書き込んでくださいね♪