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

当ページのリンクには広告が含まれています。
初心者ブロガー

ブロック間の区切り線の形状を変える方法を教えてほしいです。

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

本記事で学べること

  • 区切り線(ブロック上下の境界線の形状)を変える方法
本記事の内容

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

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

  • 本来の「区切り(線)」とは
  • 今回紹介する「区切り線(ブロック上下の境界線の形状)」とは
  • 実際に「区切り線(ブロック上下の境界線の形状)」を変える

本来の区切り(線)とは

「ブロック挿入ツールを切り替え」>「ブロック」>「デザイン」内にある「区切り」のことです。

今回紹介する区切り線(ブロック上下の境界線の形状)とは

「ブロック挿入ツールを切り替え」>「ブロック」>「SWELLブロック」内にある「フルワイド」、こちらのブロック上下の境界線(上下の青線)のことです。

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

今回紹介する区切り線(ブロック上下の境界線の形状)を使う場面は、サイト型のトップページであったり、固定ページ、LP(ランディングページ)だと思いますので、固定ページで作成していきます。

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

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

フルワイドの「テキストカラー」と「背景色」を決めます。

※ブロックの形状を分かりやすくするためです。

  • テキストカラー:白(#FFF)
  • 背景色:#04384C

フルワイドの上下の境界線の形状を変える

画像の赤枠内を調整して上下の境界線の形状を変えます。

具体例

※タブ内の画像はプレビュー画面で確認しています。

  • 上部の境界線の形状:斜線
  • 上部の境界線のレベルの高さ:5
  • 下部の境界線の形状:斜線
  • 下部の境界線のレベルの高さ:5

今回の記事を参考にしつつ色々と触ってみることで実装の幅を増やして頂ければと思います。

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

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

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

おわり。

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

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