WordPressブロックエディタの使い方!HPに使えるブロック26選

この記事のレベル

初心者 (4.0)
重要度 (3.0)
難しさ (2.5)

こんにちは、編集長のカワウソです!

「WordPressでページを作成しようとしたけど、使い方がいまいち分からない……」と悩んでいませんか?

現行のWordPressでは、テキストや画像などのコンテンツをブロック単位で管理していく、「ブロックエディタ」という編集機能を使うのが基本です。
ブロックエディタを使えば、初心者の方でも簡単にページを作成できます。

とはいえ、初めてWordPressを使う方にとっては、分からないことも多いはず。

そこで今回は、ブロックエディタの基本的な使い方を解説します。

カワウソ

この記事は次のような人におすすめ!

  • WordPressで会社のホームページを作る人
  • ブロックエディタの使い方を知りたい人
  • 会社ホームページ作りに役立つブロックの種類を知りたい人

この記事では、あらかじめWordPressに用意されているブロックのうち、ホームぺージ制作に使用する可能性が高いものに厳選して、使い方を解説します。

この記事を読めば、ブロックエディタの基本操作はもちろん、「どんなときに、どのブロックを選べばよいのか」が分かるため、ホームページ制作がはかどりますよ。

また、記事の後半では、「ブロックを増やせる無料のプラグイン」も紹介しているので、ぜひ最後まで読んでみてください。

それではどうぞ!

ブロックエディタの基本的な使い方

最初に、ブロックエディタの基本的な使い方を解説します。
ブロックエディタを使ってページを作成し、Web上に公開するまでの一連の流れを見てみましょう。

なお、操作環境は以下のとおりです。

WordPress:6.2
テーマ:Twenty Twenty-Three(デフォルトのテーマ)

WordPressのバージョンはもちろん、使用するテーマやプラグインなどによって、画面操作が多少異なることもあるので、あらかじめご了承ください。

テーマやプラグインについては、それぞれ以下の記事で解説しています。

ブロックエディタの編集画面の見方

まず、ブロックエディタの編集画面の見方を知っておきましょう。

まずは、WordPressのメインナビゲーション(左のサイドバー)から、「固定ページ > 新規追加」をクリックしてください。

固定ぺージ > 新規追加

すると、固定ぺージにおける、ブロックエディタの編集画面が開きます。

ここでは、最低限知っておきたい、ボタンやエリアなどの役割を解説しますね。

ブロックエディタ編集画面の説明
番号 項目 説明
1 「画面左上」と「画面中央」の2か所に設置されており、ブロックを追加するときに使います。
2 ページの編集エリア ここにブロックを追加していき、ページを作成します。
3 ブロック設定サイドバー
(設定カラム)
選択したブロックの各種設定を行うときに使います。選択したブロックによって、設定項目が変わります。
4 下書き保存 ページを下書き保存するときに使います。
5 プレビュー ページをプレビューするときに使います。
6 公開 ページをWeb上に公開するときに使います。
7 設定 ブロック設定サイドバーの表示/非表示を切り替えるときに使います。
8 オプション ブロックエディタの表示モードや、エディタの種類を切り替えるときに使います。

ブロックの基本操作3つと+αの豆知識

次に、ブロックの基本操作を3つ解説します。

ブロックの基本操作
  1. ブロックの追加
  2. ブロックツールバーの操作
  3. ブロック設定サイドバーの操作

また、ぜひ知っていただきたい+αの豆知識として、「リスト表示」も解説しますね。

ブロックの追加

ブロックは左上、もしくはぺージ編集エリア内の「+」から、追加することが可能です。

「+」をクリック

以下は、左上(1)の「+」をクリックしたときの画面で、すべてのブロックが表示されています。

ブロックの選択

なお、ブロックは「テキスト」や「メディア」などの、カテゴリごとに分けられています。

そのほか、検索窓からブロックを探すことも可能です。

ぺージ編集エリア内(2)の「+」をクリックした場合は、いくつか抜粋されたブロックが表示されます。

ブロックの選択

この抜粋されたブロックは、直近使用したものに都度変化しますよ。

こちらでも、検索は可能です。

なお、「すべて表示」をクリックすると、ブロックの一覧が表示されます。

ブロックツールバーの操作

ブロックの追加後(または選択したとき)には、以下のような「ブロックツールバー」が現れます。

ブロックツールバーの操作説明

ブロックツールバーの設定項目は、追加(選択)したブロックによって変わります。

ここでは、「見出しブロック」を例に、共通の設定項目について解説しますね。

