概要
デザインプラス様が提供するWordPressテーマ「PANDORA」（TCD）のスマホ用ドロワーメニューを改修。全画面表示やフェードインの動き、背景色の白黒切り替えなどを実装し、Ver3.4で正式に搭載されました。
特徴
スマホで画面右上のボタンを押すと開くドロワーメニューを、見た目と動きの両面から作り直しました。
画面の7割ほどまでだったメニューを全画面表示に変更し、開くときはメニュー項目・検索フォーム・SNSアイコンが順番にフェードインして、最後に枠線が現れる動きを付けました。閉じるときはその場でフェードアウトします。子メニューは「＋／－」のアイコンで開閉し、横からスライドインします。
管理画面のテーマオプションには「背景色（白／黒）」と「枠線の表示」の設定を追加しました。背景を黒にすると文字・検索フォーム・アイコンの色も自動で反転し、枠線の色はテーマのアクセントカラーと連動します。
多くの方に使われる販売テーマの改修のため、既存の設定をそのまま引き継げること、メニューの要素が増えてもアニメーションの順番に自動で加わること、メニューが長くスクロールしても枠線がずれないことなど、テーマを利用する方の運用まで考えて実装しました。
クライアント情報
株式会社デザインプラス（TCD）
WordPressテーマ「PANDORA」
技術情報
CMS：WordPress（テーマのカスタマイズ・テーマオプションの追加）
スタイル：CSS（カスタムプロパティ・アニメーション）
スクリプト：JavaScript
多言語対応：翻訳ファイル（.po / .mo）