SWELL カバーブロックの使い方は？全幅・背景画像で魅せるデザイン術

本記事では、SWELL カバーブロックの全機能と具体的な活用術を徹底解説します。

この記事を読めば、基本操作から高度な設定まで完全に習得でき、読者に注目してほしい画像を自分の思い通りに作れるようになります。

これだけで、サイト全体の見た目が驚くほど整い、読者に『しっかりしたサイトだな』という好印象を与えられますよ。

それでは早速はじめましょう。

まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入してください。

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

カバーブロックを使えば、サイトの「顔」となる部分を自由にデザインできます。

画像や動画の上に文字を重ねるだけで、プロが作ったような洗練された雰囲気が完成します。

ここでは主要な4つの機能を見ていきましょう。

背景に動画を設定できる

静止画だけでなく、mp4などの動画ファイルを背景に設定可能です。

動きがあることで、訪問者の視線を一瞬で奪うインパクトのあるファーストビューが作れます。

設定はメディアライブラリから動画を選ぶだけ。

YouTube動画のような複雑な埋め込みコードも不要です。

背景にテキストなどのコンテンツを配置できる

背景画像や背景動画の上に、テキストやボタンなど別のブロックを重ねて配置できます。

通常は画像の下にしか置けないボタンも、カバーブロックなら画像の中に配置できます。

これなら画像編集ソフトで文字を入れる必要はありません。

コンテンツの表示場所を変更できる

重ねた文字やボタンの位置は、9つのポジションからマウス操作で選べます。

中央だけでなく、あえて右下や左上に配置することで、背景画像の大切な部分を隠さずに見せることが可能です。

操作はツールバーにある「コンテンツ位置」のアイコンをクリックして選びましょう。

背景を全幅（フルワイド）表示できる

カバーブロックを「全幅」に設定すれば、画面の端から端まで背景を広げられます。

サイトのメインビジュアルとして使えば、開放感のあるモダンなデザインがすぐに完成しますよ。

1カラムのトップページ作りには欠かせない設定です。

ツールバーの「配置」から「全幅」を選ぶだけの簡単ステップで完了します。

SWELL カバーブロック基本的な使い方

まずはカバーブロックの基本操作をマスターしましょう。

画像や動画を背景に置くことで、一気に「ブログらしさ」を抜け出し、企業サイトのような信頼感を演出できます。

手順を一つずつ解説しますね。

SWELL カバーブロックの詳細設定とカスタマイズ

カバーブロックを配置したら、次は細かな設定でクオリティを高めましょう。

横幅の変更から特殊な視覚ギミック（仕掛け）まで、SWELLには多くのカスタマイズ項目が用意されています。

これらを使いこなすことで、理想のサイトデザインに一歩近づきます。

設定場所は「ブロックツールバー」と「サイドバー」の2箇所です。

カバーブロックの横幅を設定する

ツールバーの配置アイコンから、ブロックの横幅を変更できます。

トップページで多用される「全幅」を選べば、画面の端から端まで画像が広がり、迫力ある画面構成になります。

用途に合わせて最適な広さを選び、ページのバランスを整えましょう。

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

重ねた文字やボタンを置く場所は、ツールバーの「コンテンツ位置を変更」から調整できます。

9マスのグリッドから選ぶだけで、中央や右上など好きな場所にコンテンツを移動できます。

下図ではSWELLボタンを右上に配置してみました。

フルハイトを切り替える

ツールバーの「フルハイトを切り替え」をオンにすると、画面の高さ一杯にブロックが表示されます。

これは、訪問者が使っているデバイスの画面サイズに合わせて自動調整される便利な機能です。

ファーストビューで画像だけをドーンと見せたいときに使いましょう。

スクロールを促すインパクトのある構成が作れます。

固定背景を有効にする

サイドバーの設定「 」タブにある「固定背景」をONにすると、スクロールしても画像が動かなくなります。

背景が固定されたまま文字だけが流れていくため、サイトに奥行きのある立体感を与えられます。

パララックス（視差効果）のような高級感を手軽に出せるのがポイントです。

読者の目を引くモダンな演出として活用してください。

繰り返し背景を設定する