番号 項目 説明
1 ブロックの種類 アイコンにより、ブロックの種類が表示されています。
クリックすることで、ブロックの種類を変換できます(関連ブロックのみ)。
2 ドラッグ ブロックを任意の場所までドラッグ(移動)できます。
3 上に移動/
下に移動
クリックすることで、上や下にブロックを移動できます。
4 オプション ブロックを複製したり、削除したりできます。
そのほか、ブロックをHTMLとして編集することも可能です。
ブロックツールバーのオプション

カワウソ

ブロックとブロックの間に、新しいブロックを追加するときは、このオプションの「前に挿入」や「後に挿入」が便利です。

ブロック設定サイドバーの操作

ブロックの設定は、画面右側の「ブロック設定サイドバー」からも可能です。

たとえば、「見出しブロック」であれば、色やサイズを指定できます。

ブロック設定サイドバーの説明

リスト表示を活用しよう(+αの豆知識)

ブロック同士を組み合わせたり、重ね合わせたりすると、ぺージ編集エリア内で特定のブロックのみを選択するのが、難しい場合があります。

そんなときにおすすめなのが、「リスト表示」です。

参考に、以下をご覧ください。

リスト表示の説明

画面左上(1)の「ドキュメント概観(三本線アイコン)」をクリックすると、各ブロックがリスト形式で表示されます。
ここで編集したいブロックを選択することが可能です。

また、「オプション(2)」をクリックすれば、ブロックの複製や削除もできます。

ブロックエディタでページを作成・公開してみよう

では実際に、ブロックエディタを使って、ページを作成および公開してみましょう。

記事作成の流れ
  1. タイトルを書く
  2. 見出しを追加する
  3. 本文(テキスト)を書く
  4. 下書き保存する
  5. ページを公開する

タイトルを書く

まずは、ページのタイトルを書きます。

「タイトルを追加」をクリックすればカーソルが合うので、あとは文字を入力するだけです。

タイトルを追加

ここでは「会社概要」と入力してみますね。

見出しを追加する

次に、見出しを追加します。
編集エリアにある「」から、「見出しブロック」を選んでクリックしてください。

見出しブロックを追加

ここでは「事業内容」と入力してみますね。

本文(テキスト)を書く

本文(テキスト)を書くときには、「段落ブロック」を用いるのが一般的です。

とはいえ、わざわざ「+」から「段落ブロック」を追加する必要はありません。
「ブロックを選択するには「/」を入力」に直接文字を入力すれば、結果的に「段落ブロック」を使った状態になります。

段落ブロックでテキストを書く

なお、改行や段落の追加については、あとで解説する「会社のホームページ制作に使えるブロック26選」のなかの「段落ブロック」で解説しますね。

下書き保存する

固定ぺージの編集内容は、定期的に自動保存されます。

しかし、あくまでも補助的な機能であるため、定期的に手動で「下書き保存」する癖をつけておくとよいです。

下書き保存
メモ

下書き保存したあとは、画面右側の設定カラム(固定ページ)から、「URL(パーマリンク)」を変更しましょう。

URL(パーマリンクの変更)

デフォルトでは、タイトルが挿入されます。
日本語のタイトルだと、URLが以下のような表示になり、扱いづらくなります。

パーマリンクを日本語にした場合の表示例

たとえば会社概要ページなら「company」など、内容が分かる英単語がおすすめです。

パーマリンクは英単語の使用がおすすめ

ページを公開する

ページが完成したら、Web上に公開しましょう。
画面右上の公開から、できます。

公開

なお、公開をクリックすると、「公開してもよいですか?」と確認が入ります。
問題がなければ、再度公開をクリックしましょう。

会社のホームページ制作に使えるブロック26選

WordPressには、デフォルトで約100種類のブロックがあります。

ここでは、会社のホームページ作成に使えるブロックを、カテゴリごとに厳選してご紹介しますね。

テキスト系ブロック5種

最初に紹介するのは、テキスト系のブロックです。

テキスト系ブロック
  1. 見出しブロック
  2. 段落ブロック
  3. 整形済みテキストブロック
  4. リストブロック
  5. 引用ブロック

見出しブロック

「見出しブロック」は、見出しを追加するときに使います。

見出しのレベルは、ブロックツールバーでH1〜H6まで選ぶことが可能です。

見出しブロック

基本的には、コンテンツの階層構造に応じて、H2以下(H2〜H6)を選びましょう。

見出しブロックの活用例

というのも、WordPressでは、基本的にタイトルがH1として設定されます。

1ページのなかにH1を複数使うこと自体は、SEO(検索エンジン最適化)として、問題ありません(参考:English Google Webmaster Central office-hours from September 27, 2019)。

しかし、見出しタグは階層構造を考慮して用いるのが基本です。

タイトルと同じレベルの見出し(H1)が本文内に存在すると、階層構造として成り立たなくなるため、ユーザーやGoogleにとって分かりづらいページになってしまいます。

段落ブロック

