2009年03月22日

さくらのブログはhtmlテンプレートは1つだけなので改造しやすい

さくらのブログのhtmlテンプレートは1つしかない。ムーバブルタイプ(Movable Type/MT)のテンプレートはカスタマイズ性が高く、いろんなことができるがその分、複雑な構造になっている。複数のテンプレートが連携しているため、どれをさわっていいかがよくわからない。

その点、さくらのブログはhtmlテンプレートは1つという超シンプルな構造。迷いようがないのがいい。

ここでは、その改造方法を紹介する。

さくらのブログの管理画面から「デザイン」>「HTML」を選択する。
通常は「デフォルトHTML」となっている。
右上の「HTMLの追加」をクリックする。
すると、新たな画面になる。中身は自動的に「デフォルトHTML」と同じものが入っている。
とりあえず「HTML名」に適当な名称をつけて「保存」すればよい。
ここでは「どもどもなビジネスブログhtml」とした。うまくいくと以下のような画面になる。
bloghtmlselect.jpg
ここで、「適用」のところのボタンを「デフォルトHTML」から「どもどもなビジネスブログ」に変更する。
何度か「再構築してください」というメッセージがでるが、今はしてもしなくてもよい。

とりあえずこれでhtmlテンプレート改造の準備完了だ。
以下は、改造したhtmlテンプレートの全文をそのまま掲載する。
そのまま貼り付けても動くはずだが、解析タグなど一部は自分用に変更するのを忘れないように。

▼改造したhtml(全文ここから)
▲改造したhtml(全文ここまで)

上記のhtmlテンプレートが読めない場合があるようです。
改造箇所は以下の2箇所です。

▼1.<title>の行を以下の行にさしかえ

<title><% if:extra_title %><% extra_title %>:<% /if %><% blog.title %></title>
▼2.<div id="footer">から</div>の3行を以下の16行に差し替え 
<div id="footer">
<a href="<% blog.page_url %>"><% blog.title %></a><br />
さくらブログを使いこなしたら次は<a href="http://www.domo-domo.com/mtos/" target="_blank">MTOSで行こう!</a><br />
</div>
</div>
<!--この下にアクセス解析タグを貼る-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1080502-12");
pageTracker._trackPageview();
} catch(err) {}</script>
<!--ここまで-->
※このカスタマイズは当ブログのものなので、そのまま使わずに参考にする程度にとどめておいてください。
posted by さくらブログ at 07:53| htmlのカスタマイズ
さくらのブログでビジネスブログ(さくらのブログを使いこなしたらMTOSで行こう!もご覧ください)