SWELLの境界線「波」でオリジナリティのあるウネウネ – SWELLカスタマイズ

2022年12月27日

こんなSWELLユーザーに読んでほしい！

SWELLの「境界線の波形状」をウネウネさせたい
オリジナリティのあるウネウネにしたい
ウネラー

あらすじ

ウネウネしてますか？

さっきから「ウネウネウネウネ」って、何言ってるかよく分からない人は、こちらの記事をご覧ください。

あわせて読みたい

SVGモーフィングで「流体シェイプ」をウネウネさせる – SWELLカスタマイズ今回もSVGモーフィングを使って、SWELL特有のデザイン要素でもある「境界線の波形状」をウネウネさせるカスタマイズです。

要するに、SWELLの標準ブロックである「フルワイド」ブロックの設定で上下の境界線の形状を「波」にして、その波をアニメーションでウネらせるカスタマイズを「ウネウネ」といい、そのカスタマイズを実装している人のことを、スウェラーならぬ「ウネラー」と呼びます。　※非公式

そんな、ウネラーの皆様に「新しいウネウネ」をご紹介します。

「新しい波」
（ヌーヴェルヴァーグ）
　ならぬ
「新しいウネウネ」
（ヌーヴェルウネウネ）
　です。

そんなことはさておき、今回のカスタマイズはツイッターでの会話で、ウネラーでもある またりさん（@matari_life）と Ririさん（@Riri_log_）とのやりとりから生まれました。

またりさんとRiriさんのウネウネ具合は、お二人のブログでご覧ください。

茶々じかん

茶々じかん | お茶のある暮らし。日本茶好きのブログ

https://englishpoteto.com/

新しいウネウネのイメージ

まずは、こちらの動画をご覧ください。

ウネウネ – シングル

こちらが「新しいウネウネ」でカスタマイズしたトップページのイメージです。

旧ウネウネと大きく違う点はというと、

ウネウネに沿って動く独自のアイコン画像を設定できる

アイコンから吹き出るテキストメッセージを設定できる

になります。

旧ウネウネでも、サーファーの「スウェラー君付き ver.」もありましたが、独自のアイコンにすることは難しい仕様でした。

今回の新しいウネウネでは、より汎用性を高める仕様に変更しています。

さらに、旧ウネウネと組み合わせることで、「ダブルウネウネ」もできちゃいます。

こんなカンジで。

ウネウネ – ダブル

もちろん、ご自身のブログデザインに合わせて色も変更できますので、あなた好みのウネウネを表現してみてください。

新しいウネウネのカスタマイズ方法

それでは、ここからは設置方法をご説明しますね。

仕様としては、旧ウネウネは「フルワイド」ブロックの設定で「上下の境界線の形状」を「波」部分をスクリプトでカスタマイズしましたが、新しいウネウネは、

ウネウネ部分をフルワイドブロック化し、土台となるフルワイドブロックの上に積み上げる

仕様になります。

基本は以下のような手順でカスタマイズします。

STEP

ウネウネ用のアイコン画像をアップロード

STEP

ウネウネさせたいページに、コンテンツ用「フルワイド」ブロックを挿入

STEP

STEP2のブロックの上に、ウネウネ用「フルワイド」ブロックのコードをコピペ

STEP

ウネウネ用「フルワイド」ブロックのコードを修正

旧ウネウネのカスタマイズに比べると若干難易度が上がりますが、要点を理解できれば簡単にカスタマイズできます。

それでは、実際に設定してみましょう。

まずは動画で全体の流れをご確認ください。

カスタマイズ手順

STEP

ウネウネ用のアイコン画像をアップロード

ウネウネの上を走らせるアイコン画像を作成し、アップロードします。

画像サイズ：50px × 50px

透過PNG

STEP

ウネウネさせたいページに、コンテンツ用の「フルワイド」ブロックを挿入

ページ設定でサイドバーを非表示に設定してください。

土台となるコンテンツ用の「フルワイド」ブロックを挿入し、以下のように設定します。

コンテンツサイズ：フルワイド

上下のPADDING量：お好みで