「段落ブロック」は、本文にテキストを入力するときに使います。

前述のとおり、わざわざ「+」から「段落ブロック」を追加する必要はありません。

「ブロックを選択するには「/」を入力」に直接テキストを入力すると、自動的に段落ブロックが適用された状態になります。

※HTMLのソースコードには「<p>〜</p>」が入ります。

段落ブロック

テキストを改行するときは、キーボードの「Shift+Enter」を押します。
※HTMLのソースコードには「<br>」が入ります。

テキストの段落を変えるときは、キーボードの「Enter」を押してください。
すると、再度「ブロックを選択するには「/」を入力」が表示されるので、さきほどと同じように、そのまま文字を入力しましょう。

文字の色やサイズは、画面右側のブロック設定サイドバーから指定することが可能です。

ブロック設定サイドバーから色を変更可能

なお、段落内の特定の文字のみ色を変えたい場合は、あとで解説する「カスタムHTMLブロック」でHTMLコードを入力しましょう。詳しくは、のちほど解説します。

整形済みテキストブロック

「整形済みテキストブロック」は、「段落ブロック」同様に、本文にテキストを入力するときに使います。

ブロックを追加すると、以下のように表示されますよ。

整形済みテキストブロック

段落ブロックとの違いは、入力したとおりに改行や空白が表示される点です。

たとえば、「段落ブロック」は「Enter」を押すと、新しい段落(ブロック)が追加されます。
一方、「整形済みテキストブロック」は「Enter」を押すと、段落内で改行される仕様です。

また、「段落ブロック」が半角スペースを連続で入力しても、一つしか挿入されないのに対し、「整形済みテキストブロック」は入力した分だけ表示されます。

以下、全角と半角のスペースをそれぞれ8つ入れた場合における、「編集画面」と「実際の画面」の比較です。
「段落ブロック」のほうは、実際の画面ではスペースが1つ分(青色部分)に減っていますよね。

▼編集画面▼

段落ブロックと整形済みテキストブロックの比較(編集前)

▼実際の画面(プレビュー後)▼

段落ブロックと整形済みテキストブロックの比較(実際の画面)

一つの段落の中で改行を多く使う場合や、タイピングしたとおりに表示させたい場合は、「整形済みテキストブロック」が便利です。

リストブロック

「リストブロック」は、テキストを箇条書きするときに使います。

参考に、以下をご覧ください。
製品の特長を「段落ブロック(青枠)」と「リストブロック(赤枠)」で比較してみました。

リストブロックの使用例

カワウソ

「リストブロック(赤枠)」のほうが、すっきりまとまっていますね。

また、「リストブロック」に文字を入力した状態で「Enter」を押すと、リストが一つ追加されます。

そのほか、リストの2つ目以下を選択した状態で、ブロックツールバーの「インデント」をクリックすると、字下がりします。

▼インデント適用前▼

インデントの説明

▼インデント適用後▼

インデントの適用後

「リストブロック」は階層を示すことができるため、サイトマップぺージ(ホームページの構成をユーザーに伝えるためのページ)を作るときにも便利です。

実際の手順は、以下の記事で解説しています。

メモ

ほかにも、ブロックツールバーの一番左にある「リストを選択」から、「順序付きリスト」を選べます。ただ、テーマによって反映されない場合もあるので、一度チェックしてみてください。

順序付きリストの説明

引用ブロック

「引用ブロック」は、第三者のコンテンツを引用するときに使います。

以下の赤枠部分に「引用文」、青枠部分に「引用元」を記載する仕様です。
引用元がWebコンテンツの場合は、リンクを設置しましょう。

併せて、第三者のコンテンツを引用するときは、最低限のルールを知っておく必要があります。

報道、批評、研究等の目的で、他人の著作物を「引用」して利用する場合の例外です。例えば、以下のような行為が該当します。

  • 報道の材料として他人の著作物の一部を利用する
  • 自説の補強や他人の考え方を論評するために他人の著作物の一部を利用する

【条件】

  1. すでに公表されている著作物であること
  2. 「公正な慣行」に合致すること(例えば、引用を行う「必然性」があることや、言語の著作物についてはカギ括弧などにより「引用部分」が明確になっていること)
  3. 報道、批評、研究などの引用の目的上「正当な範囲内」であること(例えば、引用部分とそれ以外の部分の「主従関係」が明確であることや、引用される分量が必要最小限度の範囲内であること、本文が引用文より高い存在価値を持つこと)
  4. 「出所の明示」が必要(複製以外はその慣行があるとき)
    ※美術作品や写真、俳句のような短い文芸作品などの場合、その全部を引用して利用することも考えられます。

