SVGでセクションの境界をおしゃれにする方法

SVGでセクションの境界をおしゃれにする方法
この記事は約16分で読めます。
当サイトはアフィリエイト広告を利用しています。

セクションの境界を波型や斜めなどおしゃれにカスタマイズする方法をご紹介します。PNG画像でも可能なのですが、今回は軽量でよりレスポンシブデザインに適しているSVGを使用します。

セクションの境界をおしゃれにするってどういうことかにゃ？

セクションの境界をおしゃれにするというのは、例えば、当サイトならフッター部分の境界を波型にしています。

このように、セクションの境界を直線ではなくアレンジしておしゃれにしてみましょう。

境界をアレンジしたいセクションは、メインビジュアルなどの画像、カバーブロックなどが多いかと思うので、それぞれやり方をご紹介します。

おすすめのSVGジェネレーター

境界に使用する波型などのSVGはジェネレーターで生成するのが簡単でおすすめです。ジェネレーターでお好みのデザインを作成してコードを出力すればコピペで簡単に実装できます。ジェネレーターによって出力できるシェイプが異なるので、おすすめのジェネレーターを2つ紹介します。

まずはShape Divider Appです。波やカーブ・三角・斜めなど10種類もの境界線を生成可能です。

Shape Divider App
Create fully responsive shape dividers for your next web project
shapedivider.app

2つ目はSvg Waveです。こちらが生成できるのは波だけですが、グラデーションやアニメーションの設定が可能です。

Svg Wave - A free & beautiul gradient SVG wave Generator.
SVG Wave is a minimal gradient svg wave generator with lot of customization. It lets you abiltiy to generate and export
www.svgwave.in

是非、ジェネレーターを使って理想の境界線を作成してください。

インラインSVGを使って画像の境界を波型にする

画像の境界を波型にしてみましょう。下のサンプルのように、画像の下側を波型にします。Shape Divider Appで波型のSVGを生成し、取得したコードを利用しています。

どのように画像の下側を波型にしているかというと、元の猫画像の下側に白色(背景色)の波型のSVGを配置しています。SVGの色を変えるとどうなってるかわかりやすいと思います。

SVGで境界をアレンジする図解

HTMLとCSSは下記になります。HTMLにインラインでSVGを入れています。

<div class="wave_bottom">
  <img src="画像ファイルのパス">
  <!-- ここからShape Divider Appで取得したコード -->
  <div class="custom-shape-divider-bottom-1725004473">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
    </svg>
  </div>
  <!-- ここまで -->
</div>

Shape Divider Appで取得したHTMLを使用する際は、親要素にposition: relative;を指定しましょう。上のコードですとwave_bottomというクラスを持つdivが親要素にあたり、こちらにposition: relative;を指定します。

.wave_bottom{
  position: relative;/*親要素に必ず指定する*/
}

/*ここからShape Divider Appで取得したCSS*/
.custom-shape-divider-bottom-1725021663 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.custom-shape-divider-bottom-1725021663 svg {
    position: relative;
    display: block;
    width: calc(139% + 1.3px);
    height: 64px;
}
.custom-shape-divider-bottom-1725021663 .shape-fill {
    fill: #FFFFFF;
}

Shape Divider Appで取得したCSS部分を軽く説明しておきます。下記の部分のwidthやheightの数字をいじると波の形をカスタマイズできます。

.custom-shape-divider-bottom-1725021663 svg {
    width: calc(139% + 1.3px);
    height: 64px;
}

fillの部分でSVGの色を変更できます。

.custom-shape-divider-bottom-1725021663 .shape-fill {
    fill: #FFFFFF;
}

インラインSVGで実装する場合は取得したコードをコピペするだけでほとんどOKなので簡単です。

CSSでSVGコードを背景にしてカバーブロックの境界を斜めにする

WordPressのカバーブロック機能を使えば設定した画像や背景色の上にテキストなどを配置することが可能になります。1カラムにしたトップページなどで大きく使用すると効果的な機能です。そんなカバーブロックの境界線をおしゃれにアレンジすることで、一層デザイン性を高めることができます。

下側を斜めにしたサンプルはこちらです。

Neko Chan

それは癒しの結晶。もふもふしたい。
もちろん、わんこも大好き。

インラインSVGではなく、CSSでbackground-imageにSVGを設定して実装します。HTMLを直接編集できない場合やHTMLをごちゃごちゃさせたくない場合は、CSSで背景画像にSVGを設定するのがおすすめです。

CSSを当てるため、カバーブロックにオリジナルのクラスを追加します。ビジュアルエディターで挿入したカバーブロックを選択して、右側のブロック設定にある「高度な設定」をクリックし、「追加CSSクラス」に「tilt_bottom」(クラス名は任意)と入力してください。

カバーブロックにCSSのクラスを追加する

これでカバーブロックにクラスが追加されます。

