SWELLフルワイドブロックの使い方｜推奨の画像サイズやフルワイドにならないときの対処法まとめ

「コーポレートサイトやトップページをおしゃれにしたい」

「フルワイドブロックの設定や活用方法は？」

「フルワイドにならない、どうして？」

この記事では、そんな方に向けて、SWELLでフルワイドブロックの使い方を解説します。

フルワイドブロックとは…画面横幅いっぱいに画像やテキストなどのコンテンツを配置できるSWELL専用のカスタムブロック

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

• フルワイドブロックの使い方やカスタマイズ方法
• フルワイドに適した背景画像サイズ
• フルワイドにならないときの対処法

が分かるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、憧れてたおしゃれなブログに一歩前進できるようになりますよ。

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

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

SWELLフルワイドブロックの使い方とカスタム設定5つ

SWELLでフルワイドブロックの使い方を紹介していきます。

ちなみに、フルワイドブロックは以下3つの方法からも呼び出せます。

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

SWELLのフルワイドブロックで設定可能な項目は下記5つあります。

それぞれの項目を詳しく解説します。

コンテンツ横幅のサイズを設定する

SWELLでコンテンツの横幅を「記事」「サイト幅」「フルワイド」のどこに揃えるかを設定できます。

横幅の余白が「記事」＜「サイト幅」＜「フルワイド」の順に狭くなるのが分かります。

つまり、「フルワイド」では画面いっぱいにテキストや画像などを表示させることができます。

また「フルワイド」は横1行に表示できる文字数が多くなるので、3~4行あったテキストが1行分マイナスすることもあります。

文字だけで画面が埋まることもなくなりますよ。

上下の余白量を設定する

SWELLではPC・スマホ別で上下のpadding量(=余白量)を「0」「20」「40」「60」「80」の5つから設定できます。

上の画像を見てのとおり、数字が大きいほどフルワイドの高さが大きくなることが分かります。

ちなみにフルワイドに配置する段落ブロックを増やせば、padding量「0」でも高さが大きくなりました。

padding量は好みですが、配置するコンテンツの種類や数に合わせて選ぶといいでしょう。

テキストカラー/背景色を設定する

SWELLでフルワイド内のテキストカラーや背景色を設定できます。

後ほど紹介する背景画像を設定した場合、背景色を設定することはできません。

個人的には、自サイトのメインカラーに合った色を選ぶことをおすすめします。

例えば当ブログのメインカラーは青なのですが、黄色や緑など全く違う色を選んだ場合、ごちゃごちゃして見づらくもなります。

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

背景色を設定するところに「背景色の不透明度」という項目もあり、背景色を透明に薄くすることもできますよ。

背景画像を設定する

SWELLでフルワイドに背景画像を設定できます。※おすすめの背景画像サイズも後ほど紹介します。

背景画像を設定した場合、背景色や後ほど紹介する上下の境界線の形状を設定できません。

ここで設定できる項目は次の3つです。

オーバーレイカラーとその不透明度を設定する

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

背景画像を挿入したフルワイドのオーバーレイカラーとその不透明度を設定できます。

オーバーレイの透明度を100に近づくほど色が濃くなり、背景画像が見えずらくなります。

背景効果を設定する

背景画像を挿入したフルワイドの背景効果は「固定背景」「パララックス効果をつける」の2種類あります。

固定背景とは…固定された背景画像がページのスクロールと同時に景色が変わっていく効果のこと
パララックス効果とは…ページのスクロールと一緒に背景画像も動く効果のこと

この背景効果はどちらか片方しか設定できないので、好きなほうを選びましょう。

焦点ピッカーを設定する

焦点ピッカーとは…フルワイドに表示させたい部分に背景画像の中心を合わせること

デフォルトでは焦点ピッカーが背景画像の中心(=左50％・上50％)になっています。

表示させたい部分を変えたい場合は、下の画像のように手動で合わせる、もしくは画像の左・上からどのくらいの位置かを数字で入力する方法で設定しましょう。

背景効果を設定した場合は、焦点ピッカーを設定できません。

上下の境界線の形状を設定する

SWELLでフルワイドの端上下の境界線の形状を設定できます。

もう少し細かくお伝えすると、境界線の形状を「斜線」「円」「波」「ジグザグ」の4つから選べ、それぞれで形状効果の大きさを上下ごとで設定できます。

背景画像を設定した場合、上下の境界線の形状を設定できません。

設定する場合は境界線の形状と高さレベルを上下でそろえたほうが良さそう。

ただSWELLは人気のWordPressテーマなので、差別化という意味で他の人が選ばなそうな組み合わせにするのも悪くはないです。

【実例】SWELLフルワイドブロックでおすすめな活用例4つを紹介

当ブログが使用しているSWELLのフルワイドブロックでおすすめな活用方法を4つ紹介します。

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

フルワイド内にコンテンツを配置する

まずは初級編として、SWELLのフルワイド内にコンテンツを配置してみましょう。

記事編集画面にある+をクリックし、配置したいブロックを選択するとフルワイド内にコンテンツが表示されます。

フルワイドを重ねる

SWELLのフルワイドブロックを2つ以上重ねてみましょう。

