【カスタマイズ】ヨメレバ・カエレバをスタイリッシュに変更!
こんにちは、まほろばんです。
先日、はてなブログをPROに変更し、この機会にブログのタイトルも変更しました。
それに伴っていろいろと設定を変えなければならなかったのですが、
番組制作が追い込みだったので、なかなか時間がなく放置していました。
ようやく番組が完成したので、今日はブログのカスタマイズに挑戦してみました。
備忘録のために、まとめておこうと思います。
ヨメレバ・カエレバを再設定
はてなPROに変更したからか、タイトルを変更したからかはわかりませんが、
ヨメレバとカエレバが使えなくなっていました。
これは、アマゾンや楽天などの商品を紹介するときに使えるカスタマイズです。
ここを再入力して設定
その画面の下の方に、こういう入力画面があります。
僕はサイト名を変更したので、入力しました。
そして、AmazonアソシエイトのIDと楽天のIDを再入力しました。
調べ方は、ピンクの下線部をクリックすると簡単にわかります。
変更するのは、ここだけで大丈夫。
画面の下の方に保存というボタンがあるので、お忘れなく!
せっかくなのでカスタマイズにも挑戦!
せっかくなので、かっこよくするカスタマイズにも挑戦しました。
どこにコピペするのか?
貼り付ける場所は、
デザイン→カスタマイズ→デザインCSSです。
このデザインCSSに下記のコードをコピペします。
/*カエレバ・ヨメレバ(PC版)*/ .kaerebalink-box, .booklink-box { border: 2px solid #CCCCCC; padding: 20px; width: 90%; max-width:680px; margin:0 auto; } .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; 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: 30%; } .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; }
スマホ版は、スマホの設定が必要です。
Shunさんのブログを参考にさせていただきました。
ありがとうございました。
カスタマイズで注意すること
カエレバ・ヨメレバでは、「amazlet風-2」を選択。
これを間違えるとデザインが崩れるそうなのでご注意ください!
まとめ
このカスタマイズは、コピペだけで簡単にできました。
30分くらいで変更できますので、よかったら試してみてください!
ヨメレバもカエレバも同じ変更をすれば大丈夫です。
ようやく時間に余裕ができたので、
これからは頑張って、充実した記事をアップしていきたいと思います。