Blogger:BloggerのテンプレートのHTMLを編集するときに気を付けること

イントロダクション

Google のブログサービス「Blogger」では、ブログを形作るテンプレートの HTML に手を加えることで、他のブログサービスでは実現できないような自由な表現が可能になります。

さて、そのような Blogger のテンプレートの HTML ですが、一歩編集を間違えると、Blogger からエラーメッセージを通知されたり、ブログそのものが表示不能に陥ったりします。

そのため、Blogger のテンプレートの HTML を変更する際には、十分に注意して変更を行う必要があります。


しかし、人は必ずミスを犯すものです。
100% 間違えないなどというおとはあり得ません。


そこで、Blogger のテンプレートの HTML の変更前・変更後に行っておきたい作業をまとめました。

Blogger のテンプレートの HTML の変更前・変更後に行っておきたい作業

変更前

テンプレートのHTML 全体をテキストファイルとして保存

Blogger のテンプレート全体をコピーして、テキストファイルとして保存しておきましょう。

Blogger のテンプレート全体を保存しておくことで、万が一テンプレートの HTML が修復不能になったとしても、保存しておいた Blogger のテンプレートのデータから、早急に復旧することができます。


Windows で作業する場合には、次の手順で Blogger のテンプレート全体をテキストファイルとして保存できます。

(1) Blogger のテンプレートの HTML を表示する
Blogger の設定 -> テンプレート -> HTMLの編集 の順に操作し、Blogger のテンプレートの HTML を表示します。

(2) Blogger のテンプレートの HTML をクリックすることでフォーカスし、キーボードショートカット「Ctrl + A」にて、全選択する
マウスを使って、テンプレートのHTMLを選択することもできますが、テンプレートのHTMLが長いため、マウスでは大変です。

(3) キーボードショートカット「Ctrl + C」で、クリップボードへテンプレートのHTMLをコピーする
コピー対象上で、マウスを右クリックしたときに表示される右クリックメニューでも、コピーを行うことができます。

(4) メモ帳などのテキストエディタを起動し、キーボードショートカット「Ctrl + V」で、クリップボードに記録したテンプレートのHTMLを、テキストエディタへ張り付ける
貼り付け対象上で、マウスを右クリックしたときに表示される右クリックメニューでも、貼り付けを行うことができます。

(5) テキストエディタに張り付けた Blogger のテンプレートのHTMLを、名前を付けて保存する
例えば、次のような名前で保存しておくと、いつの Blogger のテンプレートなのか分かりやすくてよいでしょう。

例）
フォーマット例：
ブログ名_日付(yyyymmdd)_時間(hhmm).txt

実例：
upa-pc_20150311_1900.txt

変更後

プレビューにて問題のないことを確認

Blogger のテンプレートに適用した変更を、すぐに保存してブログに適用するのではなく、まずは、テンプレートをプレビューして、正常にブログを表示できることを確認します。

Blogger のテンプレートの記述ミスによってエラーが発生する場合には、エディタ上でプレビューや保存をする前にエラーメッセージを表示してくれるものと、プレビューや保存は出来るのに、ブログの表示上でエラーが表示されるものがあります。

エディタ上でプレビューや保存をする前にエラーメッセージを表示してくれるものならば、それほど問題にはなりませんが、プレビューや保存は出来るのに、ブログの表示上でエラーが表示されるものだと、プレビューせずに保存してしまうと、ブログのコンテンツが見えない状態になってしまいます。

そのような最悪の事態を避けるために、Blogger のテンプレートを変更した場合には、必ずテンプレートをプレビューして、正常にブログを表示できることを確認するようにします。

変更適用後

実際にブログページを確認

Blogger のテンプレートに修正を行った後に、プレビューで正常にブログを表示できることを確認した後に、テンプレートを保存します。

しかし、テンプレートで確認できるのは、ブログのトップページのみです。


そのため、テンプレートを保存した後には、実際にブログ内の各ページをチェックして、正常に表示できていることを確認する必要があります。


特に、ブログのページごとに条件分けして、要素の有効・無効、表示・非表示を行っている場合には、必ず確認しておきたいところです。

Blogger のブログの構造については、以下のページにまとめてあります。

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-url-summary.html

以下のページを、それぞれ1ページ以上はチェックしたいところです。

• トップページ
• メインページの「前の投稿」、「新しい投稿ページ」
• 投稿（個別記事）
• ページ
• ブログアーカイブ
• ラベル
• 検索ページ

それと、モバイルページをカスタマイズできるように設定している場合には、モバイルページもチェックしておきましょう。

Bloggerのモバイルページをパソコンから見る方法 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/12/blogger-view-mobile-page-from-pc.html

まとめ

Blogger のテンプレートの HTML は非常に自由度が高く便利なものですが、その反面、設定を間違えると、ブログが表示できなくなるような事態が発生します。

しっかりと、ブログが正常に表示できるかどうかをチェックしておきたいものです。

関連記事

Bloggerユーザ必見！テンプレートのHTMLを編集するときに参考になる公式ページリスト - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/06/blogger-html-edit-ref.html

このブログ内の Blogger 記事を検索！

---

ヒューマンエラーを防ぐ知恵 ミスはなくなるか (朝日文庫)