【SWELL】フルワイドにならないを解決【ブロックの使い方も解説】

こういった悩みにお答えします。

是非、最後までご覧ください。

【SWELL】「フルワイドにならない」の解決方法

フルワイドとは

フルワイドになっている

「Full Wide Block.」と書かれたブロックの背景色がフルワイド（画面横幅いっぱい）になっています。

フルワイドになっていない

「Full Wide Block.」と書かれたブロックの背景色がサイト幅になっています。

フルワイドにならない理由

管理画面メニューから、「外観」＞「カスタマイズ」を選択します。

左サイドバーから、「サイト全体設定」を選択します。

サイト全体設定から、「基本デザイン」を選択します。

基本デザインから、「サイト全体の見た目」を探します。

この場合、フルワイドになりません。

フルワイドにするには

基本デザインから、「サイト全体の見た目」を探します。

これで、フルワイドになります。

【SWELL】「フルワイドにならない」が解決   フルワイドブロックの使い方を解説【前半】

以下の順に解説していきます。

フルワイドブロックを挿入

管理画面メニューから、「固定ページ」＞「新規固定ページを追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「SWELLブロック」＞「フルワイド」を選択します。

背景画像を挿入する方法

 （設定）から、「ブロック」＞「背景画像の設定」を開きます。

画像を挿入しました。

背景画像に文字を重ねる方法

「見出し」を改行すると「段落」が挿入されます。

「見出し」と「テキスト」を入力することで背景画像に文字を重ねることができます。

背景画像をスクロール時に固定して表示させる方法

あわせて読みたい

【SWELL】背景画像をスクロール時に固定して表示させる方法 SWELLで背景画像をスクロール時に固定して表示させる方法を知りたいですか？本記事では、SWELLブロックのフルワイドを用いて背景画像をスクロール時に固定して表示させる方法を解説しています。SWELLで背景画像をスクロール時に固定して表示させる方法を知りたい方は是非ご覧ください。

区切り線（ブロック上下の境界線の形状）を変える方法

あわせて読みたい

【SWELL】区切り線（ブロック上下の境界線の形状）を変える方法 SWELLの区切り線（ブロック上下の境界線の形状）を変える方法を知りたいですか？本記事では、SWELLブロック内にあるフルワイドの上下の境界線の形状を変える方法を解説しています。SWELLの区切り線（ブロック上下の境界線の形状）を変える方法を知りたい方は是非ご覧ください。

【SWELL】「フルワイドにならない」が解決   フルワイドブロックの使い方を解説【後半】

以下の順に挿入や設定方法を解説していきます。

「他のブロック」を挿入

「見出し」を選択し改行します。

改行すると「段落」が挿入されます。

（ブロック挿入ツールを切り替え）の「ブロック」から、他のブロックを挿入することができます。

開くと挿入できるブロックが見れます！

「背景色」の設定

 （設定）から、「ブロック」＞「カラー設定」を開きます。

下記の赤枠にカラーコードを入力すると背景色が変わりますが、以下から決めることもできます。

「テキストカラー」の設定

 （設定）から、「ブロック」＞「カラー設定」を開きます。

下記の赤枠にカラーコードを入力するとテキストカラーが変わりますが、以下から決めることもできます。

「コンテンツの横幅をどこに揃えるか」の設定

 （設定）から、「ブロック」＞「コンテンツサイズ」を開きます。

下記タブの「コンテンツの横幅をどこに揃えるか」でテキストの位置が変わります。

上下のPADDING量

 （設定）から、「ブロック」＞「コンテンツサイズ」を開きます。

※ 赤枠が上下のPADDING量になります。

「背景色の不透明度」の設定

 （設定）から、「ブロック」＞「カラー設定」を開きます。

背景色の不透明度を変えることができます。

「オーバーレイの不透明度」の設定

 （設定）から、「ブロック」＞「背景画像の設定」を開きます。

背景画像の不透明度を変えることができます。

「焦点ピッカー」の設定

 （設定）から、「ブロック」＞「背景画像の設定」を開きます。

背景画像を表示させる位置を変えることができます。

今回は以上です。