ブロガーのテンプレートをレスポンシブに変更する際の注意点

気にしすぎかも知れません。でもよく分からないので、念には念を入れました。Bloggerのテンプレートをフリーのレスポンシブ対応のものに入れ替え。ここまでやれば大丈夫? 以下手順です。気にしたのはセキュリティーとレスポンス。赤字はセキュリティー関係です。


テンプレートを探して入手する

■気に入ったテンプレートを探す。http://btemplates.com/ や http://blogtemplate4u.com/ あたりでしょうか。
■テンプレート開発元のサイトから、気に入ったテンプレートのページを開く。紹介サイト経由だと中身に細工されている可能性があるかも、というネット情報があったので。
■テンプレートのサンプルページのURLをチェックサイトでチェックし、スパムがないことを確認する。VirusTotal.comとGoogle Safe Browsingを使いました。
■開発元のサイトからテンプレートをダウンロードする。

テスト用ブログを立ち上げる

■Bloggerでテスト用のブログを新規作成する。いきなり本番ブログでやって失敗すると悲しいですから。コンテンツは既存のブログからダウンロードしておいたものをインポートしていくつか記事を公開すれば良いです。

テスト用ブログでテンプレートを調整する

■テスト用ブログにテンプレートを適用する。
■URLチェックサイトでスパムがないことを確認する。
■もしできるなら、FirefoxのFirebug等を使い、素性のわからないJavascriptが使われていないか確認する。分からなければ、上記のURLチェックサイトの結果だけでもいいと思います。どうせJavascriptの解読は全部はできないので、あくまで念のためです。ちなみに、Firebugは難読化されたスクリプトも、ある程度(バイナリデータの羅列になっているタイプ。eval()で評価されるタイプですね)なら、元ソースに戻してくれるのでありがたいです。見た目がJavascriptに見えるタイプはダメですが。そのソースをBeautify Javascriptで整形すると見やすくなります。
■不要なウィジェットを削除する。削除ボタンがないものは、テンプレートの編集画面で、locked='true'となっている部分を検索して、'false'に書き換えると、削除可能になります。
■フォント、フォントサイズ、各部スペース、メニューなどを調整する。英語と日本語ではサイズからくる印象が大分違います。ここはXMLの経験が少し必要。ただし熱意があれば、ネットを探しながらトライ＆エラーで何とかなるレベル。どうせテスト用ブログで誰も見ていないし、失敗したらバックアップを再度アップロードして戻すだけでいいので。
■この時、スマホ、小型タブレット、iPad、PCと、様々なデバイスで確認すること。特定の種類のデバイスだけで見栄えがおかしいかもしれませんから。手持ちのデバイスがなければ、Chromeの、表示->開発/管理->デベロッパーツールで、右側のウィンドウのモバイルデバイスのマークをクリックすると、任意の画面サイズをシミュレートできます。
■調整が終わったら、テンプレートをバックアップ(ダウンロード)する。

本番ブログのテンプレートを更新する

■本番用のブログに移動する。
■現在のテンプレートをバックアップする。
■新しいテンプレートをアップロードする。
■見栄えを確認する。今ひとつな部分があれば、調整を繰り返す。
■Google Analyticsなど、あとから追加したスクリプトを、元のテンプレートからコピーする。私の場合Google AnalyticsとLinkWithinの2つがありました。

パフォーマンスをチューニングする

■サイトの速度を確認する。悪化していることが多いです。例えば余計なスクリプトが動作しているとか、背景に巨大なサイズの画像を使っているとか。以下を使えばいいと思います。Google Analytics, http://www.webpagetest.org/。私はキャッシュのスコアが最悪でしたが、HTMLでmetaを設定しても効果がなく、そのままになってしまいました。それ以外はおおよそ対処。


よく「気に入ったテンプレートをダウンロードして適用して終わり！」みたいな紹介の仕方をされていますが、フリーのものはどんなにサンプルの見栄えが良くても細部のクォリティーは低いです。どうしても調整が必要になるので、思ったよりも手間がかかるはずです。Bloggerに標準でレスポンシブのテンプレートが用意されていればこんな苦労はしなくて済むんですけどね！レスポンシブではないにせよ、標準テンプレートの良さが良くわかりました。

※この記事を書いていて初めて、変更したテンプレート(Keilir)で、箇条書きが正常に表示されないことに気づきました。うーん、そこまで確認しなかったなー。やってしまった。上のメニューから動的ビューを選んでもらえると、正常に箇条書き表示され、見やすくなります。