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

TOGAQ

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

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

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

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

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


1) TypePadホーム  >  ブログ  >  自分のブログ名  >  設定  >  ウェブログの基本情報 に移動します。
2)「ブログの副題(キャッチフレーズ)」欄に 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>

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

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

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

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

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

参考になりましたか?

TOGAQ
この記事をシェアしてくれると、とても嬉しい😆
Follow Me !
波形研究所 所長

WAVEFORM LAB(ウェーブフォーム・ラボ) は音楽制作、デジタルライフ、イノベーションをテーマとするサイトです。

1997年、伝説の PDA、Apple Newton にフォーカスした Newton@-AtMark- を開設、Newton や Steve Jobs が復帰した激動期の Apple Computer のニュースを伝えるサイトとして 200万アクセスを達成。2001年からサイトをブログ化、2019年よりサイト名を WAVEFORM LAB に改称、気になるネタ&ちょっとつっこんだ解説をモットーにサイトを提供しています。

Follow Me !
WAVEFORM LAB

コメント

  1. V.J.Catkick より:

    <script type=”text/javascript” src=”http://www.remus.dti.ne.jp/~sugiyama/
    headpic/getheadbanner.js”></script>
    <script language=”javascript” type=”text/javascript”><!—
    callTogaQ( “http://www.vjcatkick.com/”,
    “http://www.vjcatkick.com/blog/headimg/blank.gif”,
    “http://www.vjcatkick.com/blog/headimg/ht_base05.png”,
    togaq( modeDailySiteRandomFile ) );
    // –>
    </script>
    貼付け用スクリプトです。(コメント投稿用にブラケットを全角にしてあります)。

  2. V.J.Catkick より:

    貼付け用です。
    script type=”text/javascript” src=”http://www.remus.dti.ne.jp/~sugiyama/
    headpic/getheadbanner.js”/script
    script language=”javascript” type=”text/javascript”!—
    callTogaQ( “http://www.vjcatkick.com/”,
    “http://www.vjcatkick.com/blog/headimg/blank.gif”,
    “http://www.vjcatkick.com/blog/headimg/ht_base05.png”,
    togaq( modeDailySiteRandomFile ) );
    // —
    /script

  3. N@ より:

    スタイルシートをあげておきます。参考にどうぞ。
    カスタマイズCSS
    http://t5blog.typepad.jp/weblog/styles.css
    ベースとなる CSS
    http://t5blog.typepad.jp/.shared-ja/themes/common/base-weblog.css
    デザインテーマのCSS
    http://t5blog.typepad.jp/.shared-ja/themes/lilia/theme-beckett.css

タイトルとURLをコピーしました