サイトデザインをリニューアルしました。

過去記事によれば、前回大幅なリニューアルしたのは、2009年の12月。 時代遅れな感じには気づいていましたが、壊してしまい、直せなくなるのが怖くて手がつけられずにいました。

当サイトは、MovableTypeというツールを使って構築していますが、 これもまた、現在は「かつて人気のあったツール」となり、 関連する有益な部品を作ってくれる人が減っています。

そんななか、ネットで良さそうな Movable Type 6 ブログテーマ(テンプレート)が 無償で提供されているのを見つけました。 あんまり時間が経ち過ぎると、いろんな意味で本当に出来なくなりそうなので、 これを機に、思い切ってリニューアルを行うことにしました。 以下リンクが、そのテーマ(テンプレート)です。 見ていただけるとこのサイトと同じデザインであるのがわかると思います。

Movable Type 6 ブログテーマ(テンプレート) Bootstrap 301

この土日に作業を行ったのですが、いざやってみると、ほとんどトラブルはありませんでした。 レスポンシブWebデザインということで、これまでのものに比べて、スマホで見やすくなったのではないかと思います。

20190331_01.jpg

リニューアル作業の手順

以下、備忘録として行った作業を残します。

テスト環境の準備

既存のサイトをいきなり改修するのはリスクが高すぎるので、テスト用のサイトを用意することにしました。

当サイトは、現在、さくらインターネットのレンタルサーバーで運用していますが、 以前は、XREAのサーバーを使っていました。 ずっと空き地になっていたこのスペースをテストに利用することにしました。

テスト環境の作り方は、サーバー移行の手順と同じです。以下の記事を参考にしました。
MovableTypeのサーバー移行手順

簡単にいうと、ファイルをFTPでダウンロード、データベースをphpMyAdminでバックアップして、 それらをテスト用サーバーに入れます。 ファイルのCGIのアクセス権を変更、MovableTypeの「mt-config.cgi」を少し修正して、再構築を行えば完了。

ここでつまづいていたら、もうリニューアルもあきらめてしまうところですが、 すんなりできました。

テスト環境でテーマの適用とカスタマイズを実施

テスト環境が準備できたところで、そのテスト環境に新しいテーマを適用しました。 その結果は、既存のサイトデザインに比べてかなり地味な印象。 以下、カスタマイズを行いました。

  • cssファイルを修正し、背景の色や見出しタグのデザインを変更。
  • サイドバーのTwitter表示を、既存のサイトから移植。
  • 記事の最後につけていたTwitter、Facebookのシェアボタンを、既存のサイトから移植、
  • トップページに表示される最近の記事の数を10件から5件に変更。
  • トップページに表示される最近の記事の内容がすべて表示されているのを、 既存のサイトでカスタマイズしていた機能を移植し、途中で切るように修正。
特に最後に挙げた修正を施した結果、大分見栄えが良くなりました。 修正といっても、基本的に既存のサイトにあったものをコピーしているだけなので、 難しいことはありませんでした。

既存のデザインでは「サイト内検索」や「ぱんくずリスト」の機能は、 自分でかなり作りこみをして実現できていましたが、新しいテーマでは、テーマの機能だけでできました。
このテーマが優れているのか、これまでのものが古すぎたのかはわかりません。。

公開サイトに適用

新しいテーマが使える目処がたったところで、公開サイトをテストサイト同様に変更して、作業完了。

 

関連記事