SWELLカバーブロックの使い方｜トップページのメインビジュアル作成に最適なブロック！

「トップページのファーストビューで画像を画面いっぱいに表示したい…」

「画像の上にテキストやその他コンテンツを配置できる？」

「カバーブロックでできることや使い道は？」

この記事では、そんな方に向けて、SWELLでカバーブロックの使い方を解説します。

カバーブロックとは…背景に画像や動画もしくは任意の色を塗りつぶして、その上に文字などのブロックを配置することができるWordPress標準ブロック

この記事を読めば、あなたも簡単に

• カバーブロックの使い方と細かな設定方法が理解できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、画面いっぱいに表示されるトップページのメインビジュアルをおしゃれに作成することができました。（2025/02/14時点で当ブログでは未設定です）

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELLカバーブロックでできること4選

SWELLのカバーブロックはWordPress標準ブロックであり、以下のようなことができます。

それぞれ詳しく解説します。

背景をおしゃれにデザイン装飾できる

SWELLのカバーブロックは背景に画像や動画を設定することができます。

設定した背景のデザインは「テキストカラー」「オーバーレイカラー」「デュオトーン」を選べ、以下のようなオシャレな画像に装飾できます。

豊富なカスタマイズ性から自サイトのデザインとの相性の良さだったり、ユーザーに与えたい印象を考慮して選べます。

背景上にテキスト以外のコンテンツを配置できる

SWELLのカバーブロックに設定した背景上にリストやふきだし、ボタンなどのコンテンツも配置できます。

背景に画像を設定することでコンテンツのおしゃれ度が倍増するね。

背景上に配置したコンテンツの表示位置を変更できる

背景上に配置したコンテンツの表示位置を変更できます。

背景の邪魔にならないようテキストなどのコンテンツを配置できますよ。

背景を画面いっぱいに表示できる

SWELLのカバーブロックに設定した背景を画面いっぱいに表示できます。

トップページのメインビジュアルとして使え、ファーストビューで好印象を与える背景を作成できますよ。

SWELLカバーブロックの使い方とカスタム設定9つ

SWELLのカバーブロックの使い方は下記のとおりです。

ちなみに、カバーブロックは以下2つの方法からも呼び出せます。

自分の好きな方法で呼び出しましょう。

カバーブロックで設定可能な項目は9つあります。

それぞれ詳しく解説します。

固定背景にするか決める

SWELLのカバーブロックの設定項目「固定背景」は右サイドバーの タブから設定できます。

固定背景をONにすると、画面をスクロールしても背景画像は動かなくなります。

繰り返し背景にするか決める

SWELLのカバーブロックの設定項目「繰り返し背景」は右サイドバーの タブから設定できます。

繰り返し背景をONにすると、同じ画像が上下左右に繰り返し表示されます。

画像が大きいと繰り返し表示されません。小さめの画像を設定してください。

フォーカルポイントを指定する

SWELLのカバーブロックの設定項目「フォーカルポイント」は右サイドバーの タブから設定できます。

焦点ピッカーを手動で移動させる、もしくは数字を入力することで背景画像の中心位置を変えることができます。

代替テキストを設定する

SWELLのカバーブロックの設定項目「代替テキスト」は右サイドバーの タブから設定できます。

記事内にある画像が何らかのエラーで表示されなかったときに代わりに表示させたいテキストを設定できます。

以下の画像は、正常に画像が表示された場合と何らかの異常があって画像が表示されなかった場合の比較です。

設定した画像が非表示になってしまった場合の備えとして、代替テキストは必ず設定しましょう。

色を設定する

SWELLのカバーブロックの設定項目「色」は右サイドバーの タブから設定できます。

設定できる色は「テキスト」「見出し」「オーバーレイ」の3つです。

オーバーレイとは…画像に重ねる色のこと

色を変更する際は【方法①】直感的に選ぶ【方法②】カラーコードを入力するのどちらかで設定しましょう。※【方法②】がおすすめ

使いたい色を直感的に選べない場合は、Google Chromeの拡張機能「ColorPick Eyedropper」というカラーピッカーを用いてカラーコードを調べましょう。

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

_{＼クリックで開く／}

オーバーレイカラーを設定する際は、あわせてオーバーレイの不透明度も設定します。

不透明度とは…画像の色を透過させない度合いのこと

オーバーレイの不透明度の設定をいくつか試してみると、「0」では設定したカラーの色が消えて、「100」では設定したカラーの色になりました。

不透明度を0から徐々に大きくするにつれてオーバーレイが濃くなり、不透明度100では背景画像が見えなくなります。