小さなパターン画像を使う場合は設定「 」タブにある「繰り返し背景」をONにしましょう。

これをONにすると、画像がタイル状に並んで背景を埋め尽くします。

テクスチャ素材などを利用して、サイト全体に独特の質感を加えたいときに役立つ機能です。

画像が大きすぎると変化がわかりにくいため、素材のサイズには注意して選びましょう。

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

画像のどの部分を中心に見せるかは「フォーカルポイント」で細かく指定可能です。

サイドバーのプレビュー画面にある丸い点をドラッグして、一番見せたい場所に合わせましょう。

数値を入力して設定することもできます。

スマホ表示で端が切れてしまう場合でも重要な部分を中央に残せますよ。

代替テキストを設定する

サイドバーの「代替テキスト」欄には、画像の内容を説明する言葉を入力しておきましょう。

万が一画像が読み込まれなかった際に、このテキストが代わりに表示されます。

また、検索エンジンが画像の内容を正しく理解する助けにもなり、SEO面でも良い影響があります。

色を設定する

背景と文字の色が被って読みにくいときは「色」設定を調整します。

「色」設定はスタイル「 」タブをクリックすると表示されます。

文字色だけでなく、画像の上に重ねる「オーバーレイ」の色や透明度も自由に変更可能です。

背景に少し暗めの色を被せれば、白い文字がくっきりと浮かび上がります。

サイトのテーマカラーに合わせて、最適な色の組み合わせを見つけてみましょう。

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

2色のカラーを組み合わせて画像を加工する「デュオトーンフィルター」も利用できます。

「デュオトーンフィルター」はブロックツールバー、サイドバーどちらからも利用可能です。

ツールバーから選ぶだけで、一瞬でおしゃれな雑誌のような雰囲気に変身します。

元の画像の色味を気にせず、サイト全体のトーンを統一できるのが大きな利点です。

個性的な世界観を作りたい方は、ぜひ色々なパターンを試してください。

設定方法は簡単、ブロックツールバーかサイドバーの「ディオトーンフィルターを適用」をクリックしてい好きな色の組み合わせをクリックするだけです。

カスタムカラーも設定できるので、自分だけのオリジナルフィルターも作れます。

自分だけのオリジナルフィルターの作り方は以下の通り。

「⚪︎影」または「⚪︎ハイライト」をクリックしてください。

①用意されている色の中から、お好みの色を選んでください。

②用意されている色の中に使いたい色がない場合は上部のチェック柄の部分をクリックします。

「カラーピッカー」（＊1）や「カラーコード」（＊2）を入力して色を選びましょう。

カラーコードを調べるのには、「Color Picker for Chrome」が便利です。

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

サイドバーの「タイポグラフィ」や「サイズ」から、サイズを細かく指定できます。

テキストを大きくして強調したり、ブロック自体の縦幅を指定した数値で固定したりすることが可能です。

特に縦幅の指定は、中に入るコンテンツが少なくても十分な余白を保つのに役立ちます。

全体の読みやすさを考えながら調整しましょう。

カバーブロックと機能が似たブロックの使い分け

SWELLにはカバーブロックと機能が似ているブロックが複数あります。

それぞれの得意分野を知れば、デザインの迷いがなくなるはずです。

機能の違いを整理して、最適なブロックを選べるようになりましょう。

カバーブロック

ダイナミックな動きを背景に取り入れたいなら、カバーブロック一択です。

ブロック名	動画を背景に設置
カバーブロック	可
画像ブロック	不可
フルワイドブロック	不可
バナーリンクブロック	不可
メディアとテキストブロック	不可

標準ブロックでありながらmp4動画を背景に設定できるため、一瞬で読者の目を引くページが作れます。

フルワイドブロックでは静止画しか扱えません。

動画ならではのライブ感を演出したい場面で、この機能を積極的に活用してください。

フルワイドブロック

境界線の形状をおしゃれに装飾したいときはフルワイドブロックを使いましょう。

ブロック名	境界線の形状設定
カバーブロック	不可
画像ブロック	不可
フルワイドブロック	可
バナーリンクブロック	不可
メディアとテキストブロック	不可