1つ目のフルワイドブロックを配置した下の段落に、もう1つフルワイドブロックを挿入すると重ねて表示されます。

背景画像に境界線の形状効果をつける

通常、SWELLのフルワイドブロックに背景画像を設定した場合、境界線の形状を変えられません。

ただし、少しの工夫だけで背景画像に境界線の形状効果をつけることができます。

その方法は、背景画像を設定したフルワイドブロックの上下に境界線の形状を変えたフルワイドブロックを配置するだけです。

設定方法は、下の画像のようにフルワイドブロック1と3の境界線の形状を変更するとできますよ。

背景画像を設定したフルワイドブロックの上下に設置したフルワイドブロックが邪魔な場合は、その背景色をページの背景色と同色にし、不透明度を100にすればOKです。

フッター直前ウィジェットで活用する

SWELLのフッター直前ウィジェットはもともと画面横幅いっぱいで表示されますが、背景色を変えたい場合にフルワイドブロックを使いましょう。

SWELLフルワイドの背景画像サイズは幅1920pxがおすすめ！

SWELLのフルワイドにおすすめな背景画像サイズは幅1920pxです。※高さはお好みでどうぞ。

なぜなら、日本で使われているPCの画面サイズのシェア率が高いのは幅1920×高さ1080pxだからです。（以下の統計データを参考。2024年8月時点の情報）

デスクトップ画面解像度のシェア率	デスクトップ画面解像度
27.5%	1920×1080
10.4%	1536×864
6.87%	1366×768
4.92%	2560×1440
4.71%	1280×720
2.75%	1440×900

参考：Desktop Screen Resolution Stats Japan – Stat Counter

上記の統計データより、幅1920pxにすれば日本で使われている52％以上のPC画面に対応できます。（計算式：27.5+10.4+6.87+4.71+2.75=52.23%）

一方、画像サイズが大きすぎるとページの表示速度が遅くなってしまい、離脱率が高くなるのでは…という心配もあるでしょう。

もし幅1920pxより小さくするとPC画面でみたときに画像が粗くなって見づらくなるというデメリットもあります。

ですので、SWELLのフルワイドに使う背景画像サイズは幅1920pxにしましょう。

画像サイズは「Canva」or「ペイント」で変更しよう

もしSWELLのフルワイドで利用したい背景画像が推奨サイズでなければリサイズしましょう。

リサイズ方法は以下の2通りあります。

• Canva（外部サイト）※おすすめ
• ペイント（PCに元々入っているソフト）

Canvaで画像をリサイズする

ペイントで画像をリサイズする

SWELLフルワイドにならないときの対処法2つ

以下の画像のように、SWELLのフルワイドブロックでコンテンツ横幅のサイズを設定してもフルワイドにならない場合があります。

フルワイドにならない場合の対処法は下記2つです。

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

サイドバーを非表示にする

SWELLのフルワイドブロックは、基本的にサイドバー非表示での使用を想定されています。

つまり、サイドバーを表示しているページではフルワイドにならないです。

ですので、サイドバーを非表示に設定すればフルワイドになりますよ。

サイドバーを非表示にする方法は下記2つです。

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

記事編集画面で設定する

記事編集画面では、個別ページごとでサイドバーを非表示にできます。(個別ページの例：投稿ページA、投稿ページB、固定ページC、カテゴリーページD)

設定方法は、設定⇒投稿の順にクリックし、「表示の上書き設定」にあるサイドバーを非表示にする

これでSWELLでフルワイドにならないが解決します。

カスタマイザーで設定する

カスタマイザーでは、ページの種類ごとでサイドバーを非表示にできます。(ページの種類：トップページ or 投稿ページ or 固定ページ or アーカイブページ)

設定方法は以下のとおり。

「コンテンツの背景を白にする」をオフにする

「コンテンツの背景を白にする」をオンにしているとコンテンツ幅で表示されてしまい、フルワイドにならないです。

ですので、「コンテンツの背景を白にする」をオフにすればフルワイドに表示されます。

設定方法は以下のとおり。

SWELLフルワイドの表示がおかしいときの対処法2つ

SWELLのフルワイドブロックを連続2つ以上使用した場合、以下の画像のようにフルワイドの表示がおかしくなることがあります。

それぞれの対処法を詳しく解説します。

境界線の形状が重なって表示される場合…

SWELLでフルワイドの境界線の形状が重なって表示される原因は、隣接するフルワイドの境界線の高さレベルが両方とも0.1以上に設定しているからです。

ですので、どちらか一方のフルワイドの境界線の高さレベルを0にすると、境界線の形状が重なって表示される現象が解決されますよ。

背景色が後ろで薄っすら表示される場合…

SWELLでフルワイドの背景色が後ろで薄っすら表示される原因は、背景色の不透明度が99以下になっているからです。

ですので、隣接するフルワイドの背景色の不透明度を100にすると、背景色が後ろで薄っすら表示される現象が解決されますよ。

もし薄くした背景色を使いたい場合は、薄くした背景色のカラーコードを調べて直接指定しましょう。

カラーコードは先ほど本記事で紹介したカラーピッカーで調べてください。

SWELLのフルワイドブロックまとめ

今回は、SWELLでフルワイドブロックの使い方を紹介しました。

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

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