元CAバンビのずぼら日記

元国際線乗務員の情報発信ブログ。海外、旅行、料理、ワイン、美容のお話など。

Amazon商品紹介のカスタマイズ方法@はてなブログ

皆様、こんにちは!初心者WEBデザイナーのバンビです♡(笑、うそです)
(自分用メモです。意外と自分のページからコピペしてやる事が多いので...)

 

今日はAmazon商品紹介をカスタマイズ!

はてなブログには便利な「商品紹介」の機能がついているのですが、普通にやるとこんな感じになる↓↓

神戸フランツ 神戸苺トリュフ(R)

神戸フランツ 神戸苺トリュフ(R)

 

↑↑これを↓↓こんな感じにしたい♡

神戸フランツ 神戸苺トリュフ(R)

神戸フランツ 神戸苺トリュフ(R)
【めっちゃ美味しくておすすめのシイーツです(^-^)】
枠なしで、ここに好きな説明とかも書けるようにしたい♡

 

前提:

①Amazonアソシエイトに登録→承認。
②はてなブログでアソシエイトIDを設定。
ダッシュボード→アカウント設定→AmazonアソシエイトID設定

はてなブログ編集サイドバーに「Amazon商品紹介」を追加する。
やり方↓

f:id:zuboraca:20180309111011j:plain

f:id:zuboraca:20180309111102j:plain


これで、編集画面からAmazon商品紹介がいつでもできるようになる。
通常の流れは↓↓

f:id:zuboraca:20180309123013j:plain

この手順でやると↓↓

東和産業 緩衝材 ピコクッション ハート 100個入り

東和産業 緩衝材 ピコクッション ハート 100個入り

 

 

♡カスタマイズ後♡

 

東和産業 緩衝材 ピコクッション ハート 100個入り

東和産業 緩衝材 ピコクッション ハート 100個入り
説明のために「ハート」で検索して適当に選んだけど、これめっちゃ可愛くない?(笑)

↑↑商品の説明や自分の意見などを自由に入れられる!

 

♡カスタマイズやり方♡

CSS
まず、CSSで↓のコードをコピペ(てきとー解説みたい方は→*1
デザイン→スパナマーク→{}デザインCSSにペースト→変更を保存

/*アマゾン画像の横に文字↓↓*/
/*clearfix*/	
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;	
}
/*画像と文書を並べて表示する*/
  .inner {     
	float: left ;  /*左側に配置する*/
	}
  .inner p{
	float:right;   /*右側に配置する*/
   }
  .gazou{
    width: 150px !important;
    margin: 0px 15px 15px 0px !important;
    }
/*アマゾン画像の横に文字ここまで*/   

 

HTML
①はてなブログの編集サイドバー「Amazon商品紹介」で「画像」と「商品名」を別々に編集ページに挿入する。

②↓↓ここからHTMLをコピペして、HTML編集に挿入。
①で挿入した「画像」と「商品名」を【画像コード】【商品名コード】に移動させる。【好きなこと】を書く。  

<div class="clearfix">
<div class="gazou inner clearfix">【画像コード】</div>
<p><strong>【商品名コード】</strong></p>
<p>【好きなこと】 </p>
</div>

 

以上です。

自分用メモを他人が読んでわかるように書いたつもりですが、説明がわかりにくい部分も多々あると思います。すみません。

※ちなみに、この方法ですと「見たまま編集」での表示は、こんな感じ↓↓になっていますが、正常な状態です。プレビューで見ると画像が小さくなって、横に商品名が表示されます。

f:id:zuboraca:20180309115528j:plain

*1:

♡CSS超てきとー解説♡
floatで右左指定
clearfixで回り込み終了
gazouで画像サイズと周りの余白指定

 

他にもこんなの書いてます!
ここからコピペ♡どうぞ

枠とか。

これとか。

 

参考にしたページ:
ありがとうございます!
htmlとcssで 文字と画像を横に並べる方法
【html,css】画像の大きさを自由自在に変える方法
【CSS】floatとclearfixで要素を横並びにする方法
スタイルシート(CSS) - 画像の周りに余白を入れる