愛媛県の自動車教習所紹介サイトWordPressブログサイト
| 担当範囲 | コーディング |
|---|---|
| 制作期間 | 5日 |
| 使用ツール | HTML、CSS、jQuery、Sass、PHP、WordPress |
| 依頼者 | 制作会社様 |
| サイトURL | https://ehime-drivingschool.com/ |
※デモサイトのユーザー名:lemomo、パスワード:lemomo
サイトのご紹介
WordPressの無料テーマ「Cocoon」のカスタマイズを行いました。
デザインデータをご提供いただき、Cocoonをカスタマイズしてサイトの見た目を再現していきました。
当サイトはブログサイトのため、お客様で簡単にデザインされた見出しや囲み枠が使えるようにブロックエディターの見出しをカスタマイズしたり、クラス分けをして種類をいくつか作成しました。
ブロックエディター上でパーツを複製したり追加したりできるので、お客様の方で編集画面で複製して作り替えたりしながら同様の記事やセクションを簡単に作成できるようになっています。
トップページもブロックエディターで作成しているので、お客様の方で好きなように編集ができます。
実装機能のご紹介
★スマホメニュー（ハンバーガーメニュー）
Cocoonのドロワーメニューを使用していますがCocoonっぽさが出ないようにカスタマイズで作り替えています。
★アコーディオンメニュー（ランキング表）
当サイトでは教習所をランキング形式で紹介しており、そのランキングの表にアコーディオンメニューを実装しております。
全部で20位くらいまで項目があるため、10位までデフォルトで表示しボタンを押したら全て見れるようにしてほしいというご要望でこちらを実装しました。
このように無料テーマでもjQueryを使った動きのある実装を追加することができますのでお気軽にご相談ください。
★WordPress上でのパーツ使い回し
当サイトのほとんど部分はWordPress上で編集できるようにカスタマイズしております。
よく使う見出しや囲み枠、セクションなどはデフォルトでデザインが適用れるようにカスタマイズしたり、指定のクラス名を追加(パーツに専用の名前をつけたり)することで簡単にデザインされたパーツを配置することができます。
