元CAバンビのずぼら日記

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

長時間フライトの狭い機内でも快適に過ごす6つの方法
パッキングのコツと全て機内持込で済ませる裏ワザ
CAは出会いが少ない!?機内でCAに良く思われたい男性は必見!
この旅行最大のピンチ。元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で↓のコードをコピペ(てきとー解説みたい方は→((

♡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>

以上です。

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

 

 

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

f:id:zuboraca:20180309115528j:plain

 

 

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