Customize in Ninja Blog

フッターテンプレートを設定するには、管理画面の『フッターテンプレート設定』⇒『フッターテンプレートの新規作成・編集』へ進み、テンプレートを登録します。

その際に、ひとつ注意事項があります。
ご自分の使っているエディタはどの状態でしょうか？次の３つが考えられますのでご確認ください。

１、HTMLエディタを使用
２．テキストエディタ（改行を反映する）
３．テキストエディタ（改行を反映しない）

状態の確認は、『管理画面の設定』というところで確認してください。

１、HTMLエディタを使用
１の方は、ソースを記事内へ切り取って貼り付ける場合は、『ソース』というボタンをクリックしてから記事内へ貼り付けてください。

２．テキストエディタ（改行を反映する）
こちらの方は、記事内では改行をするとそのまま改行がブログに反映されてしまいます。フッターテンプレートのソースを記事内で使用したいい場合は、ソースの改行を全てなくしてから使用するか、テキストエディタを改行を反映しないモードにして記事をお書きください。

３．テキストエディタ（改行を反映しない）
なにも問題ありません。フッターテンプレートに表示されたソースをそのまま記事内で使うことができます。

では、実際のソースはこちらになります。

<!--amazon_web_services-->
<div class="Amazon">
<!--商品名-->
<h3 class="Amazon-product"><a href="<!--$amazon_Url-->" target="_blank"><!--$amazon_ProductName--></a></h3>

<div class="Amazon-image">
<!--Amazonの影付き画像-->
<a href="<!--$amazon_Url-->" target="_blank">
<img src="http://images-jp.amazon.com/images/P/<!--$amazon_Asin-->.09._PC_.jpg" alt="<!--$amazon_ProductName-->">
</a><br />
<!--Amazonの大きい画像へのリンク-->
【<a href="<!--$amazon_ImageUrlLarge-->" target="_blank">画像を拡大する</a>】
</div><!--△Amazon-image-->

<div class="Amazon-data">
<strong>≪データ≫</strong><br />

著者：<h4 class="Amazon-author"><!--$amazon_Presenter--></h4>

発売日：<!--$amazon_ReleaseDate--><br />
定価：<!--$amazon_ListPrice--><br />
ASIN：<!--$amazon_Asin-->
</div><!--△Amazon-data-->

<div class="Amazon-footer">
<a href="<!--$amazon_Url-->" target="_blank">Amazon.co.jp</a>
</div><!--△Amazon-footer-->
</div><!--△Amazon-->
<!--/amazon_web_services-->

スタイルシートは私の場合はこのようにしてあります。
スタイルシートはテンプレートの編集で追加してください。スタイルシートがないとただづらづらと下に情報が書き足されるだけのテンプレートですので、指定はぜひしてくださいね(＾-＾；)
※テンプレートによって多少違って見えることもあります。

/*フッターテンプレート全体*/
.Amazon {
width:400px;
margin:0px 10px;
padding:5px;
border:1px solid #99ccbb;
background:#ffffff;
}
/*商品名*/
h3.Amazon-product {
color:#6699bb;
margin:0px 5px 0px 5px ;
padding:0px 0px 0px 5px;
border-left:5px solid #99ccbb;
}

h3.Amazon-product a:link{
color: #99ccbb;
background-color:#ffffff;
text-decoration:none;
border-bottom:1px dashed #99ccbb;
}

h3.Amazon-product a:visited {
color: #99ccbb;
background-color:#ffffff;
text-decoration:none;
border-bottom:1px dashed #99ccbb;
}
h3.Amazon-product a:hover{
color: #bfcc7a;
background-color:#ffffff;
text-decoration:none;
border-bottom:1px dashed #bfcc7a;
}
h3.Amazon-product a:active{
color:#bfcc7a;
background-color:#ffffff;
text-decoration:none;
border-bottom:1px dashed #bfcc7a;
}

/*画像を表示している部分*/
.Amazon-image {
width:120px;
text-align:center;
float:left;
font-size:11px;
}

/*データを表示している部分*/
.Amazon-data {
text-align:left;
width:250px;
float:right;
}
/*著者名*/
h4.Amazon-author {
display:inline;
}
/*Amazon.co.jp*/
.Amazon-footer {
text-align:right;
clear:both;
}

では、ご自由にアレンジして使ってみてください♪
間違いがあったらご連絡ねがいます。では(*- -)(*_ _)ペコリ