この記事にはプロモーションが含まれています
SWELLカスタマイズ事例 – イチログ！B-SIDE
トップページ
メインビジュアル
メインビジュアルの動画の上にアニメーションロゴを配置し、CSSで光彩効果を施しています。メインビジュアルの下には、外部スクリプトをカスタマイズし、グラフィックイコライザ―を表現しています。その下にはマーキーテキストを配置しています。
なお、グラフィックイコライザ―のスクリプトは描画に負荷がかかるため、スマートフォンでは表示しないようにしています。
※画像にマウスオーバーするとスクロールできます
※画像をタップするとスクロールできます。
コンテンツ領域
「最新の記事」部分は「Flickity」を使用したカルーセルスライダーを埋め込んでします。また、アイキャッチ画像は、背景を透明で切り抜いた画像に光彩効果を与えています。
フッターのSWELLアフィリエイト画像
当ブログでも使用しているWordPressテーマ「SWELL」のアフィリエイトロゴを、SVGアニメーションで作成し、ブログのデザインにあわせた光るロゴにしています。（当ブログでも通常色のアニメーションを配置しています）
※SWELL開発者の了さんに許可いただいています
記事ページ
※画像にマウスオーバーするとスクロールできます
※画像をタップするとスクロールできます。
アイキャッチ領域
通常、アイキャッチ画像は記事幅いっぱいに表示されますが、背景透過画像とタイトルを横並びに表示させ、領域に背景色と光彩効果を与えることで、タイトル部分をあたかもデザインしたように配置。わざわざアイキャッチ画像を作らなくてもいいレイアウトにカスタマイズしています。
また、背景の光彩効果はトップの「最新の記事」部分同様、じんわりと動いています。
＼ ご支援ありがとうございます！ ／
SWELLを使用したブログの構築、
カスタマイズのご相談承ります
本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、TwitterのDMからどうぞ。
まずはTwitterで仲良くしてください ^^
ポイビューはがんばるブロガーさんを応援します！
