まほろば暮らし

 TVディレクター 🎬逗子在住 & 3男児 (8歳👦🏻/ 5歳👦🏻/ 2歳👶) の父 ✨ニュースの裏話や育児のアレコレ。

【カスタマイズ】ヨメレバ・カエレバをスタイリッシュに変更!

こんにちは、まほろばんです。


先日、はてなブログをPROに変更し、この機会にブログのタイトルも変更しました。
それに伴っていろいろと設定を変えなければならなかったのですが、
番組制作が追い込みだったので、なかなか時間がなく放置していました。

ようやく番組が完成したので、今日はブログのカスタマイズに挑戦してみました。
備忘録のために、まとめておこうと思います。

 

ヨメレバ・カエレバを再設定

はてなPROに変更したからか、タイトルを変更したからかはわかりませんが、
ヨメレバとカエレバが使えなくなっていました。


これは、アマゾンや楽天などの商品を紹介するときに使えるカスタマイズです。

ここを再入力して設定

まずは、ヨメレバカエレバのサイトに行きます。

その画面の下の方に、こういう入力画面があります。

f:id:mahoroban:20180623131034j:plain

僕はサイト名を変更したので、入力しました。
そして、AmazonアソシエイトのIDと楽天のIDを再入力しました。
調べ方は、ピンクの下線部をクリックすると簡単にわかります。

変更するのは、ここだけで大丈夫。
画面の下の方に保存というボタンがあるので、お忘れなく!

 

せっかくなのでカスタマイズにも挑戦!

せっかくなので、かっこよくするカスタマイズにも挑戦しました。
 

完成版のイメージは、こちらです。

 

f:id:mahoroban:20180623131613j:plain

 

どこにコピペするのか?

貼り付ける場所は、

デザイン→カスタマイズ→デザインCSSです。

 

f:id:mahoroban:20180623132139j:plain

このデザイン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」を選択。

これを間違えるとデザインが崩れるそうなのでご注意ください!

f:id:mahoroban:20180623132709j:plain

 

まとめ

このカスタマイズは、コピペだけで簡単にできました。
30分くらいで変更できますので、よかったら試してみてください!

ヨメレバもカエレバも同じ変更をすれば大丈夫です。


ようやく時間に余裕ができたので、
これからは頑張って、充実した記事をアップしていきたいと思います。

f:id:mahoroban:20180623133250j:plain
f:id:mahoroban:20180623133255j:plain

今日も最後までお読みいただき、ありがとうございます。

現在、読者を募集中です。

気に入っていただけた方は、下記のボタンを

ポチッとお願い致します。

↓↓↓↓↓

SNSアカウント

Twitterでは、

このブログの最新情報やニュース、

家族・子育てのことを発信していきます。

ぜひフォローしてやってください!

Twitterアカウント

twitter.com