SWELLカスタマイズ事例 – イチログ!B-SIDE
イチログ!B-SIDE
UPDATE: 2022年5月1日
CATEGORY: ブログ
COLOR: ■■■
CLIENT: イチロー様
制作ノート
Twitterで仲良くしていただいているイチローさんの特化ブログです。以前、雑記ブログの方でメインビジュアル部分のギミックを制作したご縁でご依頼いただきました。
ちょっと変わった「音響PA」分野の特化ブログということで、PA機材のイメージから連想して、ダークな背景に発光ギミックを使用してデザインしました。
外部ソースなどのスクリプトも使用して、ブログ全体に動きを加え、カッコよくて遊び心のあるデザインを心がけました。
イチローさん、このブログでじゃんじゃん稼いじゃってください(笑)
トップページ
メインビジュアル
メインビジュアルの動画の上にアニメーションロゴを配置し、CSSで光彩効果を施しています。メインビジュアルの下には、外部スクリプトをカスタマイズし、グラフィックイコライザ―を表現しています。その下にはマーキーテキストを配置しています。
なお、グラフィックイコライザ―のスクリプトは描画に負荷がかかるため、スマートフォンでは表示しないようにしています。
※画像にマウスオーバーするとスクロールできます
※画像をタップするとスクロールできます。
コンテンツ領域
「最新の記事」部分は「Flickity」を使用したカルーセルスライダーを埋め込んでします。また、アイキャッチ画像は、背景を透明で切り抜いた画像に光彩効果を与えています。
フッターのSWELLアフィリエイト画像
当ブログでも使用しているWordPressテーマ「SWELL」のアフィリエイトロゴを、SVGアニメーションで作成し、ブログのデザインにあわせた光るロゴにしています。(当ブログでも通常色のアニメーションを配置しています)
※SWELL開発者の了さんに許可いただいています
記事ページ
※画像にマウスオーバーするとスクロールできます
※画像をタップするとスクロールできます。
アイキャッチ領域
通常、アイキャッチ画像は記事幅いっぱいに表示されますが、背景透過画像とタイトルを横並びに表示させ、領域に背景色と光彩効果を与えることで、タイトル部分をあたかもデザインしたように配置。わざわざアイキャッチ画像を作らなくてもいいレイアウトにカスタマイズしています。
また、背景の光彩効果はトップの「最新の記事」部分同様、じんわりと動いています。
\ ご支援ありがとうございます! /
SWELLを使用したブログの構築、
カスタマイズのご相談承ります
本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、TwitterのDMからどうぞ。
まずはTwitterで仲良くしてください ^^
WordPressテーマ「SWELL」
17,600円(税込)
シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応!