ブロックエディタの使い方入門!ブロックの作り方【WordPress初心者・SWELL】

こんにちは、おゆ会です。

ブロックエディタでは、「ブロック」を作ることで記事を書いていきます。

テキストを入力したい場合は、「文章を入力、または / でブロックを選択」と表示されている空白の箇所(「空白ブロック」とも)でそのまま文字を入力すると、「段落ブロック」として文章が作成できます。

見出しやリストなど特定の表現をしたい場合は、その特定のブロックを作ります。

例えば、箇条書きリスト(ul)や番号付きリスト(ol)を作りたい場合は「リストブロック」、見出し(h2、h3、など)を作りたい場合は「見出しブロック」を作成します。

そしてブロックを作る方法は、3通り(+α)です。

この記事では、そのブロックの作り方を解説していきます。

目次

「ブロックの追加」ボタンでリストブロックを作る

  1. 編集画面の上部ツールバーにある「+のマーク(ブロックの追加)」
  2. 編集画面の空白ブロックの右端にある「+のマーク(ブロックの追加)」
  3. ブロックとブロックの間に表示される「+のマーク(ブロックの追加)」

をそれぞれクリックすると、「ブロック」が作成できます。

どれも同じブロックの追加ボタンですが、使い勝手に少し違いがあります。

実際に使ったときの感じと合わせてそれぞれの方法をもう少し掘り下げていきます。

編集画面の上部ツールバーのブロックの追加ボタンを使ってブロックを作る

編集画面の上にあるツールバーの左にある「青い四角形に+のマーク」のブロックの追加ボタンを使うと、編集画面左側にブロックの一覧が表示されるようになるので、その中から作りたいブロックを選択します。

「ブロック」の他には、「パターン」と「再利用可能(環境によっては初期状態で表示されていない場合もあります)」というタブが表示されますが、これはよく使うブロックの組み合わせを登録したり、カスタマイズして便利に使うことができます。(今回はブロックの追加がテーマなので使い方は省略します。)

この方法で表示されるブロックの一覧は、「テキスト」「メディア」「デザイン」「SWELLブロック(SWELLを導入しているとここからデザインされたボタンやふきだしなどを追加できます)」「ウィジェット」「埋め込み」に分類されていて、全てのブロックが確認できます。

一覧画面を呼び出したい場合は、この方法が一番早いです。

編集画面の空白ブロックの右端にあるブロックの追加ボタンを使ってブロックを作る

「文章を入力、または / でブロックを選択」と表示されている「空白のブロック」を選択すると、右端に「黒い四角形に+のマーク」のブロックの追加ボタンが表示されます。

このボタンを押すと、「使う頻度が高い6つのブロック」が表示されるのでそこから選択することができます。

環境によって表示される項目が違ったり変わったりしますが、見出しブロックや、画像ブロック(画像の挿入)などのよく使うブロックはだいたい表示されているかなと思われます。

その他に「ブロックの検索」「すべて表示」という項目も表示されます。

ブロックの検索は、ブロックの名前を入力すると該当するブロックタイプを絞り込んで表示させてくれます。

すべて表示は、編集画面の上にあるツールバーの左にある「青い四角形に+のマーク」のブロックの追加を押した場合と同じように編集画面左側にブロックの一覧が表示されます。

ブロックとブロックの間に表示されるブロックの追加ボタンを使ってブロックを作る

文章がなぞなぞみたいになってしまいましたが、画像をご覧いただくとわかっていただけると思います。

この機能は、すでに作成済みのブロックとブロックの間に、新しい別のブロックを挿入したいときに使います。

表示される内容や使い方は、右端にあるブロックの追加ボタンからブロックを作る場合と同じです。

「スラッシュコマンド」でブロックを作る

編集画面の空白のブロックで「スラッシュコマンド」という機能を使って「/ブロック名(←作りたいブロックの名前)」という文字を入力してブロックを作ります。