Shape Divider Appの「Shape」のところで「Tilt」を選択して、斜めのSVGを生成します。今回はインラインSVGを使わないので、取得したコードをそのままコピペして実装することができません。取得したコードを参考にしながら組んだCSSが下記になります。疑似要素::beforeの背景に斜めのSVGを設定しています。

.tilt_bottom{
  position: relative;
}
.tilt_bottom::before{
  content: '';
  position: absolute;
  bottom: 0; /*下側に配置する*/
  left: -1px;/*左側に1pxの隙間ができたため、解消用に-1pxずらしています*/
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
  z-index: 2;/*カバーブロックの画像よりレイヤーを上にする*/
  /*ここからはShape Divider Appのコードから取得した内容*/
  width: calc(100% + 1.3px);
  height: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" fill="%23ffffff"></path></svg>');
  transform: rotate(180deg);
}

カバーブロックに追加したクラスtilt_bottomの疑似要素::beforeに、生成したSVG分の幅と高さを指定して、その背景画像にSVGを指定しています。要素の重なりを指定するz-indexで疑似要素が最上位に来るようにして、カバーブロックの画像をSVGで切り抜いています。

ポイントを解説していきます。

下記で指定している疑似要素のwidthとheightの数値はジェネレーターで生成した際に取得したコードのwidthとheightの数値から拾っています。

.tilt_bottom::before{
  width: calc(100% + 1.3px);  
  height: 60px;
}
Shape Divider Appで取得したコード

背景画像にSVGコードを指定している部分を下記画像で説明します。赤枠の<svg>～</svg>はジェネレーターで生成されたコードの<svg>～</svg>をコピペし、fill="%23ffffff"を追加したものです。fillはSVGの塗りを指定しています。白のカラーコードは#FFFFFFですが、SVGコードをCSSで背景に指定する時は”#”を”%23″に変更しなければいけません。

元々のコードではpathにshape-fillというクラスを追加してCSSでfillを設定しています。それをpathに直接fillを指定する方法に変えています。そのため、pathにあるclass=”shape-fill”という記述は不要なので削除してOKです。

SVGコードをbackground-imageで背景に指定する際には下記4点に注意してください。

  1. background-image: url()でコードを指定する際、シングルクォーテーションを用いる
  2. data:image/svg+xml;utf8をつける
  3. fillで色を指定しているが、カラーコードの#は%23に置き換える
  4. SVGコードに改行を入れない

最後の部分もジェネレーターで取得したコードから拾っています。下側の境界を斜めにするのでSVGを上下反転させてます。上側の境界を斜めにする場合にはこの記述は出てきません。

.tilt_bottom::before{
  transform: rotate(180deg);
}
Shape Divider Appで取得したコード

説明がわかりにくいかもしれませんが、CSSでSVGを背景に設定する方法はHTMLが簡潔になり再利用もしやすくなります。

CSSでSVGファイルを背景にして新着記事ブロック(Cocoon)の境界をアニメーションの波にする

SVGはアニメーションにも対応してるので、最後にCocoonの新着記事ブロックの境界をアニメーションの波にしてみましょう。SVGファイルをCSSで背景にして実装します。

サンプルはこちらです。うねうね～

スマホで見るとアニメーションが動いてない場合があります。詳しくはこちらで。

お名前.comでサブドメインを追加して、カラフルボックスで利用する方法
【AI機能あり】初心者にもおすすめ！Webデザイン・Web制作に便利なツール5選
clip-pathで作成した三角形に枠線をつける方法
CSSのclip-pathプロパティで三角形を作成する
【Cocoon】ページネーションをCSSでカスタマイズ！デザインサンプル8選
SVGでセクションの境界をおしゃれにする方法

Svg Waveでアニメーションの波を生成しました。複数レイヤーの波でやってみたのですがなんかいまいちだったのでシンプルにワンウェーブにしました。サンプルはわりとぼよんぼよんした感じの波なので、もっといい感じの動きの波を作れるとナイスかも？

Cocoonには新着記事ブロックという機能があり、新着記事一覧を簡単に作成できます。まずはビジュアルエディターで新着記事ブロックを追加しましょう。

Cocoonの新着記事ブロックを追加

追加した新着記事ブロックを選択して、右側のブロック設定にある「高度な設定」をクリックし、「追加CSSクラス」に「new_posts_wave」(クラス名は任意)と入力してください。

新着記事ブロックにCSSのクラスを追加する

新着記事の表示デザインのカスタマイズについては省略します。

ジェネレーターでアニメーションの波を生成したらSVGコード(<svg>～</svg>まで)を取得します。メモ帳などのテキストエディタを開いて、取得したSVGコードをペーストし、任意のファイル名をつけて.svgで保存してください(文字コードはUTF-8にします)。これでSVGコードをSVGファイルにできるので、ファイルをサーバーにアップします。

SVGコードをbackground-imageで背景にすることも可能ですが、今回のSVGコードは複雑なのでURLエンコードやbase64にエンコードしなければ表示されません。

サンプルのCSSは下記になります。

