TypePad にトガキューを設置する方法

Six Apart 本家のブログＡＳＰである TypePad にブログシステムを移行させました。 TypePad は 登録プランが３種類あります。 Basic / Plus / Pro で、価格が月額 420円 / 840円 / 1260円です。この T5Blog は Basic プランで動いています。

Basic も大半の機能を使えて過不足ないのですが、ブログのテンプレートをいじることができません。基本的にデザインテーマがベースになっており、テンプレートをゴリゴリといじれないのが難点。そう、TogaQ を設置するのが大変な訳です。でもなんとか突破できました。おそらくは問題なく表示されてるでしょ。

TypePad でのトガキューの設置方法を紹介しておきます。トガキューを TypePad に設置する上で問題になるのは、

• TogaQ スクリプトをどうやって読み込ませるか。
• TogaQ が呼び出す画像をどうやって配置するか。
• ブログ名がテキストで挿入されるが、いかに画像題字を導入するか。
• TogaQ にサイズがあうブログデザインの作成。

あたりです。まず、TogaQ スクリプトの埋め込みですが、お天道様は許しても：ココログでの設定 で突破します。ブログの副題エリアにスクリプトを書き込むという方法です。

１） TypePadホーム  >  ブログ  >  自分のブログ名  >  設定  >  ウェブログの基本情報 に移動します。
２）「ブログの副題（キャッチフレーズ）」欄に TogaQ スクリプトを記入（下記例）。

<script type="text/javascript" src="http://www.remus.dti.ne.jp/~sugiyama/
headpic/getheadbanner.js"></script>
<script language="javascript" type="text/javascript"><!---
document.write('<table border="0" cellpadding="0" cellspacing="0"  width="800" height="100"
background=');
document.write(togaq(modeDailySiteRandomFile));
document.write('><tr><td align="left" valign="top">');
var d = document.createElement('div');
if(d && d.runtimeStyle){
document.write('<img src="https://t5blog.waveformlab.com/NAT/headpic/blank.gif" border="0"
hspace="0" width="400" height="100" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=//www.waveformlab.com/resetjp/nat/t5/t5blog_layerb.png,sizingmethod=image);"/>');
}else{
document.write('<img src="//www.waveformlab.com/resetjp/nat/t5/t5blog_layerb.png" border="0" hspace="0"
width="400" height="100" />');
}
document.write('</td></tr></table>');
// -->
</script>

※ １行目でスクリプト呼び出し。
※ widt=800 の table を構築し、そこのバックグラウンドに TogaQ を流し込み。
※ 題字である t5blog_layerb.png を table に配置。 PNG が読み込めないタコな Windows IE のために AlphaImageLoader に関する記述を追加。参考記事

これでトガキューを配置できました。テンプレートにもよりますが、この状態ではブログのテキスト題字と画像の題字が重なってしまうはずです。なのでテキストの題字をスタイルシートにより消し去ります。邪道な方法ですが、これしか思いつきませんでした。

１）デザイン  >  カスタムCSSを編集 に移動。
２）カスタム CSS の題字部分記述 div#banner-inner h1#banner-header を height:0px font-size: 0px ってな感じで潰します。邪道です。
３）これでだいたいオーケーですが、 Safari だと文字がうっすらと残っちゃいます。なのでロゴっぽく「★T5B」としました。

後は前述のカスタムCSSを駆使してブログデザインを変更していきます。トガキューは横幅が 800 ピクセルだからリサイズからすることになります。以下が参考になります。

・ブログ・クラス構造
・カスタムCSSについて

参考になりましたか？