MENU

LatestPost
最新の記事

Works
制作実績

Design
デザイン・カスタマイズ

Blog
ブログ 「日々雑記」

BloggersLinkリンク

ポイビューはがんばるブロガーさんを応援します！

ぜみたうん
SUNAO BLOG
ライフモノクローム
サツキブログ
RUKI BOOKS
romolog
ミミィのところ
おかきの部屋
またりブログ
lifit
イチログ！
グミブログ
ごぶろぐ
いぬのしっねこのひげ
あおこん家のブログ
I Love Linustock
アイ・ラブ・ライナストック
POINT OF VIEW.DESIGN
個人的な視点のWEBデザイン蒐集サイト
yuki
handwritten script by yuki

至高のテーマ「SWELL」で構築しています

SWELLの境界線「波」でオリジナリティのあるウネウネ

.Design _Customize

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

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

ウネウネしてますか？

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

あわせて読みたい
SVGモーフィングで「流体シェイプ」をウネウネさせる こんなSWELLユーザーに読んでほしい！ SWELLの「境界線の波形状」を使ってデザインしている 流体シェイプに動きを加えたい SVGモーフィングについて知りたい SVGモーフ…

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

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

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

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

Twitter

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

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

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

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

ウネウネ – シングル

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

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

  • ウネウネに沿って動く独自のアイコン画像を設定できる
  • アイコンから吹き出るテキストメッセージを設定できる

になります。

旧ウネウネでも、サーファーの「スウェラー君付き 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の境界線「波」で、ウネウネさせてみてくださいね！

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

ではでは。

あわせて読みたい
SVGモーフィングで「流体シェイプ」をモフモフさせる こんなSWELLユーザーに読んでほしい！ 流体シェイプを使ってデザインしている 流体シェイプに動きを加えたい SVGモーフィングについて知りたい SVGモーフィングで流体シ…
あわせて読みたい
メインビジュアルをミニマル風にカスタマイズ とりあえず、メインビジュアルだけでもカッコよくしたい ブログのテーマをSWELLにしてから、ブロックエディタにもなれてきて、ブログを書くのが楽しくなってきました。 …

サポートフォーム

このカスタマイズに関するお問い合わせや、
その他リクエストなど、お気軽にどうぞ。

5
4
3
2
1
個人情報の取り扱いについて

POINT-OF-VIEW.BLOG（以下「当サイト」）では、以下のとおり個人情報保護方針を定め、個人情報の保護を推進致します。

# 個人情報の利用目的

当サイトでは、お問い合わせの際、名前やメールアドレス等の個人情報を入力いただきます。取得した個人情報は、お問い合わせに対する回答や必要な情報を電子メールなどでご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。

# 広告について

当サイトでは、第三者配信の広告サービス（Googleアドセンス、A8.net等のアフィリエイトサービス）を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー（Cookie）を使用しております。
クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。

Cookieを無効にする方法やGoogleアドセンスに関する詳細は「広告 ポリシーと規約 Google」をご確認ください。

# アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにクッキー（Cookie）を使用しております。トラフィックデータは匿名で収集されており、個人を特定するものではありません。

くれぐれもカスタマイズは
「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ（←本来の意味での）をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです！
（カスタマイズ沼にハマらないようご注意ください^^;）

＼ ご支援ありがとうございます！ ／

SWELLを使用したブログの構築・カスタマイズのご相談承ります

本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、のDMからどうぞ。
まずはで仲良くしてください ^^

カスタマイズネタ配信中

WordPressテーマ「SWELL」

17,600円（税込）

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。
ブロックエディター完全対応！

ご購入はこちら
デモサイトを見る
.Design _Customize

関連記事

目次