.new_posts_wave{
  background-image: url('SVGファイルのパス.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  padding-top: 150px;/*波が見えるように子要素との間に余白を作ってます。余白を取りすぎるとウィンドウサイズによって隙間ができるので要確認*/
}
.new_posts_wave > .new-entry-cards{
  background-color: #fce3e6;/*波と同じ背景色*/
}
/*隙間ができてしまうため、480px以下の時は子要素との余白を小さくする*/
@media screen and (max-width: 480px){
 .new_posts_wave{
    padding-top: 100px;
  }
}

新着記事ブロックのHTML構造を簡潔に書き出すと下記のようになっていて、このHTMLには手を加えず上記のCSSだけで実装するようにしました。

<!--追加したクラスは一番上のdivに割り当てられます-->
<div class="new-list-box block-box new_posts_wave">
  <div class="new-entry-cards widget-entry-cards">
    <a href="">
      <div>個別の記事</div>
    </a>
    ・
　　・
　　・
  </div>
</div>

新着記事ブロック同様、人気記事ブロックやランキングブロックなどの境界もアレンジできると思います。

【追記】Svg Waveで取得したコードではスマホでアニメーションが動いてなかった

記事公開直後の確認で気づいたのですが、スマホ(iPhone)で見るとSafariでもChromeでも波がアニメーションしてませんでした。なので記事を一旦下げ、この部分を追記しています。

どうもSvg Waveで生成したコードに問題がありそうです。Svg Waveにスマホでアクセスしてアニメーションにしても動いてませんから。なないろはSVGの知識が乏しいので原因はわからないのですが、ChatGPTに聞いてみたところ、d属性のアニメーションはモバイルのブラウザだとサポートしてない可能性があるとのことでした。解決策でSMILの使用を奨められたのでコードを書き出してもらったら、スマホでも動きました。

Svg Waveのコードを元にChatGPTが書き出したコードは下記になります。

<svg width="100%" height="100%" viewBox="0 0 1440 490" xmlns="http://www.w3.org/2000/svg">
  <path id="wavePath" d="M 0,500 L 0,187 C 114,207.66666666666666 228,228.33333333333331 390,211 C 552,193.66666666666669 762,138.33333333333331 945,128 C 1128,117.66666666666667 1284,152.33333333333334 1440,187 L 1440,500 L 0,500 Z" 
        fill="#fce3e6">
    <animate 
      attributeName="d"
      dur="4s"
      repeatCount="indefinite"
      values="
        M 0,500 L 0,187 C 114,207.66666666666666 228,228.33333333333331 390,211 C 552,193.66666666666669 762,138.33333333333331 945,128 C 1128,117.66666666666667 1284,152.33333333333334 1440,187 L 1440,500 L 0,500 Z;
        
        M 0,500 L 0,187 C 153.33333333333337,145.13333333333333 306.66666666666674,103.26666666666665 449,117 C 591.3333333333333,130.73333333333335 722.6666666666665,200.0666666666667 886,221 C 1049.3333333333335,241.9333333333333 1244.6666666666667,214.46666666666664 1440,187 L 1440,500 L 0,500 Z;

        M 0,500 L 0,187 C 161.46666666666664,212.46666666666667 322.9333333333333,237.93333333333334 485,245 C 647.0666666666667,252.06666666666666 809.7333333333333,240.73333333333335 969,228 C 1128.2666666666667,215.26666666666665 1284.1333333333332,201.13333333333333 1440,187 L 1440,500 L 0,500 Z;

        M 0,500 L 0,187 C 142.13333333333333,221.8 284.26666666666665,256.6 434,237 C 583.7333333333333,217.4 741.0666666666666,143.4 910,126 C 1078.9333333333334,108.6 1259.4666666666667,147.8 1440,187 L 1440,500 L 0,500 Z;

        M 0,500 L 0,187 C 114,207.66666666666666 228,228.33333333333331 390,211 C 552,193.66666666666669 762,138.33333333333331 945,128 C 1128,117.66666666666667 1284,152.33333333333334 1440,187 L 1440,500 L 0,500 Z
      "/>
  </path>
</svg>

↓スマホでも動いてる…はず…！

Svg Waveで取得したコードはアニメーションしてないだけなのでそのままでも問題なければそれでいいのですが、スマホでも動かしたい場合はちょっと使えないですね。アニメーションの波を作れる他のジェネレーターを探すか、自作するか、ChatGPTに書き直してもらうかしないとです。機種やブラウザによっても動く・動かないは異なってるかもしれません。

まとめ

3パターン紹介しましたが、何の境界をどうアレンジするかで変わってきますし、インラインSVGを使うかCSSで背景にするかなど実装方法も複数あります。SVGはジェネレーターで簡単に生成できるので、セクションの境界を色々アレンジしてみて下さい。

なないろはもっとSVGについて勉強しなきゃ。でも難しそうなんだにゃ…！

タイトルとURLをコピーしました