たねやつの木

Photos and Programming

はてな標準のAmazon商品リンクの背景色を変える + etc.

こんにちは、たねやつです。

いままでAmazonの商品へのリンクを貼る時に、AmazonのサイトからURLと画像を取得して〜と 結構面倒に感じていたのですが、はてなブログにウィジェットがあることを発見!

知らなかったのは私だけ...?(´ε` ) しかも見た目も結構しっかりしていていい感じなんです。↓

商品に深い意味はないですw でも最近のドハマり(´ω`) スーパーで買うほうが安いですね。

この記事は貼り付け方のメモと、背景色の変え方についてです。

貼り付け方

Markdown記法の場合

[asin:商品ID:detail]で貼り付けることができます。

商品IDは貼り付けたい商品のURLのdp/あるいはproducts/の後ろの文字列で、

https://www.amazon.co.jp/Raspberry-Pi-896-8664-MODEL-%E3%80%90RS%E6%AD%A3%E8%A6%8F%E6%B5%81%E9%80%9A%E5%93%81%E3%80%91/dp/B01CFHHYF4/ref=sr_1_2?ie=UTF8&qid=1513657838&sr=8-2&keywords=raspberry+pi

であればB01CFHHYF4の部分です。

それを[asin:B01CFHHYF4:detail]と書くと、以下のように表示されます。

Raspberry Pi 3 MODEL B 【RS正規流通品】

Raspberry Pi 3 MODEL B 【RS正規流通品】

Markdown記法以外の場合

※Markdown記法でも使えます。

  • はてなブログの記事編集画面のウィジェット
  • Amazonアソシエイトツールバーのはてなブログのアイコンをクリック

で貼り付けることができます。こっちの方が直感的で簡単です!

Amazon商品リンクの背景色を変える

さて本題。

ブログ管理画面 > デザイン > カスタマイズ(六角レンチのマーク) > デザインCSS

よりCSSを編集します。

divのクラス名はhatena-asin-detailなので、以下の様に追記します。

.hatena-asin-detail {
    background: #fdfaec;
}

いろいろと見やすくしようと試しましたが、、、上手く行きませんでしたorz

あまり暗くしすぎると文字色、リンク色も考えないと行けないのでこれぐらいの明るさにしておきましょう! #fdfaecを変えると背景色を変えることができます。

SIGMA 単焦点標準レンズ 50mm F1.4 EX DG HSM キヤノン用 フルサイズ対応

SIGMA 単焦点標準レンズ 50mm F1.4 EX DG HSM キヤノン用 フルサイズ対応

愛するSIMGA 50mm f1.4 ... ぐへへ(´ω`)

標準だとAmazonリンクの中も背景色と同じになってしまうので、記事にメリハリがでますね!

おまけ

最近このブログにコードを書く機会が多いので、コードの背景も変えたいと思います。

gitの埋め込みなどを利用する手もありますが、手間がかかるのではてなブログに直書きです。

Markdown記法の場合は` `(バッククォート1つ)か``` ```(バッククォート3つ)で囲むとできます。お手軽(・∀・)

Amazonのリンクと同じように、以下をCSSに追加。

pre.code {
    color: white;
    background: #1c1c1c;
}

見やすくなりました!

最後に

これでリンクの貼付けが楽になりました〜(´ε` )

同じようなはてなのカスタマイズとか写真関係でもしたいのですがあまり思いつかない...(笑) Flickrから一覧を取得するスクリプトとかどうでしょう。