今日は、ココログのテンプレートをいじくってみることにしました。私の加入しているのは、ココログ「プロ」なので、テンプレートの編集ができます。編集するには、もちろんHTMLやCSS、JavaScriptなどの知識が必要になるのですが、私は大丈夫です（念のため）。せっかくなので、テンプレートを自由自在に操り、自分だけのブログを作ってみたいと思い、その下地作りにチャレンジしました。
さて、テンプレートを編集するには、まずプランが「プロ」でなければなりません。これにはちょっとお金がかかりますが、ランチを食べるくらいのお金で済みますから、腕に覚えがあればチャレンジしたいもの。
「プロ」になれば、テンプレートを作成して「上級テンプレート」に変換して、そのテンプレートを自由に触れるようになります。
それぞれのテンプレートには役割がありますから、それを理解した上で触りましょう。でないと、表示がメチャクチャになってしまうばかりか、きちんと動かなくなる可能性があります。できれば、コピーをとっておいた方がよいかも知れません。
さて、がむしゃらにテンプレートをいじろうにも、どこがいったいどうなっているかわからないものです。こういうときは、既存のテンプレートを見本に、必要なところだけ持ってきてしまいましょう。
そのためには、テンプレートを作成する際に、3列のレイアウトを選び、すべての表示項目を選択し、できればあとから見てわかりやすいように項目を配置します。そして、バナーが画像のテーマを選んでおけば、あとでバナー画像を差し替えるにも便利です。
このテンプレートには、「オールインワン」とかいう名前を付けておき、全部入りとわかるようにしておきましょう。さらに、上記の画面にあるような各テンプレートを開き、別にテキストエディタなどを使ってコピーし、ローカルにファイルとして保存しておくと、あとの参照が楽になります。
テンプレートの編集中に、別のテンプレートの内容を参照するには、ブラウザを2つ立ち上げておくなどでもよいのですが、訳がわからなくなりそうなので、片方をファイルにしておけばこういった混乱もなさそうで安心です。
さて、このような下地を作って、サイドバー左にアバターか写真を表示するようにしてみました。「オールインワン」テンプレートsidebar1に、下記のような内容があります。これを、編集するテンプレートのsidebar1に貼り付ければ、サイドバー左のトップにアバターか写真が現れます（2009/12/4現在）。
<MTUserIfNicottoAvatar>
<div id="nicotto-avatar" class="module-photo module">
<$MTNicottoAvatar$>
</div>
<MTElse>
<MTUserIfPhoto>
<div id="photo" class="module-photo module">
<div class="module-content">
<img src="<$MTUserPhoto$>" width="<$MTUserPhotoWidth$>" height="<$MTUserPhotoHeight$>" alt="<$MTTrans phrase="My Photo"$>" />
</div>
</div>
</MTUserIfPhoto>
</MTElse>
</MTUserIfNicottoAvatar>
こうして見ると、ブログの雰囲気もダイブ変わるものです。
まぁ、いろいろチャレンジしてみたいと思います。
コメント