スラッシュコマンドでは、スラッシュの後に入力した文字を含むブロックが表示されるのでブロック名の一部だけを入力するのでも大丈夫です。

単に「/」だけを入力するとブロックがピックアップされるので、「/」のみでブロックを呼び出すこともできます。

個人的には、スラッシュコマンドは普段使わない機能を検索して探すときに使っています。

「ブロックタイプまたはスタイルを変更」で段落ブロックを目当てのブロックに変換する

段落ブロックとして入力した文字を、ブロックツールバーの「¶(段落マーク)」にマウスカーソルを合わせたときに現れる「ブロックタイプまたはスタイルを変更」をクリックして目当てのブロックに変換する方法です。

こちらは、文章を編集中にふいに箇条書きにしたくなったときや、テキストエディタなどであらかじめ下書きしたものをコピーアンドペーストして入力する場合などで使います。

先に文字を入力してから後で見出しにするというのもよくある使い方ですね。

私は、TeraPad(テキストエディタ)や、チャットワークのマイチャットに思いついたことなどを書き留めているので、コピペしてブロック変換するこの方法はよく使います。

段落から変換できるブロックは以下の7通り(SWELLの場合は8通り)です。

段落ブロックから変換できるブロックタイプ

  • 見出し
  • リスト
  • ふきだし(SWELLの場合)
  • 引用
  • グループ
  • 整形済みテキスト
  • プルクオート

(おまけ)HTMLコードを空白ブロックにコピペしてブロック化する

ブロックエディタとしての使い方というわけではありませんが、リストタグなど一部のHTMLコードを何も入力されていない空白のブロックにコピペする方法でもブロックを作ることができます。

別のソフトで作成されたページの文章や、HTMLコード化されている文章をそのまま採用する場合などで、限定的に使える方法です。

ただし、対応しているタグとそうでないタグがあるので、あくまでもおまけです。

ブロック一覧で使わないブロックを非表示にする方法

ブロック一覧には利用可能なブロックが全て表示されるので、ブロックエディタに慣れてくるとお目当てのブロックを探すのが面倒に感じることがあると思います。

そんなときは、編集画面の上にあるツールバーの右にある「…(点が縦にならんでいるボタン)」から「ツール」の「ブロックマーネージャー」を開いて項目のチェックを外すと、ブロック一覧に表示されないようにすることができます。

このブロックマネージャーから非表示にしたブロックは、ブロック一覧の他に「よく使うブロック」「ブロックの検索」「スラッシュコマンド」からも表示されなくなり呼び出せなくなります。

もしも使いたいブロックが表示されなくなったときは、ブロックマネージャーを開いて確認してみるというのは覚えておくといいかもしれません。

まとめ

ブロックの作り方についてですが基本操作以外のノウハウとしては、使いたいブロックが分からないときは、一覧表示やブロックの検索を使うということを覚えておけば大丈夫です。

どの方法を使うかですが、実際に記事を書いたり作業をしていると、よく使うブロックがだいたい固まってくるのでそのあたりを踏まえて、自然と使いやすい方法を自身で選ぶようになると思いますので、あまり深く考えずにやってみるのがコツかなと思います。

この記事を書いた人

おゆ会 おゆ会 ウェブ制作コンサル

やればできるという気持ちを支える土台作りで、「"難しいこと"を"新しいチャレンジ"に変える」ということを、仕事・プライベート共通のテーマにしています。

このサイトでは、自分でホームページを用意したいと思っている人、予算が取れないけど新しいことをはじめたい人のために、無料で情報公開を行っています。

ホームページ制作の仕事は今年で14年目。
最近は運用コストの低いオンラインサロンの構築や運営やサポートもしています。

仕事では、あなたに最適化した情報発信に関するご相談に対して、あなたの視点でお答えしています。ご相談・ご依頼お待ちしています。

ご相談・お問い合わせはこちら

目次
閉じる