初心者向けブロックエディター講座その③:メディア&デザイン編

このコンテンツではWordPress初心者向けに、ブロックエディターの「メディア」及び「デザイン」カテゴリーで使用頻度の高いブロックの使い方や活用方法を解説しています。コンテンツ作成時のマニュアルとしてご活用下さい。

ブロックの追加方法(共通)

まず初めに、ブロックの追加方法を解説します。

ブロックを追加するには、トップメニューの左端(左上)にある「+」のアイコンをクリックする。これが基本です。しかし、作成直後はともかく、細かな修正や調整を掛ける段階になると画面の左上と中央とを行き来するよりもコンテンツエリアに表示される「+」のアイコンをクリックした方が早い。

ということで、ここではコンテンツエリアに表示される「+」アイコンを使ったブロックの追加方法を解説していきます。

ブロックを表示(挿入)したい場所にカーソルを当てると、「+」マークのアイコンが表示されます。

アイコンをクリックすると、利用可能なブロックの候補が表示されます。

さらに「すべて表示」リンクをクリックすると、利用可能なブロックの一覧が表示されます。

使いたいブロックを探し、クリックするとブロックが表示(挿入)されます。

ブロックの追加例(リスト)

ブロックの編集が終わり、次のブロックを追加したい場合は「Enterキー」を押して下さい。すると「+」マークのアイコンが表示されるので、同じ手順を繰り返すことで新しいブロックを追加出来ます。

ヒント

基本的に、「+」マークのアイコンが表示された場所にはブロックを追加出来ます。例えば、ブロックとブロックの間にさらにブロックを追加したい場合などは、ブロックの間にマウスのポインターを当ててみましょう。「+」マークのアイコンが表示されれば、そこに新しいブロックを追加可能です。

最初は戸惑うかもしれませんが、何度かやっているうちに慣れますので心配無用です。続いて、使用頻度が高いブロックを見ていきましょう。

画像

「画像」ブロックは、画像を表示する際に使います。「画像」ブロックを選択すると、「メディアライブラリ」または「新規画像のアップロード」いずれかから画像を呼び出し、表示することが出来ます。表示された画像は、下記内容で設定/調整が可能です。

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

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

表示位置(左中右)/リンク挿入/切り抜き/別画像に置換/テキスト追加

2

ブロック設定サイドバー(画面右側)

スタイル/Altテキスト/画像サイズ/寸法

「スタイル」「画像設定」

ワンポイントレッスン:キャプションの活用

画像の設定/調整項目は上の表にまとめた通り色々とありますが、真っ先に活用して欲しいのが「キャプション」です。画像を挿入すると、画像下部にキャプション(説明文)を追加出来ます。

キャプションは画像が放つイメージを具体化させ、閲覧者の反応を高める効果があることが実証されています。商品・サービスなどのオリジナル画像をアップしたときには、キャプションを入力しましょう。

キャプションの追加によってどれほど情報量が変わるのか、実例を踏まえて説明します。下の画像は。先ほど「リスト」ブロックの解説で使った画像です(キャプション無し)。

キャプション無しの画像を見た時に「〇で囲った文字がはみ出してしまう」ことを伝えたいというのは何となく分かるでしょう。でも、「どんな時にはみ出すのか」とか「はみ出すことで何が問題なのか」など、具体的なことは分かりませんよね。

それでは、上の画像にキャプションを追加してみます。

「段落」ブロックで作った箇条書きのスクリーンショット(スマートフォン閲覧時)

キャプションを追加すると、「「段落」ブロックで箇条書きを作るとスマートフォン閲覧時に文字がはみ出してしまい、見づらくなってしまう」という具体的な情報とその証拠との組み合わせに変わりました。こうした効果が期待出来るので、キャプションは有効活用するようにして下さい。

カバー

「カバー」ブロックは、画面いっぱいに背景付きのコンテンツを表示したい場合に使います。カバーブロックを選択後、背景(画像または色)、タイトル+αのブロックを追加してコンテンツに仕上げます。

セールスページのファーストビューや、CTA作成時に利用するブロックです。

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

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

配置を変更(左/中/右/幅広/全幅)/コンテンツ位置を変更/フルハイト/背景の置換

2

ブロック設定サイドバー(画面右側)

スタイル/メディア設定/サイズ/オーバーレイ/間隔

テキストも詳細設定可

カバーで作成したCTA(Call To Action)

ボタン

