コピペOK!はてなブログにヨメレバを導入して、一瞬でおしゃれにする方法。
こんばんわ。小畑です。
「コピペOK!はてなブログを一瞬でおしゃれにする方法。」はご覧になられましたでしょうか。まだの方は、是非ご一読を!
さて!
ブログやってる方にはお馴染みのヨメレバ。
導入しようと思いながらも、なかなか手を伸ばせなかったのですが、ようやく導入することができましたw 今回の改変では、「コピペ一発!はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ! - いつ俺〜いつから俺ができないと錯覚していた?〜」のサイトを参考にさせていただきました!大いに役立った!
ありがとうございます!
ということで、「はてなブログを一瞬でおしゃれにする」シリーズ第二弾!一瞬でヨメレバをおしゃれにする方法です。
ヨメレバとは
そのまえに。。。ヨメレバって何?って方のために。。。公式サイトから引用させていただきます。
「ヨメレバ」ブログパーツは、ブログ上で書籍を紹介するためのブログパーツです。アマゾン、楽天ブックスなどの複数のブックショップへのリンクを表示することで、アフィリエイト報酬のとりこぼしを減らせます
とてつもなく便利なツールです。僕はAmazonしかターゲットにしてないのですが、Kindleと紙の書籍とリンクを張ることができるので、これは超絶嬉しいですね〜!もっと早く導入しておけばよかった。。。
表示例
では、まず初めに完成図をどうぞ。実際には、下記のように表示されます。
ヨメレバ
ボタンが一際目立ってますね!
はてなのAmazon商品紹介
人気ブログの作り方: 5ヶ月で月45万PVを突破したブログ運営術
- 作者: かん吉
- 発売日: 2015/04/26
- メディア: Kindle版
- この商品を含むブログ (3件) を見る
ソースコード
ソースコードは、自分のサイト用に少しカスタマイズしてます。各自ご自身のサイトに合わせて調整してみてください。
PC版
/*カエレバ・ヨメレバ(PC版)*/ .kaerebalink-box, .booklink-box { border: 2px solid #CCCCCC; padding: 20px; width: 100%; max-width:680px; margin:0 auto; box-sizing: border-box; } .kaerebalink-image, .booklink-image { width:20%; float: left; } .kaerebalink-image a img,.booklink-image a img { width:100%; } .kaerebalink-info, .booklink-info { width:70%; margin-left: 2em !important; float: left; } .kaerebalink-name > a, .booklink-name > a { font-size: 16px; color: #256CC5; text-decoration: underline; } .kaerebalink-powered-date, .booklink-powered-date { font-size: 12px; } .kaerebalink-powered-date a, .booklink-powered-date a { color: #256CC5; text-decoration: underline; } .kaerebalink-link1, .booklink-link2 { margin-top: 1em; } .kaerebalink-link1 div, .booklink-link2 div { margin-right: 5px; margin-bottom:3px; text-align: center; float:left; width: 45%; } .kaerebalink-link1 div:active, .booklink-link2 div:active { border-top:3px solid #FFFFFF; margin-bottom: none; box-shadow:none; } .kaerebalink-link1 div a, .booklink-link2 div a { color: white; text-decoration: none; font-weight: bold; display:block; width: 100%; height: 40px; line-height: 40px; } .shoplinkamazon { background: #FF9900; box-shadow: 0 3px #B16A00; } .shoplinkamazon:hover { background: #FFB23F; } .shoplinkkindle { background: #0079BA; box-shadow: 0 3px #015684; } .shoplinkkindle:hover { background: #2797D4; } .shoplinkrakuten { background: #BF0000; box-shadow: 0 3px #7B0101; } .shoplinkrakuten:hover { background: #DC3939; } .shoplinkkakakucom { background: #25388E; box-shadow: 0 3px #081658; } .shoplinkkakakucom:hover { background: #485CB7; } .shoplinkyahoo { background: #750992; box-shadow: 0 3px #3F0250; } .shoplinkyahoo:hover { background: #8F0FB3; } .booklink-footer { height:0; clear: left; } .booklink-link2 { margin-top: 0.3em !important; }
SP版
<style type=text/css> /*カエレバ・ヨメレバ(スマホ版)*/ .kaerebalink-box, .booklink-box { border: 2px solid #CCCCCC; padding: 20px; width: 80%; margin:0 auto; } .kaerebalink-image, .booklink-image { margin:0 auto; text-align:center; } .kaerebalink-info, .booklink-info { margin:10px auto; padding-top:10px; border-top:1px solid #CCCCCC; } .kaerebalink-name > a, .booklink-name > a { font-size: 16px; color: #256CC5; text-decoration: underline; } .kaerebalink-powered-date, .booklink-powered-date { font-size: 12px; } .kaerebalink-powered-date a, .booklink-powered-date a { color: #256CC5; text-decoration: underline; } .kaerebalink-link1, .booklink-link2 { margin-top: 1em; } .kaerebalink-link1 div, .booklink-link2 div { margin:5px auto; text-align: center; width: 100%; } .kaerebalink-link1 div a, .booklink-link2 div a { color: #FFFFFF; text-decoration: none; font-weight: bold; display:block; width: 100%; height: 40px; line-height: 40px; } .shoplinkamazon { background: #FF9900; } .shoplinkkindle { background: #0079BA; } .shoplinkrakuten { background: #BF0000; } .shoplinkkakakucom { background: #25388E; } .shoplinkyahoo { background: #750992; } .booklink-footer { height:0; clear: left; } </style>
さいごに
ヨメレバもこれでおしゃれになりました!で。勢い余って鈴木こあらさんの書籍「プラス月5万円で暮らしを楽にする超かんたんアフィリエイト」を読んでみました。
これは、わかりやすい!さくっと読める内容ですし、インタビュー記事もあるのでこれは面白かったです。今なら、Kindle Unlimited 対象商品になってるので読んでおくべきでしょう。
そろそろ記事のリライトをしていこうかなぁ。。。
おわり。