まずはcssを全部消しました。
そして、プラグインも必要最低限のもの以外すべて消しました。

先代の担当者たちが制作できているのだから、どんなに大変でも理論上私にだって制作可能という考えからでした。

過去のページがいくつか残っていましたが、あえて何も見ずに突き進むことにしました。

私が最初に考えたのがホームのレイアウトです。
そして、そこからホームページ全体の表示形式の方向性を決めていきました。
それに伴い「フルワイドの実現」と「ヘッダーのデザイン変更」をしました。

「フルワイド」とは、言葉の通り画面の端から端までを使えるようにするということです。
一見普通のことのように聞こえるかもしれませんが、実はそうでもないんです。
このホームページは、Lightningというテーマを使って作られています。
そして、このテーマでは左右にオブジェクトの配置ができない空間があるのです。
もちろん左右に空白を置くことは視認性を上げるための処理として悪いことではありません。
実際にこのホームページでも、pc版は横幅の10%、モバイル版は3%の空白を左右に設けています。
しかし、本当に何も置けないと困るんです。
例えばホームの背景が画像になっていますが、これは全幅が使えないと実現できないことなんです。
フルワイドの実現により、従来のくすのき祭ホームページとは違う体験が届けられるようになりました。

「ヘッダー」は画面上部に表示される、あのヘッダーです。
pc版ではメニューが表示されていると思います。
モバイル版はページの一番上まで上がると見えると思います。
このヘッダーのデザインを変更しました。
具体的に言うと、背景を半透明にし、後ろはぼかすようにしたり、グラデーションをかけたり、といったところです。
今まではもっとポップな印象だったのですが、存在感が強すぎたので馴染みやすいようにしました。

また、ホームではトップ画像をフル画面で表示するために、ページ全体を上に持ち上げて食い込ませるということをしています。

どちらもcssのチュートリアルみたいなものなのですが、私にとって初めてのcssだったこともあり、相当手こずりました。