※美術作品や写真、俳句のような短い文芸作品などの場合、その全部を引用して利用することも考えられます。
※自己の著作物に登場する必然性のない他人の著作物の利用や、美術の著作物を実質的に鑑賞するために利用する場合は引用には当たりません。
※翻訳も可

(引用:文化庁「著作者の権利の制限(許諾を得ずに利用できる場合)」

ここで注目したいのは、「(2)カギ括弧などにより「引用部分」が明確になっていること」です。

カワウソ

当メディアでは、引用を上記のようなデザインにしています。はっきりと区別されていますよね。

たとえば、デフォルトのテーマ「Twenty Twenty-Three」では、「引用ブロック」を使っても見た目が大きく変わらないため、区別するのに工夫が必要です。

利用中のテーマにおいて、「引用ブロック」を使うとどのような見た目になるか、確認してみましょう。自社の著作物と引用部分とが、分かりやすく区別できているのかをチェックしてください。

なお、区別する方法として、以下の方法があります。

自分の著作物と引用部分を区別する方法の例
  • 引用符を用いる
  • イタリック体(斜体)にする
  • 背景色を付ける
メモ

「引用ブロック」を使うと、HTMLのソースコードに「引用タグ<blockquote>〜</blockquote>」がつきます。これにより、検索エンジンに対して「この部分は引用である」と伝えることが可能です。

注意

引用タグがなければ、検索エンジンに「コピーコンテンツ(低品質なコンテンツ)」と判定されるかもしれません。SEOとして不利な状況に陥るおそれがあるので、注意しましょう。

メディア系ブロック7種

次に、メディア系に属するブロックを紹介します。

メディア系ブロック
  1. 画像ブロック
  2. メディアとテキストブロック
  3. ギャラリーブロック
  4. カバーブロック
  5. 音声ブロック
  6. 動画ブロック
  7. ファイルブロック

画像ブロック

「画像ブロック」は、写真やイラストなどの画像ファイルを挿入するときに使います。

「画像ブロック」を追加すると、以下3種類の方法が表示されるので、状況に応じて使い分けてください。

画像ブロック
3種類の方法
  • アップロード:新しい画像をアップロードして使う
  • メディアライブラリ:すでにアップロード済みの画像ファイルから選んで使う
  • URLから挿入:URL(画像が置いてある場所)を指定して使う

なお、画面右側のブロック設定サイドバーから、ALTテキスト(代替テキスト)を入力したり、画像のサイズを変更したりできます。

ブロック設定サイドバーでALTテキストや画像のサイズの設定が可能
ALTテキストとは

画像が読み込まれなかったときに表示させるテキストのこと。Google 画像検索の結果に、コンテンツが表示される可能性を高める効果も期待できます(参考:Google 検索セントラル「Google 画像検索 SEO ベストプラクティス)」。

メディアとテキストブロック

メディアとテキストブロック」は、画像とテキストを横に並べて表示できます。

デフォルトでは、左側にメディア、右側にテキストを挿入できるようになっていますよ。
ブロックツールバーから、位置関係を変更することが可能です。

メディアとテキストブロック

参考に、以下をご覧ください。

  • 赤枠は、「画像ブロック」と「段落ブロック」を用いた例。
  • 青枠は、「メディアとテキストブロック」を用いた例です。
画像ブロック&段落ブロックとメディアとテキストブロックの比較

このように、「メディアとテキストブロック」を使えば、ホームぺージのデザインにバリエーションを持たせられます。

また、「メディアとテキストブロック」は、レスポンシブデザインに対応しています。

レスポンシブデザインとは

レスポンシブデザインとは、ユーザーのデバイスに応じ、ホームページの表示サイズを自動で変えるデザインです。レスポンシブデザイン対応のホームぺージは、パソコン、スマホ、タブレットなど、ありとあらゆるデバイスに最適化したぺージを表示できます。

以下のように、デフォルトの設定では、スマホだと縦に並べて表示されます。

メディアとテキストブロックのスマホ表示例

位置関係は、画面右側のブロック設定サイドバーから、変更することが可能です。

ブロック設定サイドバーからスマホでの表示を変更可能

ギャラリーブロック

「ギャラリーブロック」は、複数の画像を並べて表示するときに使います。

たとえば、会社の紹介写真をタイル状に並べて表示するときなどに役立つでしょう。

試しに、以下をご覧ください。

  • 赤枠は、「画像ブロック」で複数の画像を挿入した例。
  • 青枠は、「ギャラリーブロック」で複数の画像を挿入した例です。
画像ブロックとギャラリーブロックの比較

カワウソ

「ギャラリーブロック(青枠)」の方は、複数の画像を限られたスペースに収納できていますね。

カラム(列)の数は、画面右側のブロック設定サイドバーから変更できます。

ブロック設定サイドバーからカラム数を変更可能
メモ

特定の画像を選択するのが難しいときは、リスト表示がおすすめです(上記画像参照)。

なお、「ギャラリーブロック」もレスポンシブデザインに対応しています。
たとえば、3カラム(列)に設定した場合、スマホでは2カラム(列)で表示されますよ。

ギャラリーブロックのスマホ表示例

カバーブロック

「カバーブロック」は、画像の上にテキストを配置したいときに使います。

たとえば、見出しの背景に写真を入れたいときに便利です。

参考に、以下をご覧ください。

  • 赤枠は、「見出しブロック」で作った見出しの例。
  • 青枠は、「カバーブロック」を活用して作った見出しの例です。
見出しブロックとカバーブロックの比較

カワウソ

「カバーブロック(青枠)」のほうは背景画像がある分、見出しの内容がイメージしやすいですね。

なお、カバーブロックを挿入して背景画像を選んだあとは、次のような画面になります。

カバーブロックの使用手順
ポイント
  1. テキストを入力できます。デフォルトでは「段落ブロック」に設定されていますが、「見出しブロック」などに変更できます。
  2. 「〇」をドラッグすることで、画像の高さを変更できます。
  3. スタイル(Syles)を設定するためのタブです。
  4. オーバーレイの不透明度では、重ねた色の透明度を調整できます。デフォルトでは黒色が設定されており、背景画像に対して明暗をつけることが可能です。

「カバーブロック」は見出し以外にも、トップページのメインビジュアルを作るときにも役立ちますよ。

メインビジュアルとは

ファーストビュー(最初に表示される画面領域)にある、大きなイメージ画像のこと。

トップページやメインビジュアルについては、以下の記事で詳しく解説しています。

音声ブロック

「音声ブロック」は、音楽ファイルを挿入したいときに使います。

たとえば、代表挨拶ぺージに社長のインタビュー音声を掲載したり、ホームぺージを開いたときに自動でBGMが流れるようにしたりすることが可能です。

音声ファイルを指定すると、音楽プレイヤーが埋め込まれて、音声が再生できるようになります。

音声ブロックの使用説明

ページを開いた時点で音声が流れるようにする「自動再生」や、再生を繰り返す「ループ」は、画面右側のブロック設定サイドバーから設定できますよ。

動画ブロック

「動画ブロック」は、動画ファイルを挿入したいときに使います。

メモ

YouTube等で配信されている動画は、後述する「埋め込み系ブロック」がおすすめです。

たとえば、「動画ブロック」を使って、会社のCMや商品の使い方を解説した動画を配置してみてはいかがでしょうか。

以下は、「動画ブロック」で動画を追加したときの編集画面です。

ブロック設定サイドバーから各種設定が可能

再生や停止などのコントロールボタンは、自動で配置されます。

画面右側のブロック設定サイドバーでは、自動再生、ループ、ミュートなどを設定することが可能です。

ファイルブロック

「ファイルブロック」は、ドキュメントやPDFファイル等を配布したいときに使います。

たとえば、製品のパンフレットやマニュアルなどのデータファイルを、ユーザーがホームぺージからダウンロードできる状態にすることが可能です。

以下は、「ファイルブロック」でPDFファイルを挿入したときの画面です。

ファイルブロックの説明

デフォルトでは「インライン埋め込みを表示」がONになっていますが、注釈のとおり、ほとんどのスマートフォンやタブレットでは表示されないので、注意してください。

なお、ダウンロードボタンは、画面右側のブロック設定サイドバーから、表示/非表示を切り替えられます。

ブロック設定サイドバーから、ボタンの表示切替が可能

デザイン系ブロック7種

ここからは、デザイン系のブロックを紹介していきます。

デザイン系ブロック
  1. ボタンブロック
  2. カラムブロック
  3. 横並びブロック
  4. 縦積みブロック
  5. スペーサーブロック
  6. 区切りブロック
  7. グループブロック

ボタンブロック

「ボタンブロック」は、ボタンを設置するときに使います。
目立たせたいリンクは、ボタンにすると効果的です。

たとえば、お問い合わせフォームや申し込みフォームへのリンクに活用するとよいでしょう。

参考に以下をご覧ください。

  • 赤枠は、「段落ブロック」でテキストを入力したあと、リンクを設定した例。
  • 青枠は、「ボタンブロック」でボタンを設置した例です。
段落ブロックとボタンブロックの比較

カワウソ

やはり、ボタンのほうが分かりやすいですね!

以下は、「ボタンブロック」を挿入したときの編集画面です。

ボタンブロックの説明
ボタンブロックの編集方法
  1. ボタンに表示するテキストを入力できます。
  2. リンクを設定できます。
  3. ボタンのテキストや背景の色を変更できます。

なお、以下の記事ではボタン作成のポイントを解説しています。

カラムブロック

「カラムブロック」は、コンテンツを横並びで表示させたいときに使います。

このあと解説する「横並びブロック」とは異なり、レスポンシブデザインに対応しているのが特徴です。

「カラムブロック」を追加すると、以下の画面が表示されます。
ここでは、「3カラム:均等割」を選んでみますね。

カラムブロックの追加画面

以下のように、3つのカラム(列)が横並びに表示されました。
一番左の「」から、「画像ブロック」を追加してみます。

カラムブロックの左カラムに画像ブロックを追加

同じように、繰り返して「画像ブロック」を追加した画面が、以下のとおりです。

カラムブロックの説明
メモ

全体もしくは特定のカラムを選択するなら、リスト表示が分かりやすいです(1&2)。

カラム全体を選択すると、画面右側のブロック設定サイドバーに、「モバイルでは縦に並べる」が表示されます(3&4)。

デフォルトではチェックが入っており、以下のようにスマホでは縦並びになるので、求めるデザインに応じて切り替えてください。

カラムブロックのスマホ表示例

横並びブロック

「横並びブロック」は、文字どおり横並びのレイアウトを組みたいときに使います。

前項の「カラムブロック」とは異なり、スマートフォンのように画面幅が狭くなっても、横並びのレイアウトは維持されます。

以下、赤枠は「カラムブロック」、青枠は「横並びブロック」を使用した例です。

横並びブロックのスマホ表示例

カワウソ

「横並びブロック(青枠)」のほうは、画面の横幅に収まっている分、画像が縮小されていますね。

代わりに、画面幅からコンテンツがはみ出したときに、「行を折り返すかどうか」を選択できます。

横並びブロックでは、複数行に折り返す設定が可能

次に、以下をご覧ください。

横並びブロックの使用説明

2つ目以降のコンテンツを追加するときは、「横並びブロック」全体を選択したあとに表示される「+」をクリックします。

全体を選択しないと、この「+」は表示されないのでご注意ください。

メモ

リスト表示を活用すると操作しやすいです。

縦積みブロック

「縦積みブロック」は、縦積みのレイアウトを組みたいときに使います。

基本的な操作は、「横並びブロック」と同じです。

「カラムブロック」「横並びブロック」「縦積みブロック」を組み合わせると、さまざまなレイアウトを構成できますよ。

たとえば、以下の社内紹介は、「カラムブロック(赤枠)」の中に「縦積みブロック(青枠)」を配置したレイアウトです。

縦積みブロックとカラムブロックを組み合わせた例

「縦積みブロック」の中に、「画像ブロック」、「見出しブロック」、「段落ブロック」を使っています。

ぜひ参考にしてください。

スペーサーブロック

「スペーサーブロック」は、ブロック間に空白を入れたいときに使います。

ブロック間には、もともと空白が入っていますが、高さを調整できません。

「スペーサーブロック」なら、ブロック間に好きな高さの空白を入れることが可能です。

以下のように、空白の高さは「〇」で調整します。

スペーサーブロックの使用説明

画面右側のブロック設定サイドバーなら、空白の高さを数字で指定することが可能です。

区切りブロック

「区切りブロック」は、区切り線を入れたいときに使います。

コンテンツ同士の区別をはっきりさせたいときに、おすすめです。

区切りブロック

使い方は簡単で、区切り線を入れたいところに挿入するだけです。
画面右のブロック設定サイドバーから、スタイルを選んだり、色を変えたりできます。

ブロック設定サイドバーからスタイルや色を変更可能

グループブロック

「グループブロック」は、複数のブロックをグループ化したいときに使います。

たとえば以下では、見出しと段落がペアになっているため、移動させるときは一緒に動かしたいものです。こんなときにグループブロックを使います。

グループブロック

では、使い方を見ていきましょう。

グループブロックの使用手順
グループ化の設定方法
  1. ドキュメント概観(三本線のアイコン)をクリック
  2. キーボードの「Shift」を使って、複数選択
  3. ブロックツールバーのアイコンをクリック
  4. グループをクリック

これで見出しと段落が1つのグループになったので、一緒に移動させたり、まとめて消去したりできます。

グループブロック適用後

ウィジェット系ブロック4種

ここでは、ウィジェット系のブロックを紹介します。

ウィジェット系ブロック
  1. 検索ブロック
  2. ソーシャルアイコンブロック
  3. ショートコードブロック
  4. カスタムHTMLブロック
ウィジェットとは

サイドバーやフッターなどに、さまざまなパーツを追加できる機能のことです。WordPressメインナビゲーションの「外観」からアクセスできます。

デフォルトテーマ「Twenty Twenty-Three」には、別の「エディター」という機能が用意されているため、「ウィジェット」はありません。

利用中のテーマに「ウィジェット」があるか、確認してみてください。

なお、ウィジェット系といっても、固定ぺージや投稿ぺージでも使えるので、ぜひチェックしてみてください。

検索ブロック

「検索ブロック」は、検索窓を設置するときに使います。
ユーザーが検索窓にキーワードを入力して、ホームページ内を検索できるようにするものです。

検索ブロック

「任意のプレースホルダー…」に文字を入力しておくと、実際の画面で入力例が表示されます。ユーザーが検索窓の存在に気付きやすくなるので、おすすめです。

「キーワードで検索する」や「製品番号で探す」など、自社のホームぺージに合う入力例を表示させましょう。

なお、ブロックツールバーから、検索ラベル(検索という文字)を消したり、アイコンつきのボタンに変えたりできます。

ボタンの色は、画面右側のブロック設定サイドバーから指定することが可能です。

ブロックツールバーやブロック設定サイドバーで編集可能

ソーシャルアイコンブロック

「ソーシャルアイコンブロック」は、各種SNSのアイコンを設置したいときに使います。

Twitter、Facebook、Instagram、YouTube、TikTokなどのメジャーどころはもちろん、ほかにも多くのSNSに対応していますよ。

ホームぺージから、自社のSNSにユーザーを誘導したい場合は、ぜひ設置しましょう。
魅力的なコンテンツを発信しているSNSアカウントなら、いいねやフォローなどの反応も期待できます。

では、使い方を見ていきましょう。

「ソーシャルアイコンブロック」を挿入したら、「+」をクリックします。
表示された中に使いたいSNSのアイコンがなければ、「検索」もしくは「すべて表示」から探してください。

ソーシャルアイコンブロックの追加方法

今回はTwitterアイコンを挿入してみました。
アイコンをクリックして、アカウントアドレスを入力します。

アドレスを入力

アイコンのサイズは、ブロックツールバーで変更することが可能です。
スタイルや色は、画面右側のブロック設定サイドバーで指定しましょう。

ブロックツールバーやブロック設定サイドバーから設定可能

なお、これらの設定は、「ソーシャルアイコンブロック」全体を選択しないと出てこないので、注意してください

メモ

リスト表示だと、全体を選択しやすいです。

リスト表示なら分かりやすい

ショートコードブロック

「ショートコードブロック」は、ショートコードと呼ばれる命令文を挿入するときに、使います。

プラグインで作ったパーツ(機能)を固定ぺージに貼りつけるときに、使用することが多いです。

以下は、「ショートコードブロック」を追加したときの画面です。
「ショートコードをここに入力…」という部分に、コピーしたショートコードを貼り付けます。

ショートコードブロック

たとえば、フォームのプラグインとして有名な「Contact Form 7」では、フォームを作ったあと、ショートコードが生成されます。

Contact Form 7のショートコード

このショートコードを埋め込むと、お問い合わせぺージにフォームを表示(追加)することが可能です。

カスタムHTMLブロック

「カスタムHTMLブロック」は、HTMLコードを入力するときに使用します。

WordPressデフォルトの機能では、「段落ブロック」内のテキストにおいて、一部分のみ色を変えることはできません。

しかし、「カスタムHTMLブロック」を使ってHTMLコードを入力すれば、実現できます。

参考に、以下をご覧ください。
線を引いた部分が、文字を赤くするためのHTMLコードになります。

カスタムHTMLブロック

以下は、実際にプレビューした画面です。
HTMLタグで囲った文字が、赤色に変わっていますね。

プレビュー

WordPressのブロックエディタを使えば、HTMLやCSSなどのWeb制作スキルがなくても、ホームぺージは作れます。

しかし、このように、HTMLやCSSを知っておくことで役立つ機会もあるので、基本のタグは徐々に覚えていくとよいでしょう。

なお、HTMLやCSSについては、以下の記事で解説しています。

メモ

追加済みのブロックについては、ブロックツールバーのオプション「HTMLとして編集」から、ソースコードを編集することが可能です。

ブロックツールバーのオプションのHTMLとして編集でも可能

埋め込み系ブロック2種

ここでは、埋め込み系のブロックについて紹介します。

埋め込み系ブロック
  1. 埋め込みブロック
  2. YouTubeブロック

埋め込みブロック

「埋め込みブロック」は、Web上に公開されている動画、画像(静止画)、ツイート、音声などのコンテンツを埋め込むときに使います。

たとえば、Twitterのツイートを埋め込むことが可能です。

使い方は簡単で、埋め込みたいコンテンツのURLを入力し、「埋め込み」ボタンをクリックするだけです。

埋め込みブロック
埋め込みブロックの活用例

なお、埋め込んだコンテンツによって、ブロックの種類が変わります。

今回の場合は、「埋め込みブロック」が「Twitterブロック」に変わりました。

なお、埋め込み可能なコンテンツは、以下から確認することが可能です。

(参考:WordPress.org「メディア埋め込み元として使えるサイト」

YouTubeブロック

「YouTubeブロック」は、YouTube動画を埋め込むときに使います。

カワウソ

前項の「埋め込みブロック」でも代用できますが、YouTube動画を埋め込むなら、こちらのほうがブロックを感覚的に選べますよ。

操作は簡単で、埋め込みたい動画のURLを入力し、「埋め込み」をクリックするだけです。

Youtubeブロック

以下、埋め込んだあとの編集画面です。

Youtubeブロックの活用例

その他のブロック

最後に、カテゴリーに属さないその他のブロックを紹介します。

再利用ブロック

「再利用ブロック」は、同じコンテンツをさまざまなぺージで使いまわしたいときに便利です。

複数のぺージで同じコンテンツを使用していても、更新するときは一つの再利用ブロックを編集すればよいだけなので、作業を効率化できます。

では、実際の使い方を見ていきましょう。

STEP1

まず、対象となるブロックを選択します。
次に、ブロックツールバーのオプションから、「再利用ブロックを作成」をクリックしてください。

ブロックツールバーのオプションから再利用ブロックを作成
STEP2

すると、以下の画面が開くので、名前をつけて保存します。

再利用ブロックの名前を決定
STEP3

これで、「製品の特長」という名前の「再利用ブロック」が作成されました。

作成した「再利用ブロック」は、画面左上の「+」をクリックしたのち、タブの一番右側に表示されるアイコンを選択すれば、表示されます。

あとは、任意の箇所にこの「再利用ブロック」を挿入するだけです。

再利用ブロックの選択

ブロックを増やせる無料のプラグインを紹介

WordPressで使えるブロックは、テーマごとに異なります。
機能性の高いテーマであれば、多くのブロックが用意されているでしょう。

とはいえ、物足りない場合は、「ブロック追加プラグイン」を用いるのがおすすめです。

ここでは、魅力的なブロックを増やせる、無料のプラグイン2つを紹介します。

VK Blocks

VK Blocks

▲出典:株式会社ベクトル「VK Blocks」

『VK Blocks』は、企業ホームぺージ向けテーマの『Lightning(ライトニング)』を提供している、株式会社ベクトルのブロック追加プラグインです。

『VK Blocks』は、『Lightning』以外のテーマでも使用できます。

WordPressのデフォルトにはない、以下のようなブロックを追加することが可能です。

追加可能なブロック
  • スライダー
  • FAQ
  • アラート
  • フロー

使えるブロック数は全部で16種類。
有料の『VK Blocks Pro』だと、さらに19種類増えます。

なお、当メディアでは、『Lightning』を使ってホームぺージを自作する方法を連載企画で解説していますよ。

Snow Monkey Blocks

Snow Monkey Blocks

▲出典:株式会社モンキーレンチ「Snow Monkey Blocks」

有料のWordPressテーマ『Snow Monkey』を販売する、株式会社モンキーレンチのブロック追加プラグインです。

『Snow Monkey Blocks』は、『Snow Monkey』以外のテーマでも使えます。
たとえば、以下のようなブロックを使うことが可能です。

使用可能なブロック
  • アコーディオン
  • カウントダウン
  • 価格表
  • お客様の声

使えるブロック数は全部で30種類。
テーマ『Snow Monkey』と一緒に使うと、さらに6種類増えます。

なお、テーマ『Snow Monkey』については、以下の記事で詳しく解説しているので、併せてチェックしてみてください。

まとめ

この記事では、WordPressの編集機能である「ブロックエディタ」の使い方を解説しました。

また、デフォルトで用意されている基本ブロックのうち、ホームページ制作に使用する機会が多いものを厳選して紹介したので、参考になったのではないでしょうか。

まとめ
  • ブロック追加後は、「ブロックツールバー」と「ブロック設定サイドバー」を使う
  • 特定のブロックを選択するのが難しければ、「リスト表示」を使う
  • 異なる種類のブロックを組み合わせれば、さらに魅力的なデザインを構築可能
  • 使えるブロックを増やしたいなら、高機能なテーマを使うかプラグインを追加する

WordPressには便利なブロックがたくさんあります。
使い方が分かったら、ぜひブロックエディタでホームページを作ってみてくださいね。

それでは、素敵なホームぺージの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、19万社の導入実績があります。

2024年5月1日12時まで、サーバー利用料金が最大30%オフとなる割引キャンペーンを実施中です!

今なら月額693円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2023年10月時点、W3Techs調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています!

これから始める方はこちらのホームページの作り方をぜひご覧ください!

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ!

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!