アットスタイルさんのMovableType無料テーマで、サイトをリニューアルした話。

当ブログサイトは、MovableTypeという製品の個人無償ライセンスで、構築しています。 MovableTypeは、私がブログをはじめた頃には大変人気のあった製品ですが、 今はWordPressというライバル製品に押されて、すっかり少数派になってしまいました。

過去記事を振り返ると、前回サイトの大幅なリニューアルをしたのは、2009年の12月。 見た目が時代遅れになってきていることには薄々気づいていましたが、 MovableTypeだとネットに情報も少なく、かといってWordPressに乗り換えるのも大仕事になるので、 身動きがとれずにいました。

そんな折、おしゃれな Movable Type 6 のブログテーマ(テンプレート)を発見。 これを見過ごすと、少なくともMovableTypeでのリニューアルの機会はもうないかもしれない。 そう思い、約10年ぶりのサイトリニューアルに踏み切りました。
以下のリンクがそのテーマ(テンプレート)です。見ていただけるとこのサイトと同じデザインであるのがわかると思います。

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

緊張の中で行ったリニューアル作業でしたが、いざやってみるとトラブルはほとんどありませんでした。 「レスポンシブWebデザイン」になり、これまでと比べて特にスマホで見やすくなったのではないかと思います。 大満足の結果となりました。以下、自分用の備忘録として作業を書き残します。

サイトリニューアルの手順

テスト環境の準備(MovableTypeのサーバー移転)

今あるサイトをいきなり改修するのは危ないと思い、もう一つテスト用のサイトを用意し、 そちらでひととおり試してから、本番サイトを改修することにしました。

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

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

簡単に説明すると、さくらサーバーのファイルをFTPでダウンロード、データベースをphpMyAdminでバックアップ。 XREAのサーバーにそれらをFTPでアップロードし、CGIファイルのアクセス権を変更。 MovableTypeの「mt-config.cgi」をXREAに合わせて少し修正してから、MovableTypeの再構築を行います。

こうして、さくらのサーバーと同じブログページがXREAにできました。 ここまでの工程でつまづいたらリニューアルはあきらめようと思っていましたが、 すんなりできたので作業続行。

テスト環境で新しいテーマ(Bootstrap 301)を適用

テーマの適用は、ダウンロードしたテーマについている説明書きのとおりに進めて簡単にできました。

テーマを変えての第一印象は、おしゃれにはなったけど、自分には字がちょっと小さいかも。 一番驚いたのは、トップページに表示される「最近の記事」10件が、記事の全文が表示されていて、 ページ全体がとんでもない長さになっていることでした。

そういえば、今までのテーマもこの部分は同じで、これまでは自分で、 160字を超えたところで切って「続きを読む」で記事ページにリンクで飛ぶよう、 カスタマイズしていました。
どんなにいいテーマでも、自分の好みにあわせて修正や機能追加は必要ですよね。 こうしたことができるのが、自分でブログを運営する面白さでもあります。

Bootstrap 301をベースにブログのカスタマイズ

ということで、アットスタイルさんのBootstrap 301を適用後に、いろいろとカスタマイズを施していきました。 以下にカスタマイズしたことと、参考にしたサイトをリンクで紹介していきます。

トップページに表示される「最近の記事」を「続きを読む」にする(MovableType)

先の段落で話したものです。

文字数が多いときに...続きをよむ

背景色や見出しタグのデザイン変更、段落の上下左右に余白を追加等(CSS)

好みもありますが、結局ブログの見やすさを決めるのは、こういうところの調整なんだと思う今日この頃。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
【CSS3】で写真に色々装飾を加えてみた border-imageなど (枠・写真加工編【IE9以前は非推奨】

lightboxを使った画像のポップアップ表示(Javascript,jQuery)

ブログに張り付けた画像をポップアップで大きく表示させるもの。実装も簡単でおすすめ。

簡単に画像のポップアップ!「Lightbox」の実装方法

layzr.jsを使った画像の遅延表示(Javascript)

こちらはページの表示を早くするために、はじめはウィンドウの表示領域に見えている画像だけを読み込み、 スクロールするとともに残りの画像を順次読み込むツールです。 これを導入してGoogleInsideもスコアも改善しました!

Layzr.jsで楽に画像の遅延表示させる
layzr.js を使って iframe を遅延読み込みする

上記サイトでlayzr.jsは最新バージョン(2.2.2)はだめとあったので、 ここから2.2.1をダウンロードしました。また、application.jsは、そのままだとIE11では動作しないので、以下の記述に書き換えました。


window.addEventListener("load", function() {
  const instance = Layzr({threshold: 10});
  instance.update().check().handlers(true);
});

スクロールすると出てくる「トップへ戻る」ボタンを追加(HTML,CSS,jQuery)

ブログをパソコンで見ているときはあまり必要性を感じませんが、スマホのときはあると便利でした。 今どきのサイトには大抵ついているもの。

スクロールすると出てくる「トップへ戻る」ボタンの作り方

上記サイトにはたくさんパターンが掲載されていますが、その通りにコピペしても自分の環境では、 Font Awesomeのアイコンフォントとボタン背景の位置のバランスがいまいちになってしまうものが多く、 そのなかでバランスがよかったものを採用しました。

Twitterタイムラインの表示を追加(HTML)

Twitterタイムラインの埋め込みとデザインカスタマイズの方法

TwitterとFacebookのシェアボタンを追加、ボタンはFont Awesomeを使用(HTML,CSS)

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
SNS ボタンをきれいに並べる

既存のサイトを変更して作業終了

テストサイトで動作の確認がとれた後、既存の公開サイトにも新しいテーマを適用、カスタマイズを行い、作業完了です。

ところで、今回テスト環境で作業してみた結果、現在、運用しているさくらのサーバーのほうが、 XREAよりもサイトのページ表示に時間が掛かることがわかりました。 テスト環境をそのまま本番サイトにしてしまったほうがよかったかも。。

関連記事