こんにちは、つばさ(@tsubasa123)です。
タイトル通りなんですが、はてなブログって色んな機能があるんですね。そろそろはてなブログを始めて5か月くらいたつんですが、全然使いこなせてなかったな、って話です。ちょっとしたカスタマイズコードもありますのでよければお付き合いください。
きっかけはゆきひーさん
最近リニューアルされたみたいですね、すごーい!ちょっと内部も拝見してきましたが、かなり楽しそうなことになっておりました。ここまでやっちゃう行動力がすばらしい。
で、記事の中ほどに、「アマゾンリンクは強引にボタンつくりました。」って見出しで紹介されているところを見て、はてなブログにAmazonのリンクを作る機能があることを知った次第です。
詳細ははてなブログ公式で紹介されていますので、私のように知らなかったって人はご覧になってどうぞ。
みんな使ってるのかな?
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使うなら擬似要素にする必要もないのか。
というわけで、コトリさん、初回限定無料サービス期間中ですので、よければお試しくださいな。
ここ最近のもやもや
最近、ネタじゃないコードを掲載することに若干の躊躇いを感じます。ブログカスタイマイズでマネタイズされている人にとって私は目障りな存在なのかな、とか、カスタマイズって簡単なんでしょ?タダでやってよ、みたいな、コードを書くという行為の市場価値を落としてないかな、とか。ネガティブモードになることがあったりします。
元ネタはこれ。
私の場合は自己満のコードしか書いてないですし、誰に頼まれたわけでもなく好き勝手に公開しているだけなので自意識過剰なのはわかってます。が、なんというか、こう、なんだかなーと思う時があったりするわけでして。まぁ考えすぎですかね。
さいごに
なんか今日は一日中ネガティブな私でした、疲れてるのかな。そんなことはさておき、私も現在デザインリニューアルに向けて絶賛コーディング中です。テーマは大枠出来上がったんですが、細かい調整がめんどくさい。ゴールデンウイークまでには完成させたいところですがどうなることやら。
オレオレ仕様で作るのも大変なのに、万人に使われることを想定して様々なパターンを検証して作られているテーマは本当にすごいなーと、自作して改めて気が付きました。テーマを公開して下さっている方々は偉大ですね、感謝感謝です。
ではでは、最後までお付き合いいただきありがとうございました。
コメント