気が付けば、最後の投稿から２年以上が経っていました。
リアルな生活における変化もたくさんあったのですが、
今回は、静的サイトをWordPress化するお話をしていきます。
題材となるのは、30294.in。
３月21日（土）にリデザイン予定です。
まだ切り替えていませんので、ご注意ください。
基本的なデザインの見直し
トップページでは、画面全体に大きく30294（みおつくし）ロゴを表示するようにしました。
簡単にフェードアップするアニメーションをロゴに設定してみました。
最近のデザインの流れとして、アイキャッチ？キービジュアル？を画面いっぱいに表示するようです。
今回のリデザインでは、その潮流に乗ってみました。
↓方向へスクロールを促す表示があってもいいかなと、今更思っています。
また、今回のリデザインでは、30294ロゴをSVGイメージ化。
フォント部分はwebフォント化してみました。
ロゴをSVGイメージ化したことで、CSSのfilterで色を自由に設定できます。
参考までに使ったフォントは次の通りです。
- Merriweather ････ 「30294.in」の部分
- Shippori Mincho ････ 「みおつくし鯖」の部分
１カラムレイアウトとレスポンシブ対応
現行のデザインでは、左側にナビゲーションを固定表示していました。
横長のディスプレイでは、よかったのですが、スマートフォン等の縦長のディスプレイでは、表示がうまくできませんでした。
今回のリデザインでは、ナビゲーションをヘッダー部分に固定表示。
スマートフォンでは、ハンバーガーメニューに格納することにしました。
ハンバーガーメニューの見た目の工夫は、改善の余地がありそうです。
そんなこんなで、新しいデザインでは、１カラムレイアウトになりました。
ページの横幅は620px。少し狭いですが、大手のn〇teを参考にしています。
WordPress化の概要
今回リデザインを行った30294.inは、すでにGoogle等の検索エンジンにインデックスされている関係で、URLの構成が大きく変更になることは避けたいと考えました。
そこで、今回はWordPressの固定ページのスラッグを指定することで、静的サイトと同様のURLでアクセスできることを目指しました。
スラッグ設定の例
- 30294.inについて（紹介） ････ about
- 作品系 ････ works
- 日記帳 ････ blog 等
ただし、今回の目的としては、ブログを新たに立ち上げたいわけではありません。
ブログはここが、ありますから。
あくまでも、30294.inは個人サイト。
よって、
- 固定ページでメンテナンス性の向上
- サイトマップの自動生成
- フォームの設置（12年越し）
あたりを、WordPress化によって実現したいと考えています。
「30294」と検索して表示されるようになるといいなあ。
ふりかえり
今回は、12年間放置を決め込んでいた、30294.inのリデザインについてまとめてみました。
テンプレートの扱いについても、少しずつ慣れてきたので、今後備忘録的にまとめることがあるかもしれません。
リデザインは３月21日（土）の予定です。
ぜひ、ご覧になってみてくださいね。
