極！TypePad

画像のないAmazonの本をオリジナルの画像で表示したい

「Amazonの本を紹介したいんだけど、Amazonに画像がなくて表示できない・・でもAmazonへのリンクをそのままに、画像は自分が用意したものにしたいんです！」というがんばりやなあなた、そんなあなたにこちらの宙返りがおすすめです！

一言で言うと・・
「とりあえず普通にタイプリストに表示させソースこぴってリンクリストにはっつけ、画像のURLだけ変更するのだー」
です。

大まかな手順としては、

1. ISBN番号により一度本リストで表示させる。
2. 実際のウェブログに表示されたソースコードをコピーする。
3. そのソースをリンクリストのメモ欄に貼付ける（要設定変更）
4. 貼付けたソースの画像サムネイルのアドレスをあらかじめアップロードしておいたURLに変更する。

といったような感じとなります。

まず、普通にISBN番号から本リストに表示させます。実際のウェブログには以下のようなコードが表示されると思います。

<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844320785/hayaseblogtp-22"><img border="0" alt="平田 大治: Movable Type標準ハンドブック Movable Typeで今すぐできるウェブログ入門 改訂版" src="http://images-jp.amazon.com/images/P/4844320785.09.THUMBZZZ.jpg" /></a><br /><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4844320785/hayaseblogtp-22">平田 大治: Movable Type標準ハンドブック Movable Typeで今すぐできるウェブログ入門 改訂版</a>

上述したようなソースをコピーし、次にタイプリストの種類を"リンク"として作成し、"メモ"欄に貼付けます。ここで設定のポイントとなるのは、そのタイプリストの設定＞上級者向け設定の"メモを表示"の部分を"テキスト表示する"にしておくことです。こうするとメモ欄でHTMLタグが有効になります。
貼付けた後に画像のサムネイル部分のリンクを予めアップロードしておいた、画像のURLに置き換えます。上述の例ですとサムネイルの画像部分のソースは
src="http://images-jp.amazon.com/images/P/4844320785.09.THUMBZZZ.jpg"の部分となります。

以上のような方法で、画像がないAmazonの本でもAmazonのリンクをそのままに自分の用意した画像を利用することができると思います。

TypePadでドメインマッピング！

「うーんそろそろ、オリジナルドメインとりたいなーTypePadでは、どこでドメインとれば上手くいくんだろう？後は、どうやって設定するんだろう？」というオリジナリティー溢れるあなた、そんなあなたにはこちらのドメイーーンマッピーング！

最近私がドメインマッピングを行った実例を紹介します。

ドメインは、VALUE-DOMAIN.COMでとりました。ここは、.comなどだったら年額990円でダイナミックDNSも対応しているいい感じの所です。ドメイン登録から管理まで年間９９０円のみですみます。

私は"hayase.tv"をとりました。tvかよってツッコミはなしの方向でお願いします(^_^;)
今回は、http://hayase.typepad.jp/blogというTypePadのウェブログに、http://blog.hayase.tv/というドメインをマッピングしています。
ちなみにドメインマッピング後も元々のTypePadのアドレスでもアクセスできます。

ドメインの新規取得までは、とりあえずVALUEさんでマニュアルみながらやってみてください。ドメインは浸透するまで２４〜４８時間ほどかかると一般的にはいわれています。（私の場合はなぜか２時間くらいでした）

ドメインが浸透したら、まずTypePadでドメインマッピングをするための"CNAMEをTypePadの自分のサイトへ向ける"という設定をします。

まず、VALUE-DOMAINのサイトで"ログイン／メニュー"＞DNSレコード／URL転送の変更＞取得したドメイン名をクリック、そうすると以下のようなページが表示されます。

ここで、CNAMEの設定を行うのですが、今回hayase.tvのサブドメインとしてblog.hayase.tvを設定するので、"ホスト名"の部分には"blog"と入力します。
"ターゲット"はTypePadの自分のアドレス"hayase.typepad.jp."を入力します。
ここで重要なのは、jpの後に"."をつけることです。これがないと上手くいきません。
・・ん？"hayase.typepad.jp/blog"にマッピングするのに"hayase.typepad.jp."がターゲットでいいの？と疑問に思う人もいるかと思いますが、/blogの方へのマッピングTypePad側の設定により行います。
"タイプ"はCNAMEを選び、"MX設定"は何も入力しません（後で自動で入力されます）。
そして、"変更ボタン"を押すとVALUE-DOMAIN側での設定はおしまいです。

後は、反映されるのを待ちます。私の場合は２，３０分ほどで反映されました。

次に、TypePad側の設定を行います。

1. コントロールパネル＞サイトアクセス＞ドメイン・マッピングの"ここからスタート：ドメイン名をマッピングする"ボタンを押す。
2. "すでにドメイン名の登録を済ませている"が選択されていることを確認し、"選択して次のステップへ"ボタンを押す。
3. ドメイン名の入力欄に、先ほど設定したドメインを入力し、"DNS設定を取得"ボタンをおす。（私の場合は"blog.hayase.tv"となります。）
4. 次の画面になったら"最終ステップへ"ボタンを押す。
5. 今回は特定のウェブログへマッピングを行うので、"ウェブログを指定"からマッピングするウェブログを選択し"ドメインを追加"ボタンを押す。

これで、画面下の"あなたのドメイン"に登録したドメインが表示されマッピング済みとなり、１〜２時間ほどたつとTypePad側での設定が反映されますので、http://blog.hayase.tvでアクセスするとhttp://hayase.typepad.jp/blogのページが表示されるかと思います。

