初心者向けブロックエディター講座

初心者向け ブロックエディター講座 1:メニュー&ツールバー編

「売れる」ウェブサイトを手に入れるため、最初に知っておくべきこと
成果の出ている「売れる」ウェブサイトが持つ、5つの要素をご存じですか?ウェブサイトを作るなら、まず初めにこれを確認して下さい。
Table of Contents

「「初心者でもWordPressサイトを自作出来る」と言っておきながら、操作方法の説明がありませんけど…」と言う至極ごもっともなご指摘を頂戴しました。申し訳ありません。

そこで、初心者の方向けに「 ブロックエディター講座 」を提供することと致します。第1回目はWordPress標準エディター「ブロックエディター(Gutenberg)」のメニューとツールバーについて解説します。

使用頻度が高い機能に絞って使い方や活用方法を解説していきますので、コンテンツ作成時のマニュアルとして活用頂ければ幸いです。

編集画面各部の名称

ページの種類(固定ページ/投稿、他)を問わず、ブロックエディターの編集画面は下図の構成となります。

初心者向けブロックエディター講座①各部説明

各々の役割は下記の通りです。

※このテーブルは、横にスクロールします。

no. 名称 表示場所 主な用途
1 トップメニュー 画面上部 ブロック呼び出し、ページの保存/プレビュー/公開、詳細設定呼び出し等
2 サイドバー 画面右側 エディター設定、投稿設定、各ブロックの詳細設定
3 ツールバー 画面中央(上段に固定表示可能) 各ブロックの編集/調整
4 ブロックコンテンツ 画面中央 コンテンツ入力エリア

私たちはブロックコンテンツを組み合わせてコンテンツを作成していきますが、作成/編集作業をサポートしてくれるのがトップメニューやサイドバーに表示される各種メニューです。

まずはトップメニューから解説していきます。

トップメニューの要チェック項目(3項目)

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site

ブロックエディターのトップメニューには、10個のメニューが表示されています。内容は下記の通りです。

※このテーブルは、横にスクロールします。

no. 項目 機能 利用頻度 備考
1 ブロックの追加 ブロックを追加する ブロックコンテンツ上でも追加可能
2 モード 編集/選択モードを切り替える  
3 元に戻す/やり直す 編集内容をもとに戻す/やり直す  
4 詳細 文字数や見出し、段落などを確認出来る  
5 アウトライン ブロック単位でアウトラインを確認出来る  
6 下書き保存 ページを保存する 公開後は「下書きへ切り替え」に変わる
7 プレビュー ページのプレビューを表示する  
8 公開 ページを保存して公開する 公開後は「更新」に変わる
9 設定 サイドバーの表示/非表示を切り替える  
10 オプション オプションメニューを表示する  

ざっと見た感じ、ブロックの追加や保存、プレビューに関する項目はすぐにイメージが湧くと思います。ここで覚えておいて欲しいのは、利用頻度が「中」の3項目。「設定」と「オプション」、そして「アウトライン」です。

①設定

「設定」はクリックするたびにサイドバーの表示/非表示が切り替わりますが、サイドバーは原則表示させておくようにして下さい。その理由は、サイドバーにブロックの詳細設定が表示されるから。サイドバーが非表示だと、当然ながら詳細設定を触ることは出来ません。

②オプション

「オプション」をクリックすると、オプションメニューがサイドバーに表示されます。オプションメニューの中には「コードエディター」や「再利用ブロックの管理」など、困ったときに使う項目が含まれています。オプションメニューの存在を忘れないようにして下さい。

③アウトライン

「アウトライン」は、ブロック単位でアウトラインを確認出来る機能です。カラムやカバーなど、複数ブロックの集合体の編集時に絶大な威力を発揮します。文章だけでは分からないと思うので、図解入りで解説します。

例えば、このようなカラムを使うとします。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site

カラムの表示位置を変えたり、背景色を入れたりしたいと思ったら、カラムを全選択する必要があります。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site
カラムが全選択された状態。青い枠で全てのカラムが囲まれている

が、しかし。「これは作業じゃなくてくじ引きなのか?」と疑いたくなるくらい全選択出来ません。特にマウス操作はダメです。ブロックが少ないうちはマウスを使わずにカーソルキーを使えば選択出来ますが、ブロックが増えてくると非常に面倒になります。

そんな時にアウトラインをクリックして表示されたブロック(ここではカラム)をクリックすると一発で全選択出来ます。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site
アウトラインを開いた状態。カラムブロックが上、3分割されたブロックが下に階層表示されている
初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site
1番上の「カラム」をクリックすると、カラムが全選択される

今後、セールスページを複数作っていくときに必ずお世話になるのがカラムやカバーです。アウトラインの使い方を覚えておけば、カラムの編集時の時短とストレス軽減に大きく貢献してくれます。

