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

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

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

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

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

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

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

 

前提：

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

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

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

この手順でやると↓↓

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

♡カスタマイズ後♡

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

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

♡カスタマイズやり方♡

CSS
まず、CSSで↓のコードをコピペ（てきとー解説みたい方は→((

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

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

枠とか。

これとか。

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

))
デザイン→スパナマーク→{}デザイン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>

以上です。

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

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

【超初心者でも分かる！】はてなブログのカスタマイズ〜まとめ〜