最後に、"有効"にチェックを入れ"設定"ボタンを押した後に、ウェブログ＞（マッピングしたウェブログの）デザイン＞現在選択されているテンプレートセットの、"公開"ボタンから、すべてのファイルを再構築するとページ内の各リンク情報もマッピングされたものになります。
ちなみに、ここの"有効"のチェックは、再構築した場合のリンク情報を変更するかについての設定なので、もしマッピングを外す場合はリストから削除する必要があります。

以上、TypePadでのドメインマッピンを実際に行った手順となります。

RSSファイルのリンク部分に画像を入れたい

「RSSファイルのリンクが"このサイトと連携する(XML)"って表記だけじゃわかり難くなくなくな〜い？」という目立ちたがり屋のあなた、そんなあなたにはこちらの絵画がお勧めです！

この方法を行うと、このページの右下の"RSS このサイトと連携"のようになります。

上級者テンプレートのsidebarというテンプレート内に、RSSファイルへのリンクを生成する以下のような部分があると思います。

<div class="link-note">
<a href="<$MTBlogURL$>index.rdf"><$MTTrans phrase="Syndicate this site (XML)"$></a>
</div>

まず、この部分を以下のように変更します。
<div class="link-note">
<a id="rssimage" href="<$MTBlogURL$>index.rdf">このサイトと連携</a>
</div>

ここで、このサイトと連携の部分を<$MTTrans phrase="Syndicate this site (XML)"$>のままにしておいてもかまいません。その場合は、"このサイトと連携する(XML)"と表示されます。（単純にスタイルシートのIDを付けた状態ですね。）

次にStylesheetファイルに以下のようなコードを追加します。

#rssimage {
    display: block;
    background: url(http://hayase.typepad.jp/typepad/rss.gif) no-repeat 0% 50%;
    padding-left: 45px;
    height: 20px;
    }

もちろん画像のURLはあらかじめファイル・マネージャ等でアップしておいて指定します。
padding-left: 45px;　は文字列の左側に画像を挿入するので重ならないように画像の幅以上に指定しています。
height: 20px;　は画像の高さ以上を指定しています。

以上のような方法となりますが、もうちょっとクールな見せ方もできると思います(^_^;)

コメント投稿欄の「人名」の表記の変更

「コメント投稿欄の"人名"という表記を"お名前"といったように、変更したいんだけどー。」というおばあちゃん思いのあなた、そんなあなたにはこちらのお煎餅がお勧めです！

上級者テンプレートのIndividual Archives内に以下のような部分があります。

<div id="comment-data">
<p id="comment-name"><label for="author"><$MTTrans phrase="Name:"$></label><br />
<input onchange="handleChange(this)" tabindex="1" id="author" name="author" /></p>

この中の<$MTTrans phrase="Name:"$>の部分を削除し、その場所に"お名前"を挿入すれば変更されます。

<div id="comment-data">
<p id="comment-name"><label for="author">お名前：</label><br />
<input onchange="handleChange(this)" tabindex="1" id="author" name="author" /></p>

ただ、コメント確認画面に関してはテンプレートの修正が行えませんので、人名と表示されます。

ちなみに、<$MTTrans phrase="Name:"$>というのは言語設定を変更したときにも自動で変更してくれる便利なものでもありますね。

カテゴリーページ別タイトルバナー変更

「カテゴリーページごとにタイトルバナーを違うものにしたいんだけど、どうしたらいいんだろー？」とお悩みのあなた、そんなあなたにはこちらの猫がお勧めです！

今回はサイドバーのカテゴリー名をクリックした時に表示される、カテゴリーページ毎にバナーを変更するやり方となります。

おおまかな流れは以下のようになります。

1. Category Archivesの編集でID指定
2. カテゴリーごとのIDを確認
3. バナー画像をアップロード
4. スタイルシートを編集

１．まずCategory Archives内で以下のようなバナーイメージに関するクラスが指定されている部分を

<a id="banner-img" href="<$MTBlogURL$>"><span class="banner-alt">&nbsp;</span></a>

以下のように変更します。

<a id="banner-img<MTEntries lastn="1"><MTEntryCategories><$MTCategoryID$></MTEntryCategories></MTEntries>" href="<$MTBlogURL$>"><span class="banner-alt">&nbsp;</span></a>

このソースの変更は、スタイルシートのクラスIDをカテゴリー毎に自動で付けるためです。
ここでのポイントはMTEntryにlastn="1"をいれていることです。（決行あらわざではありますが(^_^;)）

２．次にカテゴリIDを確認するのですが上述のコードに変更後、カテゴリーアーカイブを再構築し、カテゴリーページを見ると<a id="banner-img18034"といったようなID指定がされていると思いますので、カテゴリー事にメモします。

３．ファイル・マネージャから任意の場所にそれぞれのバナーをアップロードします。

４．最後にスタイルシートの編集をします。カテゴリーページ毎にID指定がなされているので、先ほどメモしたIDを指定して画像バナーをを挿入するコードを記述します。
以下は、このウェブログでの例となります。（バナーのスペル違うじゃんとかはご愛嬌ということで(^^;)）

a#banner-img {
    display: block;
    background: #FFFFFF url("http://hayase.typepad.jp/typepad/banar4.jpg") no-repeat;
    height: 120px;
    }
a#banner-img18034 {
    display: block;
    background: #FFFFFF url("http://hayase.typepad.jp/typepad/banarupper.jpg") no-repeat;
    height: 120px;
    }
a#banner-img18033 {
    display: block;
    background: #FFFFFF url("http://hayase.typepad.jp/typepad/banarmid.jpg") no-repeat;
    height: 120px;
    }

以上のような方法で、カテゴリーページ毎にバナーを変更することができます。

やり方は多少ことなりますが、Permalinkごとのカテゴリー別サイドバーカスタマイズのように、各Permalinkページ事にも応用可能かと思います。それについては、またの機会に・・。