忍者ブログ

Customize in Ninja Blog

NINJAブログを使いこなそうと始めたブログ。

2017.10│ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Amazon用フッターテンプレート④基本ベースⅡ

久しぶりにフッターテンプレートを作成。
前回はテーブルタグで基本ベースを作成しました。こちらも、テーブルにclass指定を入れるなどすればCSSでの調整も可能なのですが、よりCSSで表現しやすいように作り変えました。
変更点はこんなところ
・<div>で作成。
・CSSで見栄えを指定。


サンプル表示▼

改訂第3版 JavaScriptポケットリファレンス Pocket reference

≪データ≫
著者:

古籏 一浩

発売日:2003/05/24
定価:¥ 2,289
ASIN:4774117269
フッターテンプレートを設定するには、管理画面の『フッターテンプレート設定』⇒『フッターテンプレートの新規作成・編集』へ進み、テンプレートを登録します。

その際に、ひとつ注意事項があります。
ご自分の使っているエディタはどの状態でしょうか?次の3つが考えられますのでご確認ください。
1、HTMLエディタを使用
2.テキストエディタ(改行を反映する)
3.テキストエディタ(改行を反映しない)
状態の確認は、『管理画面の設定』というところで確認してください。

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

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

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

では、実際のソースはこちらになります。
<!--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;
}


では、ご自由にアレンジして使ってみてください♪
間違いがあったらご連絡ねがいます。では(*- -)(*_ _)ペコリ
PR
*COMMENT-コメント-
▽(ノ゚ο゚)ノ オオオオォォォォォォ-
コメントフォームをいじっていて、投稿ボタンを「タダの飾り」にしたまま24時間以上放置したPavです(。。;)

CSS使ってフッターテンプレートを考えてみようと思いつつ、なかなか手がつけられずにいました。←ニガテ意識(爆)
ん~、やっぱりイイですね♪(゚▽゚*)
ぜひ今度、使わせてもらいたいです
△Re:(ノ゚ο゚)ノ オオオオォォォォォォ-
>コメントフォームをいじっていて、投稿ボタンを「タダの飾り」にしたまま24時間以上放置したPavです(。。;)
か、かなり痛いですね、それは。

>ん~、やっぱりイイですね♪(゚▽゚*)
>ぜひ今度、使わせてもらいたいです
ぜひ、お使いください♪
CSSはあんまり詳しく指定してないので、お好みで~
画像とか使うともっとよくなるんでしょうけれど・・・
基本ということでかなり単純。
*COMMENT FORM-コメント投稿-
  • この記事へのコメント投稿フォームです。
 
Name:
Title:
Mail:
Url:
Color:
Decoration: Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Message:
Pass: ※編集時に必要です。
Secret:  ※チェックすると管理者へのみの表示となります。
*TRACKBACK-トラックバック-
  • この記事のURLとトラックバックURLです。
  • 必要に応じてご使用くださいませ。
この記事のURL▼
この記事のトラックバックURL▼
■Search
■About

●このブログについて
忍者ブログを使いこなそうと始めたカスタマイズサイト。分からないことばかりで四苦八苦しています。 変なところあったらぜひ言ってくださいませ(*- -)(*_ _)ペコリ
なお、このブログで実験もしています。 常に実験しているので、崩れとかありましたら教えてくださるとうれしいです。⇒BBS

●姉妹サイト・その他
 徒然倶楽部 →こちらは記事の内容を下に移転&閉鎖しました。
 現在は十六夜's Blogがメインブログになってます。
 Alphaの小部屋・・・BOOKLOGで作った本棚
 Mixi・・・参加中のSNS
 十六夜-the sixteeth night-・・・現在作成中のメインHP

●リンクについて
このブログはリンクフリーです。こんなブログでよろしければぜひリンクしてやってください♪
リンクバナー

●RSS
このブログのRSSはこちら▼
RSS 0.91
RSS 1.0
RSS 2.0

●環境推奨
動作状況:Windows XP SP2
ブラウザ:主にFirefox 他IE、Opera等
解像度:1024*768

●FireFox
私が普段利用しているブラウザ。 拡張機能のWeb Developerをいれるとテンプレ作成にとても便利なブラウザになります。自分の使いたい機能をいろいろインストールしてアレンジしてます♪
ダウンロードは▼からどうぞ

●Pingoo!
忍者ブログのPing送信先は10件まで。 それでもいろいろなところにPingを送りたいという場合にオススメなPing一括送信サイトです。ここ1件に送るだけでいろいろなところに送ってもらえます♪

●クリックで救える命がある

■Calendar
09

11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
■CM&TB
●コメント

●トラックバック
Scrollbar ONorOFF
■Thanks
テンプレートを作成するに当たってよく利用させていただいているサイト様です。
■QRcode
QRコードをクリックするとメールフォームが開きます。
メールフォームでPCから携帯にこのブログのURLを送ることができます

もし、携帯電話で表示されきれない~とご不満の方はこちらのアプリを導入してみることをお勧めします。

無料体験できるのでぜひお試しください♪
■Template
○公開したテンプレのプレビュー

ブルーチャイナ
詳細
ブルーチャイナ
詳細
Gray2block
詳細
China
詳細
Gray
詳細
JapanBlue
詳細
碧
詳細
蒼
詳細
○公開された携帯用テンプレのプレビュー

The Leaf
詳細
○忍者ブログで共有化中のテンプレ

Alternation-緑×白-
記事番号で背景色が交互に変わるちょっとおもしろテンプレ。
パンくずナビも付いてます♪

The Leaf
初の携帯用テンプレート。さわやかな感じに仕上げてみました
絵文字使用。トップページにカテゴリー表示アリ。

ブルーチャイナ
涼しげなチャイナ風左右メニューテンプレ。
China」の色違いのような感じですが、配置は違いますのでご注意ください。
※このテンプレのピンク版もあります。共有化していないので記事内よりお持ち帰りください。
ピンクチャイナ

Gray2block
ノート風テンプレ「Gray」の2カラム版です。
China
かわいい系の3カラムテンプレート。イメージはチャイナ風♪
同じ配置の青バージョンも作成しました。こちらは共有化してないので記事内よりお持ち帰りください。
China-BlueVer-

Gray
灰色のノート風罫線テンプレ。追記開閉式の3カラムです。

JapnBlue
サッカー日本代表ユニフォームなテンプレ。追記開閉式
※このテンプレには2カラムバージョンもあります。
JapanBlueの2カラム版

碧-midori-
淡いパステルグリーンのテンプレ。追記開閉式


画像使用なしの5ブロックテンプレ。

Scrollbar ONorOFF

○広告




■Recommend
ルナエンバシージャパン

ストレイシープがなんだかかわいくて好き(^-^*)

■Visiter