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

当ページのリンクには広告が含まれています。
悩む人

SWELLブロックのフルワイドが「フルワイドにならない(画面横幅いっぱい)」んだけどナゼ?解決方法を教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • 「フルワイドにならない」を解決する方法
  • フルワイドに背景画像を挿入する方法
  • フルワイドに挿入した背景画像に文字を重ねる方法
  • 背景画像をスクロール時に固定して表示させる方法
  • 区切り線(ブロック上下の境界線の形状)を変える方法
  • 上記以外のフルワイドブロックの使い方

是非、最後まで読んでみてください。

本記事の内容

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

フルワイドとは

フルワイドになっている

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

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

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

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

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

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

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

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

  • コンテンツの背景を白にする:「オン」が選択されている。

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

フルワイドにするには

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

  • コンテンツの背景を白にする:「オフ」を選択します。

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

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

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

  • 背景画像を挿入する方法
  • 背景画像に文字を重ねる方法
  • 背景画像をスクロール時に固定して表示させる方法
  • 区切り線(ブロック上下の境界線の形状)を変える方法

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

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

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

背景画像を挿入する方法

(設定)から、「ブロック」>「背景画像の設定」を開きます。

  • 画像URL:「URLを直接入力できます」or「メディアから選択」より画像を挿入します。

画像を挿入しました。

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

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

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

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

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

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

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

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

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

  • 他のブロックを挿入
  • 背景色
  • テキストカラー
  • コンテンツの横幅をどこに揃えるか
  • 背景色の不透明度
  • オーバーレイの不透明度
  • 焦点ピッカー

「他のブロック」を挿入

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

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

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

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

「背景色」の設定

(設定)から、「ブロック」>「カラー設定」を開きます。

  • 背景色:「好きな色を選択できます。」を選択します。

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

  • RGB
  • HSL
  • Hex ※ 今回は、こちらを使用しました。

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

(設定)から、「ブロック」>「カラー設定」を開きます。

  • テキストカラー:「赤枠」を選択します。

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

  • RGB
  • HSL
  • Hex ※ 今回は、こちらを使用しました。

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

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

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

投稿画面

投稿を表示

上下のPADDING量

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

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

  • PADDINNG量(PC):60
  • PADDINNG量(SP):40

PADDINNG量(PC):60

PADDINNG量(SP):40

  • PADDINNG量(PC):40
  • PADDINNG量(SP):60

PADDINNG量(PC):40

PADDINNG量(SP):60

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

(設定)から、「ブロック」>「カラー設定」を開きます。

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

背景色の不透明度:100

背景色の不透明度:70

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

(設定)から、「ブロック」>「背景画像の設定」を開きます。

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

オーバーレイの不透明度:50

オーバーレイの不透明度:0

「焦点ピッカー」の設定

(設定)から、「ブロック」>「背景画像の設定」を開きます。

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

左:50% 右:50%

左:50% 右:85%

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容