初めてサイト型のブログをSWELLで作ると、必ず使うといっていのがワイドブロックです。
トップページをフルワイドにするときに、私自身やった失敗
それが次の2つ
- プレビューや投稿後のサイト確認で境界線がズレてしまう
- 管理画面ではきちんと表示されてる
こんな時は、設定が間違っています!
簡単に解消することがでるので紹介します
目次
【SWELL】フルワイドで境界線が重なってしまう時の対処方法
![](https://yarunomi.com/wp-content/uploads/2021/06/kasanaru.jpg)
連続してフルワイドを使用する場合は片方だけ設定
私は、連続してフルワイドブロックを使う場合
- 上のフルワイドの下部の境界線の形状
- 下のフルワイドの上部の境界線の形状
この2つを同じ設定にすると勝手に思い込んでいました。
ですが実際は違います
連続して使う場合、重なる部分は片方だけ形状と高さレベルを設定すればOKです
実際の設定方法を画像付きで説明
実際に上部の境界線の形状を波で高さレベルを3にした場合の設定を見てみましょう
上のフルワイド
![](https://yarunomi.com/wp-content/uploads/2021/06/nami3.jpg)
下のフルワイド
![](https://yarunomi.com/wp-content/uploads/2021/06/nami4.jpg)
今回の場合は、下記の設定で綺麗な波線が表示されます
- 上のフルワイド【下部の境界線】で形状を変え
- 形状は好きなものを、高さレベルを2以上にすると綺麗に見えます
- 下のフルワイド【上部の境界線】は何もしない
- 形状はどれでもOK!高さレベルを0にします
編集画面では境界線がズレて見える
私のように間違えてしまうのは、管理画面とプレビューで確認した時に見える状態が逆になるからです
例えばこんな感じです
正しい設定をしたとき
編集画面の表示
![](https://yarunomi.com/wp-content/uploads/2021/06/namidayo2.jpg)
投稿後の表示
![](https://yarunomi.com/wp-content/uploads/2021/06/namidayo1.jpg)
間違えた設定をしたとき
編集画面の表示
![](https://yarunomi.com/wp-content/uploads/2021/06/namidayo5.jpg)
投稿後の表示
![](https://yarunomi.com/wp-content/uploads/2021/06/namidayo3-1.jpg)
こんな感じで編集画面の見た目と、実際の見た目が逆になるので、必ずプレビューで確認してください
SWELLのフルワイドブロックで形状(波やジグザグ)が反映されない時
フォーラムの中で、一度会った現象です
![](https://yarunomi.com/wp-content/uploads/2024/04/asahi27-150x150.png)
薄情しますが、私も一度やったことがあります
フルワイドブロックの中にフルワイドが入っている
![](https://yarunomi.com/wp-content/uploads/2021/06/huruwaido.jpg)
![](https://yarunomi.com/wp-content/uploads/2021/06/huruwaido.jpg)
フルワイドブロックの中に、フルワイドブロックを作ってしまう時に起こります。
フルワイドの中に作ったフルワイドを削除して、別に作り直してください
まとめ
SWELLのフルワイドブロックを連続して使うとき、境界線が重なってしまう時は
どちらか片方の境界線の高さレベルを0にすることで解消できます
フルワイドの形状が、プレビューで反映されない場合は
フルワイドの中にフルワイドが入っていることが考えられます
この方法を試しても解消しない場合は、フォーラム内で質問してみましょう!
コメント