サイトのテーマをリニューアルしました
  • Dec 7, 2017
  • negset

このサイトは静的サイトジェネレータである Hugo を利用しており、以前は robust というテーマを適用していました。

robust は非常に良くできたテーマで、私も大変気に入っていたのですが、私は Google が推奨するマテリアルデザインが好きなので、今回思い切ってそれに準拠したテーマを自作してみました。

CSS フレームワーク

テーマを自作したといってもすべてを一から作ったわけではなく、Materialize という CSS フレームワークを使用して制作しました。

Materialize には、カードやボタンといったマテリアルデザインでよく使用されるコンポーネントが予め用意されており、それらを組み合わせるだけで簡単に Web デザインを構築することができます。

コンポーネントの例: Floating Button

慣れない Web プログラミングでしたが、Materialize のおかげで、マテリアルデザインにこだわりを持つ私でも満足のいくものが完成しました。

特に、ボタンをタップした時の波紋アニメーションが非常に美しく、大変気に入っています。

AMP 対応

これまで使用していたテーマが AMP(モバイル端末でウェブページを高速表示する技術)に対応していたので、本テーマもそれに対応させました。

AMP の規格に準拠するために満たすべき条件がたくさんあり、対応させるのが思った以上に大変でした…

ですが苦労の甲斐あって、なるべくデザインを崩さないまま AMP に対応した、高速なモバイルページを作れたのではないかと思います。

今後の更新

まだテーマとしてデザインが粗削りな部分が残っていたり、コードが汚い部分があるので、今後も少しずつ修正を重ねていこうと思います。

(余裕があればサイト内検索機能なんかもつけてみたい…)

Related Posts
  • Comments
arrow_upward