SWELLフルワイドブロックの使い方｜サイト型トップページのカスタマイズ解説

2024年9月15日

当ページは広告が含まれているリンクがあります。

URLをコピーしました！

本記事では、SWELLのフルワイドブロックの使い方やデザイン例について詳しく解説します。

この記事の内容

SWELLのフルワイドブロックの使いかた
フルワイドブロックのすべての表現パターン実例
サイト型トップページのカスタマイズに役立つフルワイドブロックの活用方法

もふこです

フルワイドブロックの説明 (1)

SWELLを使っている綺麗な見た目のサイトでは必ずと言っていいほど使われているフルワイドブロック。

サイト型トップページにカスタマイズする時は使用必須のブロックです！

取り入れるだけであっという間におしゃれなサイトになるので、ぜひここで覚えて使いこなしましょう。

この記事の内容は2024年9月時点の情報です。

[SWELLバージョン: 2.12]

最新情報についてはSWELL公式サイトをご確認ください。

Canvaでブログアイキャッチ等の公式テンプレを作ってます。
クリエイターページのフォローをしていただけるととっても励みになります！

フルワイドブロックの挿入方法

さっそく、フルワイドブロックの挿入方法から解説していきます。

STEP

ブロック一覧からフルワイドを選択

ブロックのメニューから【フルワイド】のボタンを探すか、検索窓に「フルワイド」と入れて探します。

「 / 」（スラッシュ）からでも出せます。見つけたらクリックしてください。

STEP

挿入されました

「フルワイド」をクリックするだけで、かんたんにフルワイドブロックが挿入されました。

もふこ

これは基本形なので、ここから自分好みにカスタマイズしていきましょう！

注意

フルワイドブロックを使用するときはサイドバーの表示をオフにしましょう。

サイドバーがあるとせっかくのフルワイドブロックがきれいに表示されません。

【外観】→【カスタマイズ】→【サイドバー】から適宜変更できます。

フルワイドブロックのカスタム設定

フルワイドブロックの設定項目は大きく分けて以下の４つです。

フルワイドブロックの設定項目

コンテンツの横幅のサイズ
上下のpedding量（余白の量）
ブロック全体のカラーや背景画像
上下の境界線の形状

順番に解説していきます。

コンテンツの横幅のサイズ

まずは、コンテンツの横幅を決めます。

わかりやすくいうと「フルワイド内に配置するテキストや画像などの横幅をどこまで広げるか」ということですね。

文章だとイメージしにくいので実際に見てみましょう。

コンテンツの横幅の見た目の違い

記事幅だとこう

記事に合わせて狭め。両端の余白が十分あります。

サイト幅だとこう

サイトの幅に合わせて少し広め。
（スマホ表示だと記事幅と変わらないかも。PCだと変わるのでスマホの方はPC版表示にして見てみてくださいね。）

フルワイドだとこう

使える幅は端から端まで全部使っちゃうよ〜というのがフルワイド幅です。このテキストも両端いっぱいに広がっていますよね。

もふこ

この横幅をどこに合わせるかはお好みなので、試してみて使いやすい幅を選んでくださいね。

上下のpadding量（余白の量）

上下のpadding量の設定をわかりやすくいうと、「上下の余白をどれだけ取るかによってフルワイドブロックの高さが変わるよ」ということですね。

これも実際に、余白の量の違いでどのくらい高さが変わるのかを見てみましょう。

上下のpadding量の見た目の違い

余白量:20(PC/SP)

余白量:40(PC/SP)

余白量:60(PC/SP)

余白量:80(PC/SP)

余白量をどのくらい取るかによって、高さがだいぶ変わりましたね。

ただ、通常このフルワイドブロックにはコンテンツを色々配置していくと思うので、当然ながらコンテンツの高さに合わせてフルワイドブロックの高さは変わっていきます。

投稿リストやカラムブロックなど、コンテンツを配置したあとに余白の量を調整して、ちょうどいい高さにしてくださいね。