アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
フルワイドブロックは画面横幅いっぱいに表示できるSWELL独自の機能で、サイト型トップページ作成には欠かせません。
本記事では、3年間SWELLを使い続けている経験をもとに、フルワイドブロックの基本設定から活用例、よくあるトラブルの解決方法まで初心者の方にも分かりやすく解説します。
実際の設定画面を使って丁寧に説明していきますので、ぜひ最後までお読みください。
それではさっそく始めていきましょう！
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。
SWELLフルワイドブロックとは
SWELLフルワイドブロックは、横幅いっぱいの表示を可能にするSWELL独自の機能です。
サイト型トップページ作成には必要不可欠なブロックです。
画面横幅いっぱいに表示するSWELL専用ブロック
フルワイドブロックは、画面端から端まで背景色や画像を表示できるSWELL独自のブロックです。
WordPress標準のブロックでは自動的に左右に余白が作られますが、フルワイドブロックなら画面全体を使えるようになります。
WordPressの標準ブロック
SWELLフルワイドブロック
サイト型トップページ作成に必須の機能
フルワイドブロックは、サイト型トップページ作成において中心的な役割を果たす機能です。
サイト型トップページとは、トップページに表示されるコンテンツを自由に配置し、サイトの目的やデザインに合わせて柔軟に構成できるトップページのことをいいます。
具体的には以下のようなトップページです。
- カテゴリごとに記事を探せる
- おすすめの記事が簡単に見つけられる
アッフィー当サイトのトップページもサイト型になっていますので、確認してみてくださいね
サイト型トップページの作り方については、【SWELLカスタマイズ】おしゃれなサイト型トップページを簡単に作ろう！で詳しく解説しています。ぜひ参考にしてくださいね。
SWELLフルワイドブロックの使い方と6つ設定項目
フルワイドブロックを使いこなすには、基本的な挿入手順から各種設定項目の理解が必要です。
ここでは初心者の方でも迷わず設定できるよう、順を追って解説していきます。
フルワイドブロックの挿入手順
記事編集画面左上の「+」ボタンをクリックします
SWELLブロック一覧から「フルワイド」ブロックを選択してください。
挿入直後は薄いグレー背景に「セクション用」見出しが設置された状態になります。
「/フルワイド」や「/fullwide」といったショートカットを段落ブロックに入力しても呼び出せます。
アッフィー「/」の操作は便利なので覚えておきましょう。
SWELLフルワイドブロックの設置が出来たら、カスタマイズしていきましょう。
設定できる項目は次の6つです。
これらのカスタマイズは、サイドバーから行なうことができます。
それぞれの設定を順番に見ていきましょう。
コンテンツの横幅サイズの設定
コンテンツ横幅は「記事」「サイト幅」「フルワイド」の3段階から選択できます。
実際にどのようになるかを見てみましょう。
記事幅
記事幅は一般的なブログ記事と同じサイズで、左右に十分な余白があります。
サイト幅
サイト幅は記事幅に比べてやや広めです。
フルワイド幅
フルワイドは画面端から端まで使用可能です。
アッフィー横幅をどこに揃えるかは、試してみて使いやすい幅を選びましょう。
この設定はサイドバーの「コンテンツサイズ」の「コンテンツの横幅をどこに揃えるか」から変更できます。
上下の余白量の設定
上下の余白量（padding量）は、フルワイドブロック内のコンテンツ上下にどれだけ空間を作るかを決める設定です。
PC・スマホそれぞれで、0・20・40・60・80の5段階から選択できます。
実際に余白の量で高さがどう変わるのかを見てみましょう。
Padding量（PC：0、SP：0）
Padding量（PC：20、SP：20）
Padding量（PC：40、SP：40）
Padding量（上：60、下：60）
数値が大きいほど余白が広くなり、ゆったりした印象になります。
高さはコンテンツの量により変わってきます。
なので、実際の見た目を確認しながら、コンテンツ量とのバランスを調整して設定するようにしてください。
この設定はサイドバーの「コンテンツサイズ」の「上下のPADDING量」から変更できます。
テキストカラーの設定
テキストカラーは、フルワイドブロック内の文字色を一括で変更する機能です。
個別にテキスト色を指定している場合は、そちらが優先されます。
テキストカラーは白い背景なら黒系、濃い背景なら白系を選ぶのが基本ルールです。
テキストカラー（デフォルト）
テキストカラー（青）
テキストカラー（赤）
サイドバーの「テキストカラー」から、カラーパレットまたはカラーコード入力で設定可能です。
読みやすさを最優先に、背景色とのコントラストを意識して選ぶようにしましょう。
背景色と不透明度の設定
サイドバーで背景色を設定することもできます。
背景色は、フルワイドブロック全体の背景に適用される色のことです。
サイトのメインカラーの色調と調和する色を選ぶと、統一感のあるデザインになるのでおすすめです。
背景色（青）
上下のPADDING 量：20
背景色（赤）
上下のPADDING 量：20
背景色を設定する場所のすぐ下に、「背景色の不透明度」という項目があります。
不透明度は、設定した色の濃さを0％（透明）から100％（完全不透明）まで調整できるものです。
背景色（青）_不透明度25％
上下のPADDING 量：20
背景色（青）_不透明度50％
上下のPADDING 量：20
背景色（青）_不透明度75％
上下のPADDING 量：20
後ほどQ&Aで理由を説明しますが、原則背景色の不透明度は100％に設定しておきましょう。
背景画像の設定
背景画像を設定すると、フルワイドブロック全体に画像を表示できます。
メディアライブラリから画像を選択するか、外部URLを直接入力することも可能です。
背景画像で設定できる項目は3つあります。
h4：オーバーレイカラーと不透明度
画像を設定すると、前項で説明した「背景色」は「オーバーレイカラー」に、「背景色の不透明度」も「オーバーレイの不透明度」に変わります。
オーバーレイの不透明度を大きくすると色が濃くなり、背景画像が見にくくなります。
h4：固定背景
固定背景とは、ページをスクロールしたときに背景画像が動かず、画像が固定される仕組みのことをいいます。
実際の動きは以下のようになります。
初心者のための SWELL BASE
はじめてでも大丈夫。
ここが、あなたの SWELL BASE。
SEO対策、SWELLのデザインの設定、
便利ツールの紹介、ジャンル選びまで、
初心者にも分かりやすく紹介しています。
オーバーレイカラー：青
オーバーレイの不透明度：30％
背景効果：固定背景
h4：パララックス効果をつける
パララックス効果はページをスクロールしたときに、画像も一緒に動く仕組みです。
実際の動きを以下で確認してみてください。
初心者のための SWELL BASE
はじめてでも大丈夫。
ここが、あなたの SWELL BASE。
SEO対策、SWELLのデザインの設定、
便利ツールの紹介、ジャンル選びまで、
初心者にも分かりやすく紹介しています。
オーバーレイカラー：青
オーバーレイの不透明度：30％
背景効果：パララックス効果をつける
上下の境界線の形状の設定
境界線の形状は、フルワイドブロックの上下の端を変化させる機能です。
形状・・・斜線
上部の境界線の高さレベル・・・5
下部の境界線の高さレベル・・・5
形状・・・円
上部の境界線の高さレベル・・・5
下部の境界線の高さレベル・・・5
形状・・・波
上部の境界線の高さレベル・・・5
下部の境界線の高さレベル・・・5
形状・・・ジグザグ
上部の境界線の高さレベル・・・5
下部の境界線の高さレベル・・・5
「上下の境界線の形状」は「斜線」・「円」・「波」・「ジグザグ」の4種類から選択できます。
また、「上下の境界線の高さレベル」は効果の強さを設定します。数値が大きいほど角度がついて形状がはっきりとします。
なお、この機能は背景に色を設定した場合のみ使用できます。
背景画像を設定した場合、境界線の形状は直線だけとなってしまいますので注意しましょう。
フルワイドに最適な背景画像サイズ
ここまでフルワイドブロックの背景画像の設定を見てきました。
それでは背景画像に最適なサイズはどのぐらいなのでしょう？
ここではPC画面に最適な背景画像のサイズと、リサイズする方法について解説します。
PC画面解像度に最適なサイズ設定
背景画像の横幅は1920pxに設定することをおすすめします。
というのも、日本国内のPC画面解像度統計によると、1920×1080pxの画面サイズが最も多く使用されているからです。
高さは使用する内容に応じて自由に設定して構いません。
横幅1920pxを基準にすることで、大部分のPC環境で鮮明な画像を表示できるようになります。
Canvaで画像をリサイズする方法
既存の画像をフルワイドに最適なサイズに変更するには、無料のデザインツール「Canva」が最も簡単でおすすめです。
Canvaのカスタムサイズ機能で横幅に「1920」を、高さに任意の数値を入力し、画像をアップロードして範囲いっぱいまで調整するだけで完了します。
実際にやってみましょう。
Canvaを開き、カスタムサイズをクリックしてください。
①「幅」に1920、「高さ」に1080と入力し、②「新しいデザインを作成」をクリックしましょう。
高さは、1080pxとしました。
左のサイドバーにある①「アップロード」をクリックし、②「ファイルをアップロード」ボタンをクリックして画像をアップロードしてください。
アップロードした画像をクリックしてください。
キャンバスに画像が挿入されます。
キャンバスに挿入された画像をキャンバスいっぱいになるまで広げましょう。
画像によってはカットされる部分がでてきますので、位置を調整してください。
位置を修正したら、①「共有」⇒②「ダウンロード」の順にクリックします。
ファイルの種類を選択し（PNGを推奨）、「ダウンロード」ボタンをクリックしてください。
アッフィーこれで画像サイズの変更は完了です。
【実例】SWELLフルワイドブロックでおすすめな活用例4つ
フルワイドブロックの具体的な活用方法と作成手順を4つ紹介します。
いずれも実際のサイト制作で役立つテクニックです。
順番に見ていきましょう。
フルワイドに透過した画像を挿入する
フルワイドブロック内には、段落・画像・ボタンなど様々なブロックを自由に配置できます。
たとえば背景画像を設定したフルワイドブロックに、ロゴ画像を重ねて表示することも可能です。
オーバーレイカラーの不透明度を調整して背景画像を適度に薄くすれば、文字や画像が見やすくなります。
上記のサンプルの作成手順は以下のとおりです。
フルワイドブロックを挿入したら、セクション見出しを削除します。
「+」をクリックして、SWELLフルワイドブロック内に画像ブロックを挿入してください。
画像ブロックに画像をアップロードします。
サイドバーの「メディアから選択」をクリックして背景画像をアップロードします。
最後にオーバーレイカラーと不透明度を調整して完成です。
セクション見出しに画像を挿入する
フルワイドブロックを設置すると自動でセクション見出しが挿入されますが、そのセクション見出しには、インライン画像機能で画像を挿入できます。
Canvaで作成したロゴやアイコンを見出しに組み込めば、文字では伝えきれない雰囲気を作り出すことができます。
画像内のテキストもGoogleに見出しとして認識されるので、SEO効果も期待できます。
フルワイドブロック内のセクション見出しに画像を設置する方法は次の通りです。
サイドバーの「メディアから選択」をクリックして、フルワイドブロックに背景画像をアップロードします。
オーバーレイカラーと不透明度を調整しましょう。
セクション見出しを選択した状態で、ブロックツールバーの「インライン画像」をクリックして画像を挿入してください。
挿入した見出しの画像サイズは、セクション見出しを選択すると表示される入力ボックスの「幅」の数値で調整しましょう。
入力したら「適用」をクリックしてください。
以上の手順でセクション見出しに画像を挿入できます。
フルワイドブロックを隙間なく連続させる
フルワイドブロックを連続して並べると隙間なく表示されるので、きれいなトップページを作成できます。
例えば会社紹介ページなら、企業紹介、企業理念、サービス内容、実績などの順番で4つのフルワイドブロックを配置すれば、ストーリー性のあるページ構成が完成します。
（株）SWELL BASE
WordPressテーマ「SWELL」で美しいサイトを簡単に
企業理念
「誰もが美しいサイトを、簡単に」
専門知識がなくても美しく機能的なWebサイトを作成できる世界を目指しています。技術的な壁を取り払い、より多くの人がWebを通じて価値ある情報を発信できる環境を提供します。
サービス内容
WordPressテーマ「SWELL」
主な特徴
- 美しいデザイン: モダンで洗練されたテンプレート
- 高速パフォーマンス: 最新技術による軽量設計
実績
販売実績
以下に連続したフルワイドブロックを隙間なく表示させる手順を解説します。
フルワイドブロックを挿入したら、セクション見出しを削除してください。
テキストを入力しましょう。
テキストを入力したら、サイドバーの「コンテンツサイズ」でサイズ設定をします。
今回、「コンテンツの横幅をどこに揃えるか」はフルワイドを選択、
「上下のPADDING量」はPC・SPともに20を選択しました。
サイズ設定が完了したら、背景色を設定しましょう。
カスタムカラー（〇）をクリックしてください。
カラーチャートが表示されるので、好きな色を選択します。
背景色の設定が完了したら、境界線の形状を設定していきましょう。
「下部の境界線の形状」を「波」にしました。
また、「下部の境界線の高さレベル」を「2.5」としました。
1つ目のフルワイドブロックが完成したので、その下に2つ目のフルワイドブロックを挿入していきましょう。
2つ目のフルワイドブロックも1つ目と同様に設定していきます。
違うのは、テキストと背景色です。
境界線の形状については。上下に設置するフルワイドの境界線の形状を活かすため、2つ目のフルワイドの境界線を設定しません。
次は3つ目のフルワイドブロックです。
テキストを入力し背景色を設定したら、境界線も設定しましょう。
PADDINGを20に設定しているため、2つ目のフルワイドのテキストと3つ目のフルワイドの間隔が狭くなってしまいました。
間隔をあけるため、テキストの下にスペーサーブロックを挿入します。
そして、4つ目のフルワイドを設置しましょう。
設定項目は、テキストの入力と背景色の選定です。
上部、下部の境界線の形状の設定はしません。
これで、フルワイドブロックを隙間なく連続させるページが完成します。
画像背景に境界線の形状を設定する
フルワイドブロックに背景画像を設定すると、境界線の形状変更ができません。
しかしちょっと工夫すれば、以下のように背景画像の境界線にも変化をつけることができます。
その方法は、背景画像を設定したフルワイドブロックを境界線の形状をつけた色付きのフルワイドでサンドイッチするだけです。
上下のフルワイドブロックは、不透明度を100%に設定し、背景画像付きフルワイドブロックに接する側の境界線だけ形状をつけましょう。
手順は以下のとおりです。
フルワイドブロックを挿入したら、見出しを削除し上下のPADDING量を設定しましょう。
今回は「20」に設定します。
PADDING量を設定したら背景色を設定してください。
境界線の形状は下の部分だけ「波」高さレベルは「2.5」に設定します。
フルワイドブロックを挿入したら背景画像をアップロードし、背景効果を「固定背景」に設定しましょう。
アッフィーセクション見出しは削除しておいてくださいね
背景画像の高さを調整するため、高さ100pxのスペーサーを挿入しました。
3つ目のフルワイドを挿入し、見出しを削除したうえで上下のPADDING量を「20」に設定してください。
背景色を設定し、上部の境界線の形状を「波」、高さレベルを「2.5」に設定します。
アッフィー以上で境界線の形状のある背景画像の完成です。
これはけっこう使えそうなので、ぜひ覚えておいてください！
SWELLフルワイドブロックに関するよくある質問と回答
フルワイドブロック使用時によくあるトラブルと解決方法をまとめました。
これらを押さえておけば、スムーズにフルワイドブロックを活用できますよ。
フルワイドにならないのはなぜですか？
フルワイドブロックが画面幅いっぱいに表示されない場合、2つの設定を確認してください。
サイドバーが非表示になっているか？
まず、サイドバーが表示されていないかチェックしてください。
フルワイドブロックはサイドバー非表示時の使用が前提となっているためです。
サイドバーを非表示にする方法は2つあります。
編集画面で設定する方法
1つ目は記事の編集画面のサイドバーでサイドバーを非表示にする方法です。
設定をクリックしてサイドバーを表示させます。
投稿タブをクリックし、「表示の上書き設定」にある「サイドバー」を非表示に設定してください。
これでこのページはサイドバーがなくなり、フルワイド表示となります。
カスタマーザーで設定する方法
カスタマーザーで設定すると投稿ページ、固定ページなど、ページの種類でサイドバーを非表示にできます。
手順は以下のとおりです。
まずはWordPress管理画面から「外観」⇒「カスタマイズ」の順にクリックしてください。
「サイドバー」をクリックします。
「サイドバーを表示するかどうか」で、サイドバーを非表示にしたい種類のページのチェックを外し、「公開」をクリックしてください。
これでフルワイドにならないトラブルを解決できます。
「コンテンツの背景を白にする」がオフになっているか
「コンテンツの背景を白にする」がオンになっている場合もフルワイド表示されません。
なので、「コンテンツの背景を白にする」をオフにしてフルワイド表示できるようにしましょう。
「コンテンツの背景を白にする」をオフにする手順は以下のとおりです。
WordPress管理画面から「外観」⇒「カスタマイズ」の順にクリックしてください。
「サイト全体設定」⇒「基本デザイン」の順にクリックしましょう。
「コンテンツの背景を白にする」をオフにし、「公開」をクリックします。
これでフルワイド表示できるようになります。
境界線が重なって表示されるのはなぜですか？
複数のフルワイドブロックを連続使用した際に、下図のように境界線が重なって見える場合がよくあります。
このように重なって見える原因は、接する境界線の形状をそれぞれのフルワイドブロックで設定してしまっているからです。
このように境界線が重なってしまう場合は、片方のフルワイドブロックの高さレベルを「0」にしてあげると解消します。
アッフィー接する境界線の片方の「高さレベル」は「0」にしてあげましょう
背景色が薄く表示されるのはなぜですか？
連続するフルワイドブロックの境界線付近で背景色が薄く表示されてしまうことがあります。
境界線付近で背景色が薄く表示される場合、不透明度の設定が原因です。
背景色の不透明度が100%未満に設定されていると、色が薄くなったり意図しない線が表示されたりします。
なので、右サイドバーの「背景色の不透明度」を100%に調整してください。
もし薄い色を使いたい場合は、不透明度で調整するのではなく、最初から薄い色を選択し不透明度を100％にすることをおすすめします。
アッフィー不透明度は、背景画像を設定したときのオーバーレイカラーの透明度だけに使った方がいいですね
SWELLフルワイドブロックで魅力的なサイトを作ろう
今回は、SWELLフルワイドブロックの使い方から活用例まで解説しました。
本記事の内容は以下のとおりです。
SWELLフルワイドブロックを活用すれば、通常のブログ記事とは一味違うサイト型トップページが簡単に作成でき、読者に好感と信頼感を持ってもらえます。
ぜひ今回紹介した方法を参考に、読者に好感を持ってもらえるサイトづくりに取り組んでみてください。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、ワイドブロックが使いやすいSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