背景色：お好みで
※ここで設定した色がウネウネ部分にも反映されます

追加CSSクラス：uneune-bottom

STEP

STEP2のブロックの上に、ウネウネ用「フルワイド」ブロックのコードをコピペ

「ウネウネブロックをコピー」をクリックして、ウネウネ用「フルワイド」ブロックのコードをコピーします。

ウネウネブロックをコピーコピーしました

STEP２で挿入したコンテンツ用の「フルワイド」ブロックの上にペーストして挿入ます。

ブロック構成はこのようになります。

STEP

ウネウネ用「フルワイド」ブロックのコードを修正

挿入した「フルワイド」ブロック内の「カスタムHTML」ブロック内に記述されているコードを修正します。

テキストメッセージの色：お好みで

テキストメッセージ：お好みで

アイコン画像のパス：STEP１でアップロードしたアイコン画像のパス

（下へスクロール）

STEP

完成

ダブルウネウネにチャレンジ！

旧ウネウネを設定している方ならなんとなくお気づきかと思いますが、コンテンツ用の「フルワイド」ブロックに旧ウネウネのカスタマイズを適用すれば、ダブルウネウネができちゃいますよね。

ということで、ここでは「ダブルウネウネ」のカスタマイズテクニックをご紹介します。

まずは動画で全体の流れをご確認ください。

ダブルウネウネのカスタマイズ

カスタマイズ手順

STEP

固定ページに新ウネウネを挿入

先ほどと同様に、土台となるコンテンツ用「フルワイド」ブロックを挿入し、クラス名wave-topを設定します。

背景色を指定します。
※ダブルウネウネの場合、ここで指定した背景色はウネウネブロックには反映されません。

続いて、先ほどと同じ要領で新ウネウネを挿入します。

新ウネウネ部分の色を指定します。
「カスタムHTML」ブロック内に記述されている、以下の箇所を修正します。

ウネウネの背景色：お好みで

STEP

コンテンツ用「フルワイド」ブロックをウネウネさせる設定

コンテンツ用「フルワイド」ブロックの「上部の境界線の形状」を「波」にして、「高さレベル」を調整します。

上部の境界線の形状：波

上部の境界線の高さレベル：５
※プレビューで確認しながら調整してください

STEP

旧ウネウネ用のスクリプトを追加

すでに、旧ウネウネを使用していてスクリプトを追加している場合は不要です。

以下のスクリプトを、固定ページの「カスタムCSS＆JS＞JS」にコピペします。

let waveTop = document.querySelectorAll('.wave-top .swell-block-fullWide__SVG.-top.-bg');
for (i = 0, len = waveTop.length; i < len; i++) {
    waveTop[i].style.backgroundImage = "url('data:image/svg+xml;charset=UTF-8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 10%22 preserveAspectRatio=%22none%22><path fill=%22" + waveTop[i].parentElement.style.backgroundColor + "%22 id=%22wave-top%22 d=%22M100,10H0V9C49.83,9,50,2,100,2v8Z%22><animate attributeType=%22XML%22 attributeName=%22d%22 dur=%228s%22 repeatCount=%22indefinite%22 values=%22M100,10H0V9C49.83,9,50,2,100,2v8Z;M100,10H0V5.58C50.08,0,50.08,0,100,5.5V10Z;M100,10H0V2C49.83,2,50,9,100,9v1Z;M100,10H0V5.5C50,10,50,10,100,5.5V10Z;M100,10H0V9C49.83,9,50,2,100,2v8Z%22/></path></svg>')";
}

STEP

完成

旧ウネウネと新ウネウネによる、ダブルウネウネが完成です。

メインビジュアル下に配置すれば、印象的なファーストビューも表現できますね。

いかがでしたでしょうか？

なお、波を動かすSVGはテキストデータで編集可能ですので、アイコンにリンクを設定して隠しギミックを仕込むなんてこともできます。

ぜひ、オリジナリティあふれるSWELLの境界線「波」で、ウネウネさせてみてくださいね！

今日からあなたもウネラーです。

ではでは。

あわせて読みたい