SWELLカスタマイズ事例 – 彫刻家 高野眞吾

ヘッダーメニューの「すりガラス風」背景

ヘッダーメニューの背景を「半透過＋ぼかし」にしてすりガラスのような雰囲気にしています。最近ワタシの中で流行ってますｗ

タイル状にならべたサムネイル型の作品一覧

メインビジュアル下の作品一覧は、別の事例「コーヒーでもどう？」で実装したギミックを流用し、表示領域に入ると左上から順番にフェードインしながら表示しています。なお、サムネイルの表示列は画面幅に応じて表示枚数が変化します。

スマホでもマウスオーバーに対応

サムネイルにマウスオーバーすると作品のタイトルが表示されます。スマホの場合、通常だと「マウスオーバー＝タップ」になってしまうところを、スマホでもマウスオーバーに対応しました。

また、パソコン版ではサムネイルにマウスオーバーしたときのカーソル形状を、ヘアラインクロス画像に変更しています。

カルーセルスライダー

「レンタルアート」の事例写真部分に、Flickityを使用したカルーセルスライダーを実装しています。

あわせて読みたい

Flickityでブロック要素をスライダー表示 – SWELLカスタマイズ 画像だけでなく「投稿リスト」ブロックや「リッチカラム」ブロック自体をスライダー表示できたらいいなということで、「Flickity」プラグインを使ったカスタマイズです。

カテゴリごとに異なるカスタムフィールドを表示

作品ページでは、作品写真下にブログパーツに埋め込んだ作品情報のカスタムフィールドを表示しています。

カテゴリごとに表示させたいカスタムフィールドが異なるので、ブログパーツ内でカテゴリを判定し必要なフィールド値を抽出しています。

基本デザインはSWELLの標準デザインを採用

今回、海外製のミニマル系テンプレートからSWELLに置き換えたわけですが、SWELLの標準デザイン（たとえば罫線の太さとか）がシンプルなデザインなので、基本デザインはごりごりいじらなくてもスタイリッシュなデザインができました。

「経歴」部分の「ステップ」ブロックや、スマホのドロワーメニュのデザインも、ちょっと手を加えるだけでした。

あらためて、SWELLの奥深さを実感しましたｗ