今日の人気ページ

FC2ブログに「カエレバ・ヨメレバ」導入!CSSでカスタマイズも

ブログにアフィリエイトの画像付き+リンクリストが表示できるブログパーツの「カエレバ」を導入しました。

このブログパーツの良いところは、多数のリンクも同時に表示できる所。しかもそれが綺麗に表示可能なことから、ブログもスッキリしてスマホ表示でもパソコン表示でも見た目もいい感じになります。

dgjgfjfg.png

今更取り上げる事もないぐらい有名なブログパーツですが、メモ代わりに書いておきます。

【更新履歴】
[2018年]
10月20日:カエレバをCSSでカスタマイズ その2
[2017年]
02月09日:初回投稿



カエレバ・ヨメレバ


私が取りあえず導入したのはカエレバのみ。他にも同作者の「ヨメレバ」「ポチレバ」があります。この辺はまた追々試していきます。

今回導入したカエレバは上の画像を見てもらえば分かる通り、色々な通販サイトのリンクが同時に標示できます。表示できる通販サイトは以下の7つ。

・Amazon
・楽天市場
・Yahoo!ショッピング
・7net
・ベルメゾン
・セシール
・価格コム

全部を表示させても逆に見た目も悪くなるかなと思い、取りあえず主要な4つを利用します。肝心なのが、それぞれ対応するアフィリエイトを申し込んでおく必要があります。

Amazon
Amazonアソシエイト
もしも

楽天市場
楽天アフィリエイト
もしも

Yahoo!ショッピング
バリューコマース

7net
バリューコマース
もしも
A8.net

後々になって申し込むのも二度手間(*リンク張替え)になるので、初めにリンクが必要なところは一気に申し込んでおいた方がいいでしょう。

提携ができたら各アフィリエイトのコードをカエレバに登録します。後は商品を探してリンクを作るだけと超簡単。コードの探し方等はカエレバのサイトで分かりやすく解説があります。


カエレバをCSSでカスタマイズ その1


カエレバはデフォルトでも表示のパターンは数種類あり、それはそれで十分なのですが、これにCCS(*以下スタイルシート)に手を加えて自分好みにします。冒頭の画像は手を加えた状態。

とは言いつつも、そんな知識はないので公開されている方のコードを利用させてもらいます。

私がカエレバをカスタマイズするのに、利用させてもらったのは「 [M] mbdb (モバデビ)」さんのコード。


FC2ブログではスタイルシートの編集で、そのまま上記で公開されているコードをコピペするだけ。注意点は上記記事中でも書かれていますが、カエレバのデザインは「Amazlet風-2(cssカスタマイズ用)」で。

上記のコードを更に自分好みにします。*変更部分だけ記載

枠を外す
変更前
border: 1px solid;

変更後
border:none;

下スペースを減らす
変更前
argin: 0 0 2rem;

変更後
margin: 0 0 0rem;

カエレバをCSSでカスタマイズ その2


*更新:2018.10.20

カエレバのCSSを変更しました。目的としては、前項のCSSだとッスマホ表示の場合、縦に商品画像→商品名→リンクとなってます。これを少しコンパクトとするために、商品画像の“横”に商品名とリンクを付けるバージョンに変更。

前項のCSSを弄くろうとしたが、難易度が高く上手く変更できなかったので、公開されている方のCSSをコピペさせてもらう。

新たに使用させてもらったのは「えむしてっく」さんから。


上記サイト様のを使用するとこうなります。マウスオーバーで色も変わる。

screenshot_10_20181020235812da1.png

ここから好みの部分で、少し変更しました。

・外の枠線を消す
・上下の幅を少なく
・posted with カエレバを左に
・上記のラインを消す
・リンクの枠の丸みを角に
・スマホ表示の場合のリンクを縦に

screenshot_08_20181021000808f76.png

該当部分のみメモ

・外の枠線を消す
・上下の幅を少なく

[Before]

.booklink-box, .kaerebalink-box, .tomarebalink-box{
box-sizing: border-box;
border: solid 1px #ccc;
border-radius: 2px;
padding: 10px;
margin-bottom: 10px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}


[After]

.booklink-box, .kaerebalink-box, .tomarebalink-box{
box-sizing: border-box;
border-radius: 2px;
padding: 10px;
margin-bottom: 0px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}


・posted with カエレバを左に
・上記のラインを消す

[Before]

.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date{
background-color: #DDD;
padding: 2px;
font-size: .6em;
text-align: right;
line-height: 1.2em;
margin-bottom: 3px;
}


[After]
.kaerebalink-powered-date, .booklink-powered-date {
font-size: 0.75rem; font-weight: normal;
}


・リンクの枠の丸みを角に

[Before]

.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: inline-block;
margin: 3px 3px 0 0;
padding: 10px 0px;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}


[After]

.booklink-link2 a,
.kaerebalink-link1 a,
.tomarebalink-link1 a {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 0px;
display: inline-block;
margin: 3px 3px 0 0;
padding: 10px 0px;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 12px;
}


・スマホ表示の場合のリンクを縦に

[After]

@media only screen and (min-width:460px) and (max-width:640px) {
.kaerebalink-link1 div, .booklink-link2 div { float: none; width: 100%; }
.kaerebalink-link1 div, .booklink-link2 div { margin-left: 0; }
}
@media only screen and (max-width:459px) {
.kaerebalink-image, .booklink-image {
float:none;
width:100%;
margin:0;
text-align:center;
}
.kaerebalink-image img, .booklink-image img { width:180px; height:auto; }
.kaerebalink-info, .booklink-info { margin: 0; }
.kaerebalink-link1 div, .booklink-link2 div { float: none; width: 100%; }
.kaerebalink-link1 div, .booklink-link2 div { margin-left: 0; }
}


その他、トマレバも対応している物ですが、自分は必要ないのでその辺は削除。

こちらが現在ブログで使用しているバージョン。

まとめ


カエレバに関して一つ注意点が過去にあって、昨年にカエレバで作成したリンクが運営者のIDが入ったリンクが作成されていた事があったようです。


上記に関して一部で話題になっていたようですが、無料で公開されている事には感謝しかない。これはスタイルシートのコードを公開されている方にも。

カエレバ導入でどうなるかは推移を見たいと思います。アフィリエイトって拒否反応示す方もいると思うが、やったら結構面白い。先月は過去最高のアクセス数になったが、アフィリエイトは過去最高ではない。この辺をどうすればアップするかを考えるのは面白いんですけどね。

スポンサードリンク


 ブログ の関連記事

ブログ
FC2ブログブログアフィリエイトカエレバ

fireseries.png

amam.png
0 Comments
コメントする