Works
クリ★スタさん（https://crestadesign.org/）が提供しているXDデザインカンプデータをもとにコーディングを行いました。
CSS設計のFLOCSSを導入したコーディングやjQueryのBGswitcherプラグインを使ったスライダーの実装を行っています。
STEP1
XDカンプをもとに静的コーディング
CSS設計のFLOCSSを導入しコーディングを行いました。
STEP2
レスポンシブ対応
スマホ画面に必要なハンバーガーメニューの実装や余白、コンテンツのレイアウトの調整を行いました。
STEP3
スライダーの実装
jQueryのBGswitcherプラグインを用いてファーストビューのスライダー機能を実装しました。
STEP4
ローカル環境構築・開発
本番環境への移行に向けてローカル環境で必須テンプレートタグの挿入やCSS、jQueryの読み込みなど必要最低限のWordPress化を行いました。
STEP5
本番環境へ移行
All in One Migrationプラグインを利用し本番環境へ移行しました。
完成
-
スライダー実装
普段はslickプラグインを使っていましたが初めてBGswitcherプラグインでのスライダー実装を行いました。
-
ファーストビューを過ぎたらヘッダーを切り替える
一定の高さスクロールをしたらヘッダーにクラスを付与するような記述をjQueryに書きヘッダーを切り替える実装を行いました。
Others
">
">
">