オプションメニューの要チェック項目(2項目)

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site

メインメニュー配下の各項目は、基本的にクリックすれば目的が達成出来るシンプルなものがほとんどでした。それに対して、オプションメニューは選択後にあれこれ選択や設定を行う必要があります。ここでは、使用頻度の高いオプションメニュー2つの使い方について解説します。

①コードエディター

「コードエディター」は、直接コードを編集するときに使います。利用頻度はそう多くはありませんが、例えば下記のようなケースでは通常の「ビジュアルエディター」から「コードエディター」に切り替えて作業する必要があります。

  • ウィジェットにバナーやボタンを設置する場合
  • 投稿やページの表示がおかしい場合(不具合の原因を修正/削除)
  • 「クラシック版の段落」というブロックを使ってコンテンツを追加する場合※

【※注記】:「クラシック版の段落」の使用時には必ずコードエディターを使わなければならないということではないが、コードエディターを使った方が速くて確実に作業出来る。

「コードエディター」の使い方

トップメニュー右端の「オプション」をクリックします。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site


サイドバーにオプションメニューが表示されるので、「コードエディター」をクリックします。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site


作業を行い、終わったらトップメニューの下に表示される「コードエディターを終了」をクリックします。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site


ビジュアルエディターに戻ります。これが一連の流れとなります。

②すべての再利用ブロックを管理

「すべての再利用ブロックを管理」は、その名の通り再利用ブロック※の管理に用いる項目です。不要となった再利用ブロックを削除したり、テンプレとしてより使いやすい内容に編集したり、という場面で使います。

【※注記】:「再利用ブロック」については、ツールバーの所で解説します。

「すべての再利用ブロック」を管理の使い方

トップメニュー右端の「オプション」をクリックし、オプションメニューを表示させます。そして「すべての再利用ブロックを管理」をクリックします。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site


「再利用ブロック」画面が表示されるので、必要な作業を行って下さい。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site

作業が終わったら、「再利用ブロック」画面を閉じます。これが一連の流れとなります。

「再利用ブロック」画面は別画面なので、そのまま移動すると作業内容が保存されません。あらかじめ作業内容を保存しておくか、またはCtrlキーを押しながら「再利用ブロック」画面に移動するようにしましょう。

ブロックツールバーの要チェック項目(6項目)

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site

ブロックツールバーは、追加したブロックの基本的な編集や調整を行うためのメニューを表示してくれます(詳細設定は、サイドバーに表示されます)。ここでは、作業に欠かせない基本的な項目を6つ解説していきます。

①ブロックタイプまたはスタイルを変更

段落を見出しに変える、リストを箇条書きから番号付きに変える…こうした「作業時のよくある変更」を行う際にこのツールを使います。

表示場所はツールバーの左端で、現在使用しているブロックのアイコンになっています。アイコンをクリックすると変更可能なブロックが表示されるので、変更したいアイコンを選択して下さい。

②ドラッグ

ブロックを上下に移動したいときにこのツールを使います。「移動」は都度クリックしなければなりませんが、ドラッグの場合は名前の通りドラッグし続ける限り移動を続けます。

表示場所はツールバーの左から2番目で、6つのドットのアイコンになっています。移動したいブロックを選択(クリック)してからアイコンをドラッグすると、上下に移動出来るようになります。後で出てくる「移動」と同じく、「複製」との組み合わせで利用する頻度が高いツールです。

【注記】オプションメニューの「トップツールバー」を選択してツールバーをトップメニューと同じ上段に固定表示すると「ドラッグ」ツールは表示されなくなってしまいます。「ドラッグ」を使いたい場合は一時的に「トップツールバー」を解除するなど、状況に応じた対応が必要です。

③移動

ブロックを上下に移動したいときにこのツールを使います。表示場所はツールバーの左から3番目で、上下の矢印アイコンになっています。移動したいブロックを選択してから移動したい方向の矢印をクリックすると、クリックした分だけブロックが移動します。「複製」との組み合わせで利用する頻度が高いツールです。

④複製

ブロックを複製する際に使います。あらかじめ同じブロックを使うと分かっている場合、複製して必要箇所だけ修正すれば時短につながるしミスも少なくなります。時短とミス防止に貢献してくれるツールです。

表示場所はツールバーの右端にある3つのドットのアイコン「オプション」の配下にあります。複製したいブロックを選択(クリック)してから「複製」リンクをクリックすると、選択したブロックが複製されます。

⑤ブロックを削除

不要なブロックを削除する際に使います。表示場所はツールバーの右端にある3つのドットのアイコン「オプション」の配下にあります。削除したいブロックを選択(クリック)してから「ブロックを削除」リンクをクリックすると、選択したブロックが削除されます。

