Amazonリンクをはてなブログ(hatena-asin-detail)から拝借
![]() |
はてなブログでAmazonのリンクを貼ったらこんな感じになります。 |
Bloggerブログをスマホから書いている身としては、紹介したい商品がアマゾンや楽天にあった場合、リンクを貼るのが面倒だし、見た目もあまり良くない。
アマゾンアソシエイトのバーで、はてなブログだったら勝手にリンク先をHTMLで作成してくれることに気づいて使ってみたんだけど、当たり前ですがBloggerでの表示は変。
簡単にそれっぽく表示できないかと探してみたところ、カスタマイズ方法を載せてくださっている方を発見。
参考にしました» はてなブログ→WordPress引っ越しで「はてなのAmazonリンク」をそれっぽく魅せるCSS
/************************************ ** はてなAmazonリンク ***********************************/ .hatena-asin-detail { border: none; border-radius: 4px; box-shadow: inset 0 0 0 1px #d2d8dd; box-sizing: border-box; display: flex; letter-spacing: normal; line-height: 1.25; margin: 1em 0; overflow: hidden; padding: 16px; } @media (min-width: 768px) .hatena-asin-detail>a .hatena-asin-detail-image { max-width: 200px; } .hatena-asin-detail>a .hatena-asin-detail-image { border: none; display: block; float: none; height: 100%; margin: auto; max-width: 36vw vw ; object-fit: contain; width: 100%; } .hatena-asin-detail .hatena-asin-detail-info .hatena-asin-detail-title a { -webkit-line-clamp: 3; -webkit-box-orient: vertical; border: none; display: -webkit-box; font-weight: 700; overflow: hidden; text-decoration: none; } @media (min-width: 768px) .hatena-asin-detail .hatena-asin-detail-info .hatena-asin-detail-title { font-size: 17px; } .hatena-asin-detail .hatena-asin-detail-info .hatena-asin-detail-title { font-size: 15px; line-height: 1.25; margin: auto 0 0.3em; } .hatena-asin-detail .hatena-asin-detail-info .hatena-asin-detail-meta li, .hatena-asin-detail .hatena-asin-detail-info ul li { list-style: none; } .hatena-asin-detail li { line-height: 1.4; } .hatena-asin-detail .hatena-asin-detail-info .hatena-asin-detail-meta, .hatena-asin-detail .hatena-asin-detail-info ul { font-size: 13px; line-height: 1.25; margin: 0; opacity: .75; padding: 0; } .hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy { color: #FF9901; background: -moz-linear-gradient(top,#fafafa,#EEE); background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee)); border-radius: 4px; box-shadow: 0 2px 0 #ccc; } .hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy { background-color: rgba(25,48,70,.2); border: 1px solid transparent; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .025em; line-height: 1.25; margin-top: 16px; overflow: hidden; padding: 10px 12px; text-align: center; text-decoration: none; width: 100%; } .hatena-asin-detail .hatena-asin-detail-info { margin: auto 0 auto 24px; }
上記のコードをテーマの編集画面に貼り付けたら簡単にそれっぽくなりました。
こんな感じになります。このカスタマイズをもとに、ボタン表示の変更方法などが載っているブログもあったので、おいおい変更してみようかな〜と思ってます♪
だけど、タブレットから見たら画像がすんごい大きいですよね... 今日は時間がないのでとりあえずここまで!どうしたらいいのか、またの機会に探してみます。