悩む人
ブロック間の区切り線の形状を変える方法を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- 区切り線(ブロック上下の境界線の形状)を変える方法
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容
【SWELL】区切り線(ブロック上下の境界線の形状)を変える方法
以下の順に解説していきます。
- 本来の「区切り(線)」とは
- 今回紹介する「区切り線(ブロック上下の境界線の形状)」とは
- 実際に「区切り線(ブロック上下の境界線の形状)」を変える
本来の区切り(線)とは
「ブロック挿入ツールを切り替え」>「ブロック」>「デザイン」内にある「区切り」のことです。
今回紹介する区切り線(ブロック上下の境界線の形状)とは
「ブロック挿入ツールを切り替え」>「ブロック」>「SWELLブロック」内にある「フルワイド」、こちらのブロック上下の境界線(上下の青線)のことです。
実際に区切り線(ブロック上下の境界線の形状)を変える
今回紹介する区切り線(ブロック上下の境界線の形状)を使う場面は、サイト型のトップページであったり、固定ページ、LP(ランディングページ)だと思いますので、固定ページで作成していきます。
管理画面メニューから、「固定ページ」>「新規追加」を選択します。
「ブロック挿入ツールを切り替え」>「ブロック」>「SWELLブロック」>「フルワイド」を選択します。
フルワイドの「テキストカラー」と「背景色」を決めます。
※ブロックの形状を分かりやすくするためです。
- テキストカラー:白(#FFF)
- 背景色:#04384C
フルワイドの上下の境界線の形状を変える
画像の赤枠内を調整して上下の境界線の形状を変えます。
具体例
※タブ内の画像はプレビュー画面で確認しています。
- 上部の境界線の形状:斜線
- 上部の境界線のレベルの高さ:5
- 下部の境界線の形状:斜線
- 下部の境界線のレベルの高さ:5
今回の記事を参考にしつつ色々と触ってみることで実装の幅を増やして頂ければと思います。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELLブロックエディタ使い方ガイド】テーマ専用機能まとめ
SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
今回は以上です。