⑥再利用ブロックに追加

使用頻度が高く、かつ編集に時間が掛かるブロックを使い回したいときに使います。再利用ブロックとして登録しておくと、ブロックの一覧からすぐに呼び出せるようになります。

時短につながり、ミスも少なくなるので是非活用してみて下さい。追加方法は下記の通りです。

「再利用ブロック」の追加方法

  1. 再利用ブロックとして登録したいブロックを選択(クリック)
  2. ツールバーの「オプション」をクリックし、「再利用ブロックに追加」を選択(クリック)
  3. ブロックに名前を付け、「保存(更新)」ボタンをクリックすれば登録される。

「再利用ブロック」利用時の注意点

再利用ブロックを呼び出したら、必ずツールバーに表示される「通常のブロックへ変換」アイコンをクリックしましょう(下図参照)。クリックしないと再利用ブロックが上書きされてしまいます。

初心者向け ブロックエディター講座 1:メニュー&ツールバー編 DIY WordPress Site
枠で囲った「通常のブロックへ変換」をクリックしないとデータが上書きされてしまうので注意

ブロックエディター講座一覧

ブロックエディターの「メニュー」と「ツールバー」で最低限押さえておきたい項目の解説は以上です。次のコンテンツではブロックを追加する方法や、利用頻度の高いブロックとその活用方法をお教えします。

テキスト(文字)入力でよく使うブロック

「テキスト」というカテゴリーに属するブロックは全10種類ありますが、その中でも使用頻度が高い5つのブロックと活用方法などを下記コンテンツにまとめましたのでご覧下さい。

初心者向け ブロックエディター講座 2:テキスト編:DIY WordPress Site

画像表示/装飾でよく使うブロック

画像や音声、動画表示に関するカテゴリー「メディア」、そしてデザイン性を高めるカテゴリー「デザイン」。これらのカテゴリーの中で、使用頻度が高い5つのブロックと活用方法などを下記コンテンツにまとめましたのでご覧下さい。

初心者向け ブロックエディター講座 3:メディア&デザイン編:DIY WordPress Site


集客やセールスのスピードを上げたい。精度を上げたい…とお考えなら、出来ることは自分でやるのが一番です。 全てが難しい訳ではありません。あなた自身でやれることは、想像以上に多いものです。

当サイトのコンテンツは、あなた自身が出来る内容にフォーカスしています。 これらを活用して、売れるウェブサイトを作り上げて下さい。

もし、「そう言われても、本当に自分でやれるの?」と感じているのなら…STRATEGY SUPPLIERが運営する「Output STUDIO」に参加して下さい。 「Output STUDIO」は売れるサイトを作り・育てていくための訓練場であり、コミュニティです。

但し、マンツーマンレッスン主体の会員制サービスのため、いつでも参加出来る訳ではありません。興味をお持ちなら、下のボタンをクリックして詳細をご確認下さい。

Recommends
あなたのメッセージやアイディアを形にする会員制スタジオ「Output STUDIO」がオープン。 ウェブページや動画など、ターゲットに届ける最終工程をしっかり形に仕上げ、顧客や見込み客に届けることが出来ます。 集客やセールスのスピード感が高まるので、数多くの施策を打てるようになります。また、都度外注するより圧倒的に安いので、コストの有効配分にもつながります。 「Output STUDIO」は会員限定での提供となります。詳細は公式サイトでご確認下さい。
Recent posts
これは見出しです
Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

Table of Contents

集客やセールスの「資産とスキル」が手に入る制作室
集客やセールスのスピードと精度を上げ、無駄なコストを抑えたいとお考えなら、STRATEGY SUPPLIERが運営する「Output STUDIO」に参加して下さい。 低コストでウェブサイトという「資産」と、構築・運用「スキル」を手に入れることが出来ます。 「Output STUDIO」は、高品質なサポートを提供するため会員制とさせて頂いており、参加人数を制限しています。 募集状況など、詳細は下のボタンをクリックしてご確認下さい。
松浦 臣吾
松浦 臣吾
マーケティングプロデューサー/コピーライター。STRATEGY SUPPLIER在籍。神奈川県在住。継続性にフォーカスしたマーケティング戦略の立案と実践を得意とする。成長し続けるビジネスの設計図「Business Design Method」を公開し、ビジネスオーナーへの精力的なサポートを行っている。
関連コンテンツ
Wordfence WAFトラブル対応履歴(202112)

Wordfence WAF設定で発生したトラブル事例と、その対処方法を紹介します。WAFのエラーが出っぱなしでお困りのWordfenceユーザーの方には、このコンテンツが問題解決につながるかもしれません。

Read More »