![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
SWELLブロックのフルワイドが「フルワイドにならない(画面横幅いっぱい)」んだけどナゼ?解決方法を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 「フルワイドにならない」を解決する方法
- フルワイドに背景画像を挿入する方法
- フルワイドに挿入した背景画像に文字を重ねる方法
- 背景画像をスクロール時に固定して表示させる方法
- 区切り線(ブロック上下の境界線の形状)を変える方法
- 上記以外のフルワイドブロックの使い方
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELL】「フルワイドにならない」の解決方法
フルワイドとは
フルワイドになっている
「Full Wide Block.」と書かれたブロックの背景色がフルワイド(画面横幅いっぱい)になっています。
![](https://hrdyuic.com/wp-content/uploads/9c303078b0038ce079ac0c7487d63d9b.jpg)
![](https://hrdyuic.com/wp-content/uploads/9c303078b0038ce079ac0c7487d63d9b.jpg)
フルワイドになっていない
「Full Wide Block.」と書かれたブロックの背景色がサイト幅になっています。
![](https://hrdyuic.com/wp-content/uploads/090b29e14f5b0ae21b7aec9a60897c22.jpg)
![](https://hrdyuic.com/wp-content/uploads/090b29e14f5b0ae21b7aec9a60897c22.jpg)
フルワイドにならない理由
管理画面メニューから、「外観」>「カスタマイズ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/4335b0f30f4dc23f38666496a1d2c508.jpg)
![](https://hrdyuic.com/wp-content/uploads/4335b0f30f4dc23f38666496a1d2c508.jpg)
左サイドバーから、「サイト全体設定」を選択します。
![](https://hrdyuic.com/wp-content/uploads/8296c619f65dbe8c59261ba9a60d6393.jpg)
![](https://hrdyuic.com/wp-content/uploads/8296c619f65dbe8c59261ba9a60d6393.jpg)
サイト全体設定から、「基本デザイン」を選択します。
![](https://hrdyuic.com/wp-content/uploads/e14e99f94d09d257ae3e32071789db20.jpg)
![](https://hrdyuic.com/wp-content/uploads/e14e99f94d09d257ae3e32071789db20.jpg)
基本デザインから、「サイト全体の見た目」を探します。
- コンテンツの背景を白にする:「オン」が選択されている。
この場合、フルワイドになりません。
![](https://hrdyuic.com/wp-content/uploads/9010093fca1d78b90dbd4cb00642f26b-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/9010093fca1d78b90dbd4cb00642f26b-1.jpg)
フルワイドにするには
基本デザインから、「サイト全体の見た目」を探します。
- コンテンツの背景を白にする:「オフ」を選択します。
これで、フルワイドになります。
![](https://hrdyuic.com/wp-content/uploads/5facb8751fffca853938a9b792ef885a.jpg)
![](https://hrdyuic.com/wp-content/uploads/5facb8751fffca853938a9b792ef885a.jpg)
【SWELL】「フルワイドにならない」が解決
フルワイドブロックの使い方を解説【前半】以下の順に解説していきます。
- 背景画像を挿入する方法
- 背景画像に文字を重ねる方法
- 背景画像をスクロール時に固定して表示させる方法
- 区切り線(ブロック上下の境界線の形状)を変える方法
フルワイドブロックを挿入
管理画面メニューから、「固定ページ」>「新規固定ページを追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/9dfc7e147b5499b2967955f15a9163c1.jpg)
![](https://hrdyuic.com/wp-content/uploads/9dfc7e147b5499b2967955f15a9163c1.jpg)
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「フルワイド」を選択します。
![](https://hrdyuic.com/wp-content/uploads/5dbb25a19cf59526245633c4834035fa.jpg)
![](https://hrdyuic.com/wp-content/uploads/5dbb25a19cf59526245633c4834035fa.jpg)
背景画像を挿入する方法
(設定)から、「ブロック」>「背景画像の設定」を開きます。
- 画像URL:「URLを直接入力できます」or「メディアから選択」より画像を挿入します。
![](https://hrdyuic.com/wp-content/uploads/8d1afbd665fd54eb30e61a24bacf9120-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/8d1afbd665fd54eb30e61a24bacf9120-1.jpg)
画像を挿入しました。
![](https://hrdyuic.com/wp-content/uploads/210bc0a61b4f045d72bdee565126af72-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/210bc0a61b4f045d72bdee565126af72-1.jpg)
背景画像に文字を重ねる方法
「見出し」を改行すると「段落」が挿入されます。
![](https://hrdyuic.com/wp-content/uploads/1b5bcd9267cf343c0863501838d8250d.jpg)
![](https://hrdyuic.com/wp-content/uploads/1b5bcd9267cf343c0863501838d8250d.jpg)
「見出し」と「テキスト」を入力することで背景画像に文字を重ねることができます。
![](https://hrdyuic.com/wp-content/uploads/8795c4fa3d72e17bebd35cf1115a133d.jpg)
![](https://hrdyuic.com/wp-content/uploads/8795c4fa3d72e17bebd35cf1115a133d.jpg)
背景画像をスクロール時に固定して表示させる方法
![](https://hrdyuic.com/wp-content/uploads/suitcase-3524502_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/suitcase-3524502_1920.jpg)
区切り線(ブロック上下の境界線の形状)を変える方法
![](https://hrdyuic.com/wp-content/uploads/pencil-3744152_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/pencil-3744152_1920.jpg)
【SWELL】「フルワイドにならない」が解決
フルワイドブロックの使い方を解説【後半】以下の順に挿入や設定方法を解説していきます。
- 他のブロックを挿入
- 背景色
- テキストカラー
- コンテンツの横幅をどこに揃えるか
- 背景色の不透明度
- オーバーレイの不透明度
- 焦点ピッカー
「他のブロック」を挿入
「見出し」を選択し改行します。
![](https://hrdyuic.com/wp-content/uploads/f6afff3a78f53c5fe66dbeb03588c047.jpg)
![](https://hrdyuic.com/wp-content/uploads/f6afff3a78f53c5fe66dbeb03588c047.jpg)
改行すると「段落」が挿入されます。
![](https://hrdyuic.com/wp-content/uploads/10dfa36b0fb0629bb5fae3ba089ff004.jpg)
![](https://hrdyuic.com/wp-content/uploads/10dfa36b0fb0629bb5fae3ba089ff004.jpg)
(ブロック挿入ツールを切り替え)の「ブロック」から、他のブロックを挿入することができます。
![](https://hrdyuic.com/wp-content/uploads/9b8b692f3820f57d3927683cee7926b3.jpg)
![](https://hrdyuic.com/wp-content/uploads/9b8b692f3820f57d3927683cee7926b3.jpg)
開いて見る
![](https://hrdyuic.com/wp-content/uploads/50cd8eea25f342976669af2cd144008f.jpg)
![](https://hrdyuic.com/wp-content/uploads/50cd8eea25f342976669af2cd144008f.jpg)
![](https://hrdyuic.com/wp-content/uploads/5313d180066d6e8b6e24ba1a92c25bd6.jpg)
![](https://hrdyuic.com/wp-content/uploads/5313d180066d6e8b6e24ba1a92c25bd6.jpg)
![](https://hrdyuic.com/wp-content/uploads/8fea357137d7f38c64444314657d2539.jpg)
![](https://hrdyuic.com/wp-content/uploads/8fea357137d7f38c64444314657d2539.jpg)
![](https://hrdyuic.com/wp-content/uploads/bfe2a3cbf55a5dbb95b24cf7856b1547.jpg)
![](https://hrdyuic.com/wp-content/uploads/bfe2a3cbf55a5dbb95b24cf7856b1547.jpg)
![](https://hrdyuic.com/wp-content/uploads/cb2e0135bd723f1bcca743a059c162fa.jpg)
![](https://hrdyuic.com/wp-content/uploads/cb2e0135bd723f1bcca743a059c162fa.jpg)
![](https://hrdyuic.com/wp-content/uploads/695bfe6b0cd9f603695824f2418c03f3.jpg)
![](https://hrdyuic.com/wp-content/uploads/695bfe6b0cd9f603695824f2418c03f3.jpg)
「背景色」の設定
(設定)から、「ブロック」>「カラー設定」を開きます。
- 背景色:「好きな色を選択できます。」を選択します。
![](https://hrdyuic.com/wp-content/uploads/4c4b60de5cfafd72a66d2772d00357bf-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/4c4b60de5cfafd72a66d2772d00357bf-1.jpg)
下記の赤枠にカラーコードを入力すると背景色が変わりますが、以下から決めることもできます。
- RGB
- HSL
- Hex ※ 今回は、こちらを使用しました。
![](https://hrdyuic.com/wp-content/uploads/a54766723a1596decf7c33892c816e61.jpg)
![](https://hrdyuic.com/wp-content/uploads/a54766723a1596decf7c33892c816e61.jpg)
「テキストカラー」の設定
(設定)から、「ブロック」>「カラー設定」を開きます。
- テキストカラー:「赤枠」を選択します。
![](https://hrdyuic.com/wp-content/uploads/e113c05f91273e9173bac9fd5c1c2c48.jpg)
![](https://hrdyuic.com/wp-content/uploads/e113c05f91273e9173bac9fd5c1c2c48.jpg)
下記の赤枠にカラーコードを入力するとテキストカラーが変わりますが、以下から決めることもできます。
- RGB
- HSL
- Hex ※ 今回は、こちらを使用しました。
![](https://hrdyuic.com/wp-content/uploads/c0c605793428e5131c3c536d7f5ba81d.jpg)
![](https://hrdyuic.com/wp-content/uploads/c0c605793428e5131c3c536d7f5ba81d.jpg)
「コンテンツの横幅をどこに揃えるか」の設定
(設定)から、「ブロック」>「コンテンツサイズ」を開きます。
![](https://hrdyuic.com/wp-content/uploads/f713174718febe468d5ed70899fa6873.jpg)
![](https://hrdyuic.com/wp-content/uploads/f713174718febe468d5ed70899fa6873.jpg)
下記タブの「コンテンツの横幅をどこに揃えるか」でテキストの位置が変わります。
投稿画面
![](https://hrdyuic.com/wp-content/uploads/30eb708c3a0783012c3fd4da570846aa.jpg)
![](https://hrdyuic.com/wp-content/uploads/30eb708c3a0783012c3fd4da570846aa.jpg)
投稿を表示
![](https://hrdyuic.com/wp-content/uploads/a3e26b4d91ba9eec29c18454078b035e.jpg)
![](https://hrdyuic.com/wp-content/uploads/a3e26b4d91ba9eec29c18454078b035e.jpg)
上下のPADDING量
(設定)から、「ブロック」>「コンテンツサイズ」を開きます。
※ 赤枠が上下のPADDING量になります。
- PADDINNG量(PC):60
- PADDINNG量(SP):40
![](https://hrdyuic.com/wp-content/uploads/421dcc0ce9686fa5089a8e56aaa50c8b.jpg)
![](https://hrdyuic.com/wp-content/uploads/421dcc0ce9686fa5089a8e56aaa50c8b.jpg)
PADDINNG量(PC):60
![](https://hrdyuic.com/wp-content/uploads/2649d8e3e5516d46edb8393d68e8c066.jpg)
![](https://hrdyuic.com/wp-content/uploads/2649d8e3e5516d46edb8393d68e8c066.jpg)
PADDINNG量(SP):40
![](https://hrdyuic.com/wp-content/uploads/ef5bf445e0f1bacf039232094ad6e12a.jpg)
![](https://hrdyuic.com/wp-content/uploads/ef5bf445e0f1bacf039232094ad6e12a.jpg)
- PADDINNG量(PC):40
- PADDINNG量(SP):60
![](https://hrdyuic.com/wp-content/uploads/9851160c6063242987feabd262fd9649.jpg)
![](https://hrdyuic.com/wp-content/uploads/9851160c6063242987feabd262fd9649.jpg)
PADDINNG量(PC):40
![](https://hrdyuic.com/wp-content/uploads/62bf6e8c8aefffd3800d4c39f68f95e6.jpg)
![](https://hrdyuic.com/wp-content/uploads/62bf6e8c8aefffd3800d4c39f68f95e6.jpg)
PADDINNG量(SP):60
![](https://hrdyuic.com/wp-content/uploads/e7da6615e6f95ae8b1edf435a8fbb10f.jpg)
![](https://hrdyuic.com/wp-content/uploads/e7da6615e6f95ae8b1edf435a8fbb10f.jpg)
「背景色の不透明度」の設定
(設定)から、「ブロック」>「カラー設定」を開きます。
背景色の不透明度を変えることができます。
背景色の不透明度:100
![](https://hrdyuic.com/wp-content/uploads/417fe57f0f333a46494d21ab9af2277b.jpg)
![](https://hrdyuic.com/wp-content/uploads/417fe57f0f333a46494d21ab9af2277b.jpg)
背景色の不透明度:70
![](https://hrdyuic.com/wp-content/uploads/0241b6dfeea3dd86fd5385ac70c6b48c.jpg)
![](https://hrdyuic.com/wp-content/uploads/0241b6dfeea3dd86fd5385ac70c6b48c.jpg)
「オーバーレイの不透明度」の設定
(設定)から、「ブロック」>「背景画像の設定」を開きます。
背景画像の不透明度を変えることができます。
オーバーレイの不透明度:50
![](https://hrdyuic.com/wp-content/uploads/a237a7c2a90704e90fe750177ad7e7f7.jpg)
![](https://hrdyuic.com/wp-content/uploads/a237a7c2a90704e90fe750177ad7e7f7.jpg)
オーバーレイの不透明度:0
![](https://hrdyuic.com/wp-content/uploads/df5b9d498dfbd33087cdd6f73269acd9.jpg)
![](https://hrdyuic.com/wp-content/uploads/df5b9d498dfbd33087cdd6f73269acd9.jpg)
「焦点ピッカー」の設定
(設定)から、「ブロック」>「背景画像の設定」を開きます。
背景画像を表示させる位置を変えることができます。
左:50% 右:50%
![](https://hrdyuic.com/wp-content/uploads/c49f9449446c8305b93e24c578fbabf5-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/c49f9449446c8305b93e24c578fbabf5-1.jpg)
左:50% 右:85%
![](https://hrdyuic.com/wp-content/uploads/82c17542500aa7b65d9ad09c6b91a4de.jpg)
![](https://hrdyuic.com/wp-content/uploads/82c17542500aa7b65d9ad09c6b91a4de.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。