エレクトリック・フルーツ

レスポンシブWebデザインで作成し、今までの使用していたWPのテンプレートとは全く切り離した感じのデザインでの作成となっています。

いつもレスポンシブでの作成ではブレイクポイントに悩むのですが、今回は基本768、960、1200と3つのポイント+どうしてもの箇所として480pxとスマートフォンの大きめと小さめのサイズにも対応する形でコーディングしています。

メインビジュアル部分はslickというjQueryプラグインを使用しています。
こちらは、レスポンシブにも対応しているので、こういった案件の際にはとても便利です。

また下方の施工事例のMouse hoverで、タイトルとカテゴリを動かす設定をしていますが、タッチデバイスの場合は一回タップするとその部分が表示、再度タップするとリンクに飛ぶという設定をしています。
そうすることで、マウスホバーのないタッチデバイスでも同じようなアクセシビリティを得ることができます。