【WordPress】ブロックエディタの使い方 – 応用編 –

2021/11/05

WordPress

WordPressのブロックエディタの使い方について解説する記事も2本目になります。

今回は、以下の内容を紹介していきます。

• 基本的な4つのブロック以外に役立つブロック
• Webサイトやブログでよく見かけるレイアウトの作り方
• 再利用ブロックで定型文活用

そのため、この記事は「ブロックエディタの使い方 – 基本編 -」からもう1ステップ、WordPressのブロックエディターと友だちになりたい方に向けた記事になります。

【WordPress】ブロックエディタの使い方 – 基本編 –

まだ前回の記事をご覧になっていない方は、上記の記事をご覧になってから、こちらの記事もご覧ください。

役立つブロック3種

まずは、基本的な4つのブロック以外に役立つブロックを3種類ご紹介します。

WordPressには汎用性はもちろんですが、かゆいところに手が届くような役立つブロックもあります。

利用頻度としては、基本的な4つのブロックよりも低いですが、覚えておいて損はありません。
こういうブロックもあるのだと引き出しを持っておくことで、いざというときに役立ててください。

動画ブロック・YouTubeブロック・Vimeoブロック

まずは動画に関するブロックです。
WordPressでは、ページに動画を埋め込むことも可能です。

主に使用することになるブロックとしては、以下の3種類になります。

• 動画ブロック
• YouTubeブロック
• Vimeoブロック

それぞれ簡単に説明していきます。

動画ブロックの使用方法

ブロックの選択画面から「動画」を選択することで使用することができます。

mp4やmovといった動画ファイルの拡張子データをアップロードしたり、サーバーに別途アップロードしている動画のURLを指定することでページに動画を掲載することができます。

また、掲載する動画は、WordPressエディターサイドバーメニューより動画の自動再生やループなどの設定も行うことができるので、柔軟にカスタマイズすることも可能です。

YouTubeブロックの使用方法

ブロックの選択画面から「YouTube」を選択することで使用することができます。

YouTubeにアップロードされている動画のURLを入力することで、ページにYouTube動画を埋め込むことができます。

YouTubeブロックは動画ブロックと異なり、自動再生やループなどの設定を行うことができないため、そういった動画の設定を行いたい場合は、YouTube動画の埋め込みタグを「埋め込みブロック」を使い掲載しましょう。

Vimeoブロックの使用方法

ブロックの選択画面から「Vimeo」を選択することで使用することができます。

Vimeoにアップロードされている動画のURLを入力することで、ページにVimeo動画を埋め込むことができます。

VimeoブロックもYouTubeブロック同様、自動再生やループなどの設定を行うことができませんのでご注意ください。

引用ブロック

続いて引用ブロックです。
引用ブロックは、他者の文章などを引用する場合に使用することになります。

他者の文章を引用する場合には、原則として引用文であることを表記しなければならないことや、引用元の書籍名・サイト名、またそのURLなどを記載しなければいけません。

このような原則を守らない場合は、無断転載として著作権侵害となりかねません。

この引用ブロックでは、引用文、引用元の記載がしやすく、記載漏れがないという点で便利なブロックでもあります。

引用ブロックの使用方法

ブロックの選択画面から「引用」を選択することで使用することができます。

「引用文」に掲載したい引用文を入力し、「引用元」には書籍名やWebサイト名を入力しましょう。

また、URLを持つ引用元であれば引用元にリンク設定を行い、かならず引用元に辿れるようにしておきましょう。

テーブルブロック

次はテーブルブロックです。
利用頻度は高くないかもしれませんが、テーブルブロックを使うことでページ内にテーブルを配置することができます。

テーブルブロックの使用方法

ブロックの選択画面から「テーブル」を選択することで使用することができます。

カラム数（列）と行数を指定して、テーブルを展開できます。

行の追加・削除、列の追加・削除はあとからブロックツールバーより行えます。

また、他オプションとして色の変更なども可能なので、CSSなどの装飾を加えるなどしなくても、ある程度見栄えよいテーブルも作ることができるのも良いですね。

ブロックエディターでできるレイアウト

覚えておきたいブロックということで3種類、計5つのブロックを紹介しました。
ここからは、ページのレイアウトについて触れていきたいと思います。

ブロックエディターの特徴は、以前の記事でもお伝えしましたがブロックの積み重ねでページを作っていきます。

そのため、積み重ねるだけのレイアウトしかできないと思われがちですが、そうではありません。

こういったレイアウトにしてみたい…というようなものも実装することができるので、今回はその一例をご紹介できればと思います。

画像とテキストを横並べに配置する方法

画像とテキストが横に並んで配置されているレイアウトを見かけると思います。

このレイアウトもWordPressのブロックエディターを使用して作ることが可能です。

これは、主に「メディアとテキストブロック」と「カラムブロック」を利用することで作ることができます。

メディアとテキストブロックを使う場合

「メディアとテキストブロック」を使うことで、画像とテキストを横並べに配置することができます。

使い方としては、メディアエリアに画像を選択して、コンテンツエリアの方に文章を入力するだけです。

設定項目として、メディアエリアとコンテンツエリアの配置を左右入れ替えることや、両方のコンテンツを上揃え、中央揃え、下揃えと設定することもできます。

