はてなブログってAmazonのリンクも作れるんだって。知らんかった

こんにちは、つばさ（@tsubasa123）です。

タイトル通りなんですが、はてなブログって色んな機能があるんですね。そろそろはてなブログを始めて5か月くらいたつんですが、全然使いこなせてなかったな、って話です。ちょっとしたカスタマイズコードもありますのでよければお付き合いください。

きっかけはゆきひーさん
みんな使ってるのかな？
カスタマイズ販売してみようかな、なんて
ここ最近のもやもや
さいごに

きっかけはゆきひーさん

www.yukihy.com

最近リニューアルされたみたいですね、すごーい！ちょっと内部も拝見してきましたが、かなり楽しそうなことになっておりました。ここまでやっちゃう行動力がすばらしい。

で、記事の中ほどに、「アマゾンリンクは強引にボタンつくりました。」って見出しで紹介されているところを見て、はてなブログにAmazonのリンクを作る機能があることを知った次第です。

詳細ははてなブログ公式で紹介されていますので、私のように知らなかったって人はご覧になってどうぞ。

staff.hatenablog.com

みんな使ってるのかな？

Amazonアフィリエイト（アソシエイト）をやる人はみんなカエレバを使ってる、ってのが個人的な感覚だったんですが、どうなんでしょうか。これに関しては詳しい人がいれば教えてもらいたいところです。

で、ゆきひーさんの記事に対して、

アマゾン強引ボタン、、、売って欲しい

ってブコメを発見したので、ちょっと便乗してみようかな、と。

カスタマイズ販売してみようかな、なんて

擬似要素を利用してボタンを表示させるだけならそこまで難しいものじゃないですね、あとはデザインのセンス次第。ベースとなるCSSは置いておきますので、存分にアレンジしてお使いください。

.hatena-asin-detail .hatena-asin-detail-title {
position: relative;
padding-bottom: 50px;
}
.hatena-asin-detail-title > a {
position: relative;
}
.hatena-asin-detail-title > a,
.hatena-asin-detail-title > a:visited {
color: #333;
text-decoration: none;
}
.hatena-asin-detail-title > a:hover,
.hatena-asin-detail-title > a:active {
opacity: .7;
text-decoration: underline;
}
.hatena-asin-detail-title > a:after {
position: absolute;
top: 1.75em;
left: 0;
content: "Amazon";
width: 120px;
padding: 10px 0;
display: inline-block;
text-align: center;
color: #ff9900;
border: 1px solid #ff9900;
}

これで、

こんな感じになります。ゆきひーさんみたいにアイコンや背景を置きたい場合はこれにもう少し工夫が必要ですね。JavaScriptを使ってもいいならもうやりたい放題です。というかJS使うなら擬似要素にする必要もないのか。

というわけで、コトリさん、初回限定無料サービス期間中ですので、よければお試しくださいな。

ここ最近のもやもや

最近、ネタじゃないコードを掲載することに若干の躊躇いを感じます。ブログカスタイマイズでマネタイズされている人にとって私は目障りな存在なのかな、とか、カスタマイズって簡単なんでしょ？タダでやってよ、みたいな、コードを書くという行為の市場価値を落としてないかな、とか。ネガティブモードになることがあったりします。

元ネタはこれ。

togetter.com

私の場合は自己満のコードしか書いてないですし、誰に頼まれたわけでもなく好き勝手に公開しているだけなので自意識過剰なのはわかってます。が、なんというか、こう、なんだかなーと思う時があったりするわけでして。まぁ考えすぎですかね。