bloggerカスタマイズの事始め

カスタマイズを上手に行って行くために必要な基礎知識と救急知識をメモ。
bloggerをカスタマイズしようとして、ハマってしまった人は一度見てみてっ！

Bloggerが提供するカスタマイズ

Bloggerのサービスでは、色々なカスタマイズ手段が提供されているが、大まかには次の３つに分類することが出来る。

1. 好みのデザインにあった既存のテンプレートを選択する
2. Bloggerテンプレートデザイナー
3. HTMLの編集

既存テンプレートの選択は、カスタマイズというよりも、自分好みのデザインの選択だ。各ブログの管理ページ左側のメニューから「テンプレート」を選ぶと、Bloggerが提供する幾つかのテンプレートが表示されるので、自分好みのデザインにすることが出来る。

次に細かなカスタマイズを行う場合、「テンプレート」ページ内の「カスタマイズ」ボタンを押すことで、「Bloggerテンプレートデザイナー」という機能を使うことが出来る。このテンプレートデザイナーを使うと、背景色、背景画像、表示領域の幅、全体のカラム構成、更には、フォント、文字色から、独自のCSS設定まで行える。

更に根本的なWebページ構成のカスタマイズを行う場合、「HTMLの編集」を行うことで、直接Bloggerのテンプレートファイルを編集することが出来る。

さて、Bloggerでのカスタマイズは、ほぼ何でも出来て超高機能なのだが、一方で、あれこれ試していると上手くいかない事も出てきたりするクセのあるサービスだったりもする。

テンプレートを入れ替える際の注意

既存テンプレートの選択については先で述べたが、これは「テンプレート」のページから何時でも出来る。しかし、この時に注意しなければならない事がある。

それは、

テンプレートデザイナーの独自CSSが消える

ということだ。

独自CSSを使っているとすれば、だいたい、何処かのページを一生懸命読んで作った見出しやテーブル用のデザインのカスタマイズが書き込まれている。これが一瞬でなくなると、とても悲しい思いをする。

なので、はじめから、

独自ＣＳＳの内容は自分のＰＣ内のテキストファイルに保存しておく

のが良い。そうすることで、簡単にコピペして復活させることが出来る。テンプレートのバックアップとか云々かんぬん考えるよりも単純に対処するのに限る。

海外テンプレートの罠

さて、テンプレートについては、「テンプレート」のページで提供されているテンプレートを選択するだけでなく、外部にある「テンプレートファイル」を読み込む事も出来る。

というよりも、Bloggerには、自分のカスタマイズしたテンプレートを「バックアップ／リストア」する機能がある。つまりは、この機能を利用すれば、自分でカスタマイズしたブログのテンプレートデータをバックアップする事でファイル化して、そのファイルを配布できる。また、配布されているバックアップファイルを自分のブログに読み込んで使う事もできるのだ。

このような、Bloggerのカスタマイズテンプレートは、日本ではほとんど見かけないのだが、googleで「blogger template free」とかすると、海外のテンプレート配布サイトやその紹介まとめサイトがいくつも引っかかる。

しかし、どれも、魅惑的なデザインで、「おお！これ使ってみるンゴ！」という気持ちになるが、実際に試してみると、残念な気分になる。

このページを見ている人ならば既に経験済みかもしれないが、だいたいの不満は、「思ってたのと違う！！」である。自分のページは日本語なので小奇麗なアルファベットフォントでの雰囲気が全くなかったり、Demoページでは居た筈の綺麗なお姉さんがいなかったりするのは勿論だが、何故か、ページ構成が狂っていたり、ウジェットが思うところになかったりするのだ。

期待どうりでなくてがっかりする程度ならば良いのだが、とても困った問題に直面する場合がある。

色々なテンプレートを幾つか読み込んで試しているうちに、ページ構成が破壊的にグチャグチャになって来て、その状態を解消しようとbloggerが提供しているテンプレートの「シンプル」とかを選んで読み込んでみても、症状は治らなくなりお手上げ状態になったりすることがある。

これらは、Bloggerのリストア機能に少しクセがあるからだ。これに上手く対処するにはBloggerのテンプレートの構造と仕組みを知っておく必要がある。

空のテンプレートで元に戻す

さて、前述のようにブログのページ構成が壊れてしまった人がこのページを読んでいる場合、取り敢えずは以下の方法を試してみて欲しい。

何をするかというと、テンプレートの内容を手動で必要最小限の空のテンプレートに差し替え、その状態で、Bloggerの提供する既存テンプレートを読み込むのだ。この方法の味噌は、必要最小限のテンプレートに差し替える際に、リストア機能を使わないことだったりする。

具体的な方法は、以下の手順で行える。

まずは、「テンプレート」ページの「HTMLの編集」ボタンを押して、編集画面に入る。

次に、編集画面で、すべてのソースを消す。（Ctrl+aとかで全選択してdelete）

空っぽの状態では、保存できないエラーが出るが、次の必要最小限テンプレートをコピぺすればまた保存できるようになるので、気にしない。

ここで、この空っぽになった部分に、「必要最小限の空のテンプレート」をコピペする。
この必要最小限テンプレートは、ブロガーカスタマイズの情報を提供しているCheetah's Blogのページから引用させて頂いた。
コピぺの内容はコレだ！
このテンプレートを貼り付けたら「テンプレートを保存」をクリックして保存する。このテンプレートには何の表示機能さえないので、ブログページにアクセスしても何も表示されなかったりするが、びっくりしなくても良い。

最後の仕上げとして、このまさにまっさらな状態で、左メニューの「テンプレート」から既存のテンプレートを選択して適用すれば、全てがすっきり正常な状態になる。カラムの状態やそこにあったウィジェット（自己紹介とか記事の一覧とか）が無くなったりしていると思うが、テンプレートデザイナーの「レイアウト」で全体構成を決めた後、左メニューの「レイアウト」で、その内容となるウィジェットを再度設定してあげれば良い。

お利口なBlogger

なんだか扱いが面倒くさそうなBloggerだが、別にBloggerが悪いわけではない。Bloggerは、Bloggerで、ブログシステムが壊れないように内部で一生懸命頑張っているのだ。

例えば、先に少し書いたが「HTMLの編集」画面では、ソースを空っぽにするとエラーが出てセーブが出来なくなる。何のエラーが出ているかというと、保存する前にテンプレートの書式を検査して、おかしなことになっていると保存できないようにしてあるのだ。

そこで、「必要最低限のテンプレート」の出番である。このテンプレートは、Bloggerテンプレートの書式を満たす最小限のものだ。しかし、最小限がゆえに、Bloggerのお利口さを見ることができる。

上記のグチャグチャ救出作戦では、直ぐに既存テンプレートの読み込みを行ったが、必要最小限テンプレートを保存して、一旦、HTMLの編集ページを離れてから、もう一度、HTMLの編集ページに入って、ソースを見てみよう。コードが勝手に付け加えられているはずだ。すなわち、Bloggerには自動回復機能があったりする。

Bloggerをソースレベルでカスタマイズして行くときには、カスタマイズする側がこれらのお利口機能とうまく向き合って行かないと、前述のようなトラブルに見舞われたりするようなのだ。

日本語でのBloggerカスタマイズの記事は少ない。そして、柔軟で高機能なBloggerのカスタマイズシステムであるがゆえに、一方で、その中身は結構複雑になっており、それを自力で紐解くのは、先人の書いているカスタマイズ記事をみても大変そうだったりする。

しかし、一人、また一人と、先人の疲れ果てた骸を乗り越えていけば、少しづつ何かを得られるかもしれないので、このページでもメモをしていけたらいいなと思って書き始めてみる。