こんにちは、たねやつです。
いままでAmazonの商品へのリンクを貼る時に、AmazonのサイトからURLと画像を取得して〜と 結構面倒に感じていたのですが、はてなブログにウィジェットがあることを発見！
知らなかったのは私だけ...?(´ε｀ ) しかも見た目も結構しっかりしていていい感じなんです。↓
トマトコーポレーション 肴缶 スモークオイルサーディン(ラトビア産) 100g×6個
- 出版社/メーカー: トマトコーポレーション
- メディア: 食品&飲料
- この商品を含むブログを見る
商品に深い意味はないですw でも最近のドハマり(´ω｀) スーパーで買うほうが安いですね。
この記事は貼り付け方のメモと、背景色の変え方についてです。
貼り付け方
Markdown記法の場合
[asin:商品ID:detail]で貼り付けることができます。
商品IDは貼り付けたい商品のURLのdp/あるいはproducts/の後ろの文字列で、
であればB01CFHHYF4の部分です。
それを[asin:B01CFHHYF4:detail]と書くと、以下のように表示されます。
Raspberry Pi 3 MODEL B 【RS正規流通品】
- 出版社/メーカー: Raspberry Pi
- 発売日: 2016/01/28
- メディア: Tools & Hardware
- この商品を含むブログを見る
Markdown記法以外の場合
※Markdown記法でも使えます。
- はてなブログの記事編集画面のウィジェット
- Amazonアソシエイトツールバーのはてなブログのアイコンをクリック
で貼り付けることができます。こっちの方が直感的で簡単です！
Amazon商品リンクの背景色を変える
さて本題。
ブログ管理画面 > デザイン > カスタマイズ(六角レンチのマーク) > デザインCSS
よりCSSを編集します。
divのクラス名はhatena-asin-detailなので、以下の様に追記します。
.hatena-asin-detail { background: #fdfaec; }
いろいろと見やすくしようと試しましたが、、、上手く行きませんでしたorz
あまり暗くしすぎると文字色、リンク色も考えないと行けないのでこれぐらいの明るさにしておきましょう！
#fdfaecを変えると背景色を変えることができます。
SIGMA 単焦点標準レンズ 50mm F1.4 EX DG HSM キヤノン用 フルサイズ対応
- 出版社/メーカー: シグマ
- 発売日: 2008/06/14
- メディア: エレクトロニクス
- クリック: 67回
- この商品を含むブログ (7件) を見る
愛するSIMGA 50mm f1.4 ... ぐへへ(´ω｀)
標準だとAmazonリンクの中も背景色と同じになってしまうので、記事にメリハリがでますね！
おまけ
最近このブログにコードを書く機会が多いので、コードの背景も変えたいと思います。
gitの埋め込みなどを利用する手もありますが、手間がかかるのではてなブログに直書きです。
Markdown記法の場合は` `(バッククォート1つ)か``` ```(バッククォート3つ)で囲むとできます。お手軽(・∀・)
Amazonのリンクと同じように、以下をCSSに追加。
pre.code { color: white; background: #1c1c1c; }
見やすくなりました！
最後に
これでリンクの貼付けが楽になりました〜(´ε｀ )
同じようなはてなのカスタマイズとか写真関係でもしたいのですがあまり思いつかない...(笑) Flickrから一覧を取得するスクリプトとかどうでしょう。