デュオトーンフィルターを適応する

SWELLのカバーブロックの設定項目「デュオトーンフィルター」は右サイドバーの タブ、もしくはツールバーの「デュオトーンフィルターを適応」から設定できます。

デュオトーンとは…2つの色を組み合わせて表現するデザインのこと

以下のオリジナル画像にデュオトーンフィルターを適応してみました。

テキストと画像のサイズを設定する

SWELLのカバーブロックの設定項目「サイズ」は右サイドバーの タブから設定できます。

テキストのサイズは「S」「M」「L」「XL」「XXL」の5つから選べ、画像サイズは任意の数字を入力して指定できます。

コンテンツ位置を変更する

SWELLのカバーブロックの設定項目「コンテンツ位置」はツールバーの「コンテンツ位置を変更」から設定できます。

背景画像の上に挿入したテキストやその他コンテンツの表示位置を以下の9パターンから選べます。

以下の画像のように、アフィリアエイトリンクを設定したSWELLボタンを配置してもいいですね。

フルハイトを切り替える

SWELLのカバーブロックの設定項目「フルハイト」はツールバーの「フルハイトを切り替え」から設定できます。

フルハイトの切り替えをONにすると、ユーザーが利用しているデバイスの画面いっぱいにカバーブロックが表示されます。

例えば、PC画面とスマホ画面とではカバーブロックの表示が異なりますので、デバイスごとにチェックしてください。

SWELLカバーブロックの使い道は？機能が似たブロックと比較してみた

SWELLにはカバーブロックと似た機能を持つブロックが以下の5つあります。

カバーブロックはどういうときに使えばいいのだろう…と疑問に思う方もいるでしょう。

そこで、カバーブロックとその他似た機能を持つブロックとの違いを比較し、カバーブロックの使い道を解説します。

さきに、これらブロックの比較結果をかんたんにまとめました。

ブロック名	画像上にテキスト配置	画像上にその他コンテンツ配置	画像のクリック拡大	スタイル変更	リンクの挿入	キャプションの追加	オーバーレイ設定	デュオトーンフィルター	画像上のコンテンツ位置の変更	コンテンツをずらして画像に配置	フルハイトの切り替え	画像の境界線の形状設定	画像をまとめて挿入
カバー	可	可	不可	不可	不可	不可	可	可	可	不可	可	不可	不可
画像	不可	不可	可	可	可	可	不可	可	不可	不可	不可	不可	不可
フルワイド	可	可	不可	不可	不可	不可	可	不可	不可	不可	不可	可	不可
バナーリンク	可	不可	不可	可	可	不可	可	不可	不可	不可	不可	不可	不可
ギャラリー	不可	不可	可	可	可	可	不可	可	不可	不可	不可	不可	可
メディアとテキスト	可	可	不可	不可	可	不可	不可	不可	不可	可	不可	不可	不可

では、それぞれの類似機能を持つブロックを詳しく解説します。

比較①：画像ブロック

WordPress標準ブロックである画像ブロックとカバーブロックの違いは以下のとおりです。

以下のように画像ブロックでは設定できない画像上にコンテンツを配置したり、オーバーレイの設定をしたい場合にカバーブロックを使うといいでしょう。

比較②：フルワイドブロック

SWELL専用ブロックであるフルワイドブロックとカバーブロックの違いは以下のとおりです。

以下のようにフルワイドブロックでは設定できないフルハイトの切り替えをしたい場合にカバーブロックを使うといいでしょう。

比較③：バナーリンクブロック

SWELL専用ブロックであるバナーリンクブロックとカバーブロックの違いは以下のとおりです。

以下のようにバナーリンクブロックでは設定できない画像上にコンテンツを配置したり、コンテンツ位置の変更をしたい場合にカバーブロックを使うといいでしょう。

比較④：ギャラリーブロック

WordPress標準ブロックであるギャラリーブロックとカバーブロックの違いは以下のとおりです。

以下のようにギャラリーブロックでは設定できない画像上にコンテンツを配置したり、オーバーレイの設定をしたい場合にカバーブロックを使うといいでしょう。

比較⑤：メディアとテキストブロック

WordPress標準ブロックであるメディアとテキストブロックとカバーブロックの違いは以下のとおりです。

以下のようにメディアとテキストブロックでは設定できない デュオトーンフィルターやオーバーレイの設定をしたい場合にカバーブロックを使うといいでしょう。

SWELLカバーブロックまとめ

今回は、SWELLでカバーブロックの使い方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。