「ボタン」とは、ボタン型のリンクのこと。テキストリンクよりもデザイン性に優れるので、ページやフォームへ誘導するリンクを貼る場合、ボタンを使うのが主流になっています。

ブロックエディターでは「ボタン」ブロックが標準搭載されたので、初心者でも簡単にボタンを利用出来るようになりました。追加したボタンは、下記内容で設定/調整が可能です。

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

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

配置を変更(幅広/全幅)/コンテンツ揃え位置を変更(左中右)

2

ブロック設定サイドバー(画面右側)

スタイル/色(文字色/背景色)/枠線/幅/リンク

【重要】テーマ独自のボタンもチェックしよう

ブロックエディターの「ボタン」ブロックよりも、テーマ独自のボタンの方が使い勝手が良い場合がほとんどです。なので最初は両方のボタンをテストして、使い勝手の良い方がどちらかを確認するのがお勧めです。

カラム

「カラム」ブロックは、画面を分割してコンテンツを設置したい場合に使います。2021年3月時点の仕様では、最大6分割(6カラム)にすることが可能です。

カラムは、画像のように追加すれば即コンテンツとして成立するブロックではありません。カラムの上に見出し/段落/画像などのブロックを追加して初めてコンテンツとして成立します。例えれば、家の土台のようなものです。追加したカラムは、下記内容で設定/調整が可能です。

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

no. 設定/調整箇所 設定/調整項目 備考、他

1

ブロックツールバー(画面上部)

配置を変更(幅広/全幅)/垂直配置を変更(上揃え/中央揃え/下揃え)

2

ブロック設定サイドバー(画面右側)

スタイル/文字色/背景色/カラム数

「スタイル」「色設定」

ワンポイントレッスン:カラムの活用

カラムは、デザイン性の高いページを作る上で必須となるブロックです。このサイトやテストサイトのトップページは2カラム~3カラムのブロックを組み合わせて作っています。

2カラムで作成したコンテンツ例
3カラムで作成したコンテンツ例

最初は戸惑うこともあると思いますが、1時間もあれこれいじってみるとこの程度のコンテンツは簡単に作成出来るようになります。スマートフォン閲覧を考慮すると、2カラム~3カラムがベストです。カラムの基本操作を覚えて、デザイン性の高いページを作っていきましょう。

スペーサー

「スペーサー」ブロックは、コンテンツとコンテンツとの間にスペースを入れ、視認性を高めたい場合に使います。編集画面上では余白が入っているように見えるのですが、いざプレビューで見てみると、下記のようなケースが散見されます。

スペーサー活用事例①:コンテンツ同士の干渉を解決する

よくあるケース1つ目は、コンテンツ同士が干渉してしまうというもの。論より証拠で、下の図をご覧頂ければイメージ出来るはずです。

スペーサー無しの場合その①。コンテンツ同士が干渉している。

このような場合にスペーサーを入れると、こうなります(スペーサーの高さ:30px)。

スペーサー有りの場合その①。コンテンツの間の干渉が無くなった。

スペーサー活用事例②:コンテンツ間に適切な余白を設ける

よくあるケース2つ目は、コンテンツ同士の余白が全くないというもの。ご覧の通り、非常に見づらくなってしまいます。

スペーサー無しの場合その②。干渉とまではいかないが、コンテンツ間の余白が全くない状態。

こちらのケースでも、スペーサーを入れるとこうなります(スペーサーの高さ:30px)。

スペーサー有りの場合その②。コンテンツに余白が生まれ、見やすさがアップ。

ちなみに、スペーサーを入れるか否か、スペーサーの高さに関する基準はありません。判断基準はあくまであなたの主観になります。プレビューでコンテンツをチェックする際に、コンテンツ間の干渉や余白が無い部分を見つけたら、都度スペーサーを入れて視認性をアップさせて下さい。

他のブロックや機能はこちらをチェック

ブロックエディターの概要と、各ブロックの調整や設定を行う「ツールバー」について知りたい場合はこちらをチェックして下さい。

文章や見出し、リストや引用などの「テキスト」カテゴリーでよく使うブロックについて知りたい場合はこちらをチェックして下さい。

ウェブサイトは初心者じゃ作れない?いや、全然自作出来ますよ。

あなたが価値ある商品・サービスを提供している事業者なら、全くの初心者であってもWordPressサイトの自作は可能です。

最も速く、安く、完成度の高いサイトを完成させるために必要なポイントを完全無料で徹底解説。詳細は下のボタンをクリックして確認して下さい。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう