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

WordPress
よーすけ
よーすけ

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

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

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

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

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

役立つブロック3種

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

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

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

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

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

WordPress投稿画面

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

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

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

動画ブロックの使用方法

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

WordPress投稿画面

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

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

WordPress投稿画面

YouTubeブロックの使用方法

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

WordPress投稿画面

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

WordPress投稿画面

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

Vimeoブロックの使用方法

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

WordPress投稿画面

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

WordPress投稿画面

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

引用ブロック

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

WordPress投稿画面

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

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

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

引用ブロックの使用方法

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

WordPress投稿画面

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

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

WordPress投稿画面

テーブルブロック

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

WordPress投稿画面

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

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

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

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

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

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

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

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

画像とテキストを横並べ

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

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

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

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

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

WordPress投稿画面

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

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

WordPress投稿画面

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

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

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

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

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

画像をたくさん並べる

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

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

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

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

WordPress投稿画面

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

WordPress投稿画面

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

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

ブロック間に余白を設ける

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

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

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

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

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

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

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

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

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

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

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

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

WordPress投稿画面

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

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

WordPress投稿画面

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

WordPress投稿画面

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

WordPress投稿画面

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

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

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

WordPress投稿画面

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

WordPress投稿画面

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

まとめ

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

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

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

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

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

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
よーすけ

よーすけ
グロースハッカー / デザイナー / ディレクター

よーすけ
グロースハッカー / デザイナー / ディレクター

すべて平均点より一歩上ができる器用貧乏。という言葉がピッタリな人。 Webデザイン・HTML/CSSコーディング・ディレクション/企画・ライティング・動画撮影/編集といった幅広い領域のWeb制作(+管理職)を経験してきたため、さまざまな視点を持ち合わせている強みがあります。 声優の高野麻里佳さんが大好きです!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。