SWELL専用のフルワイドブロックならば、下図のように上下の境界線を波型や斜めに加工できます。

境界線は画像を背景にしたときは使えません。背景に色をつけた時に利用しましょう。

カバーブロックには境界線を装飾する機能がないため、フルワイドブロックはデザインにアクセントを加えたい時に重宝します。

バナーリンクブロック

テキストが挿入された画像をボタンのように扱い、クリックで別ページへ飛ばしたい場合はバナーリンクブロックを使いましょう。

ブロック名	画像にテキスト配置	画像全体にリンクの挿入
カバーブロック	可	不可
画像ブロック	不可	可
フルワイドブロック	可	不可
バナーリンクブロック	可	可
メディアとテキストブロック	並列で可	可

カバーブロックでは画像全体にリンクを設定することはできません。

また、メディアとテキストブロックは、画像の上に直接テキストは配置できません。

バナーリンクなら画像の上に文字を配置しながら、全体をリンク化できます。

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

画像と文章を左右に並べて、整然としたレイアウトを作りたい時は「メディアとテキスト」が最適です。

ブロック名	画像と文章を並べる
カバーブロック	不可
画像ブロック	不可
フルワイドブロック	不可
バナーリンクブロック	不可
メディアとテキストブロック	可

カバーブロックは文字を画像に「重ねる」ためのものですが、こちらは画像とテキストを「並べる」ことに特化しています。

メディアとテキストブロックでは以下のように、画像とテキストを重ねることもできます。

画像とテキストを重ねて配置する方法を「ブロークングリッド」といいますが、上記画像を作る手順は「ブロークングリッドの作成」で説明しています。

参考になれば幸いです。

SWELL カバーブロックで素敵なデザインに仕上げるコツ

カバーブロックをただ配置するだけでなく、細かな工夫を加えることでサイトの質は格段に向上します。

中・上級者が実践しているテクニックを取り入れて、読者の記憶に残るページを作りましょう。

今すぐ試せる3つのコツを解説します。

動画を背景に設定してインパクトを与える

サイトを開いた瞬間の印象を強めるなら、動画背景の活用がおすすめです。

静止画よりも視覚的な情報量が多く、一瞬でサイトの世界観を伝えられます。

例えば、カフェのサイトならコーヒーを淹れる動画を流すだけで、臨場感が格段に高まります。

読みやすさを損なわないよう、動きの少ない素材を選びましょう。

オーバーレイの不透明度を調整する

背景画像に重ねる「オーバーレイ」は、サイトのブランドカラーと統一するのがプロの技です。

単なる黒や白ではなく、ロゴの色などを薄く被せることでサイト全体のまとまりが生まれます。

不透明度は50％〜70%の間で微調整を行いましょう。

画像自体の雰囲気を残しながら、重ねた文字の読みやすさもしっかり確保できます。

PCとスマホで画像がズレていないか確認する

カバーブロックを配置した後は、必ずPCとスマホの両方で表示をチェックしてください。

PCで完璧に見えても、スマホでは大事な被写体が画面外に切れるケースがあるからです。

表示がズレている場合は、設定パネルの「フォーカルポイント」で中心位置を動かしましょう。

どの画面サイズでも意図した箇所が中央に来るよう整えておきましょう。

まとめ｜SWELL カバーブロックを活用して魅力的なサイトを作ろう

今回は、SWELLのカバーブロックの全機能と、それを活用したデザインテクニックを解説しました。

本記事の内容は以下のとおりです。

記事で紹介した「動画背景」や「固定背景」をうまく活用すれば、読者の記憶に残る、洗練されたサイトを作ることができます。

特に、カバーブロックはWordPress標準機能でありながら、画像や動画の上に自由にコンテンツを配置できる点が大きな強みです。

SWELLのカバーブロックを使いこなせば、デザイン調整の手間を最小限に抑え、コンテンツの内容そのものに集中できるようにもなります。

本記事を参考に、SWELLの機能をフル活用して、読者の満足度を高めるサイト作成に役立ててください。

まだSWELLを導入していない方は、ぜひ以下のレビュー記事で他の機能もチェックしてみてください。