株式会社バイオビジネスブリッジ様のコーポレートサイトを、WordPressのオリジナルテーマ（クラシックテーマ）で制作いたしました。

CSS 設計の方針

1. 命名: BEM に準拠（.header, .header__inner, .drawer__navなど）
2. レスポンシブ: 768px/1024px でブレーク（PC/TAB/SP）
3. ダークモード対応: CSS カスタムプロパティでライト/ダーク切り替え
4. ファイル構成: base/page/global/components に分割
5. 変数管理: カラー・フォント・ブレークポイントを Sass 変数化（CSS 変数連携）
6. 印刷に適応してほしいとのご要望があり、printの指定も適宜追加

JavaScript で実装した機能

• ドロワーメニュー: ハンバーガーとドロワーの連動、背景固定でbody.no-scroll
• WordPress 連携: WP_Queryで投稿表示、日付・タイトルをループ表示
• メニュー登録: WordPress 関数でwp_nav_menu設定（global/drawer/footer）
• Contact Form 7 連携: 送信後サンクスページへリダイレクト
• 文字数制限: note 表示の任意文字数制限をカスタム関数化

WordPress テンプレート構造

• front-page.php: トップページ用、ニュース 5 件をWP_Queryで取得
• home.php: ニュース一覧、ページネーションに対応
• page.php: 固定ページ用、タイトルと本文を表示
• header.php/footer.php: 共通パーツをテンプレート化

ダークモード対応

CSS カスタムプロパティでライト/ダーク切り替え。prefers-color-schemeに応じて自動切替。画像はsaturate(80%) brightness(80%)で調整

ドロワーメニュー

• 右側から 200px 幅で表示
• .is-activeで開閉状態管理
• body.no-scrollで背景スクロール無効化
• ハンバーガーを X へ変形アニメーション

WordPress メニュー連携

wp_nav_menuでグローバル/ドロワー/フッターを設定。メニューは管理画面から編集可能

グラデーションライン

.lineクラスで横方向グラデーションを表示（背景色からキーカラーへ変化）

このコーディングで特に工夫した点

• WordPress の標準関数（ループ、メニュー）を活用
• ダークモード対応で自動切り替え
• レスポンシブは 768px/1024px の 3 段階
• BEM で可読性と保守性を確保
• アクセシビリティ: aria-labelとセマンティック HTML を採用

デザインの特徴

• 配色: パープル系のキーカラー（#8e3289, #be52be, #dd7cdd）
• フォント: Noto Sans JP（日本語）、GFS Didot（欧文）
• レイアウト: 最大幅 1000px の中央配置
• ページ構成: ホーム/メッセージ/会社概要/採用情報/講座/お問い合わせ