また、スマホなどのモバイルデバイスで閲覧された場合に、横並べしたコンテンツを縦に切り替えるか否かを選択できるようにもなっています。

設定がONの場合はスマホで以下のように表示されます。

カラムブロックを使う場合

また、「カラムブロック」を使うことでも、画像と文章の横並べの配置が可能になります。

カラムブロックは、ページのコンテンツエリアを横に2分割や3分割のカラムにわけることで、それぞれのカラムでコンテンツを掲載することができるブロックです。

カラムブロックを選択して、「50/50」の2分割カラムを選ぶことで横に2つのブロックを配置することができます。

片方に画像ブロック、もう一方に段落ブロックを配置すれば、画像とテキストを横並べするレイアウトとなります。

こちらも、スマホで見た場合には縦並べに切り替わるのですが、こちらはON・OFFの指定はありません。
仕様上必ず切り替わるようになっています。

以上が、画像とテキストを横並べに配置する方法になりますが、紹介した2つのブロックは文章サイドに段落ブロック以外のブロックも挿入することができます。

つまり、レイアウトを横並べにできるだけでなく、自由度の高いページのコンテンツづくりができるという点も覚えておきましょう。

画像をたくさん並べる方法

先ほどの横並べレイアウトにも通ずるものがありますが、画像を縦横にたくさん並べるというレイアウトを行いたい場合もあるかと思います。

これは、「ギャラリーブロック」を活用すればかんたんに実装することが可能です。

ギャラリーブロックを使う場合

画像をたくさん並べたい場合には「ギャラリーブロック」が有効です。

ブロックを選択後、掲載したい画像をアップロードないし、メディアライブラリから複数選択します。

すると、自動で選択した画像が横並べに配置されていきます。

設定の中に、カラム数の設定が行えるので、画像を何カラム配置にしたいのかを調節することができます。

なお、カラム数を超える画像を掲載する場合は、次の行として画像が配置されていきます。

また、画像の切り抜きのオンオフで、画像の高さを合わせてトリミングさせるか、それぞれの画像の高さのまま掲載するかを調節することもできます。

ブロック間に任意の余白を設ける方法

ブロックとブロックの間に、デフォルトの余白ではなく狙った余白を設けたい場合があるかもしれません。

そんな場合は、「スペーサーブロック」を使うことで、狙った余白を追加することができます。

スペーサーブロックを配置すると、エディターにグレーのスペースが現れます。
これがページを公開した際に、余白に代わります。

余白の広さは、スペーサーブロックの下部をドラッグで下に引っ張ることで広げることができます。

また、設定から余白をピクセルという単位で厳密に指定したい場合は、WordPressエディターサイドバーメニューより指定することもできます。

ただし、ピクセル数で挿入されるということは、パソコンとスマホで共通の余白幅になるので、パソコンの閲覧を前提にした余白を入れた場合に、スマホで見ると過剰な余白に感じるかもしれません。

ほどよく余白を入れたいといったケースでは、ぜひスペーサーブロックを活用してみてください。

再利用ブロックでテンプレートを作る

ここまで、さまざまなブロックとそれを活用したレイアウトについて説明してきました。

WordPressのブロックエディターの使い方として、最後に再利用ブロックについて触れていきます。

再利用ブロックとは、かんたんに言うと定型文のような機能となります。

繰り返し使うようなレイアウト（ブロック）や、毎度入力するような情報がある場合に、そのブロックを再利用ブロックとして登録をしておくことで、同一ページ、別ページでブロックをすぐに呼び出すことができます。

再利用ブロックの利用方法

再利用ブロックの登録から実際に再利用ブロックを使うまでの流れを紹介したいと思います。

今回は「メディアとテキストブロック」で画像とテキストを横並べにし、さらにテキストの下にテーブルブロックを使用したレイアウトを登録したいものとします。

再利用したいブロックを作る

まずは再利用ブロックとして登録したいブロックを用意します。

再利用ブロックとして登録する

再利用ブロックとして登録したブロックを選択します。

ブロックツールバーから、「再利用ブロックに追加」を選びましょう。

ブロックの名称を任意でつけられるので、何かわかりやすい名称をつけ保存します。

これで、再利用ブロックへの登録が完了しました。

再利用ブロックを使用する

登録した再利用ブロックを使いたい場合は、ブロックエリアの再利用ブロックから追加したブロックを選ぶことで使用できます。

すると、先ほど再利用ブロックに登録したときの画像やテキストがそのままブロックとして表示されます。

新しいページを作るたびに、ブロックを作らなくても、一度作ったレイアウトを再利用ブロックとして登録することで、すぐに呼び出し、必要な部分だけ書き換えることもできるので、再利用ブロックを活用して作業の簡略化を行うことができます。

まとめ

今回は、WordPressのエディターであるブロックエディターの応用編として、役立つブロックやレイアウトの作り方などをご紹介しました。

前回の記事から、よりページ作りに関して理解度が深まったのではないでしょうか？

ぜひ、いろいろご自身で試してみていただきこういうページが作りたいを自分でできるようになっていただければ嬉しいです。

Wepotでは、WordPressを用いたWebサイトの制作も承っております。

もし、WordPressでサイトを作ろうか検討中の場合は、お気軽にご相談くださいませ。