どうもこんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。
多くのブロガーがお世話になっているであろうかん吉さんのカエレバやヨメレバ。
Amazonやヤフーショッピングなどのリンクをおしゃれに飾ることができる便利ツールです。
そのままでも十分使えるんですけど、少し手を加えたいなと思うことありませんか?
便利なんだけどちょっと寂しい気も・・・
今回はもっとおしゃれにカスタマイズするCSSをご紹介しますね。
追記:
2020年4月現在、カエレバは利用していません。当時の雰囲気としてお楽しみください。
STORK(ストーク)カスタマイズ編
子テーマを用意する方法
メニューを2段表示する方法
ロゴを大きく表示する方法
カテゴリーラベルを消す方法
見出しを自由に変更する方法
ひと味違ったトップページにする方法
記事を3列表示させる方法
関連記事を新しいタブで表示する方法
テクニック編
CSSの変更が反映されない時の対処法
蛍光ペン風のマーカーを引くカスタマイズ方法
プロフィールを2つ設置する方法
カエレバ・ヨメレバをオシャレに表示する方法
画像に枠線を付けて目立たせる方法
特殊文字を使ってコードを紹介する方法
h2見出しの前にアドセンスを自動表示させる方法
疑似要素でアイコンを表示させる方法
記事の離脱率と読了率を無料で計測する方法
この記事の目次一覧
CSS
CSSはPC用とスマホ用の2つに分けて紹介します。
あ、そうそう、CSSに変更を加えることになるので事前に子テーマの準備とCSSカスタマイズを確実に反映させる方法に目を通しておいてください。
また、今回のCSSコードはカエレバでamazolet風-2を選択している必要があります。
それ以外だとレイアウトが崩れる可能性があるので注意!
次のコードをスタイルシートにコピペしましょう。
PC用
/*————————————–
ヨメレバ・カエレバ(PC)
————————————–*/
.booklink-box, .kaerebalink-box{
padding:25px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
min-width: 160px;
text-align: center;
}
.booklink-image img, .kaerebalink-image img{
margin:0 auto;
text-align:center;
border: solid 1px #808080;
box-shadow: 0px 0px 5px #808080;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
font-weight: bold;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8px;
margin-top:10px;
font-family:verdana;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:30%;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin:5px 2px 0 0;
padding:10px 1px;
text-align:center;
float:left;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
color: #ff9901;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
position:relative;
top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 2px solid #FF9901 !important;background: #f5dfc1;}
.shoplinkrakuten a{color:#c20004 !important;border: 2px solid #c20004 !important;background: #e6bdbe;}
.shoplinkkindle a{color:#007dcd !important;border: 2px solid #007dcd !important;background: #b2d8f0;}
.shoplinkkakakucom a{color:#314995 !important;border: 2px solid #314995;background: #9ba6c7;}
.shoplinkyahoo a{color:#7b0099 !important;border: 2px solid #7b0099 !important;background: #b687c2;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
スマホ用
続いてスマホ用はこちら。
/*————————————–
ヨメレバ・カエレバ(スマホ)
————————————–*/
@media screen and (max-width: 480px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
width: 100px !important;
min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
width:calc(100% – 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin: 2px 0px;
padding:10px 0px;
}
}
これでオッケー!
あとはキャッシュを削除してページを更新してみてください。こんな風に見た目が変わりましたよね。
PC表示
スマホ表示
PC表示だとボタンは横並び、スマホだとレスポンシブ対応になって縦に並んでます。
STORK(ストーク)サイトでも紹介されてるけど
実はこのブログのテーマを販売するOPEN CAGEのサイトでもカエレバ、ヨメレバのCSSカスタマイズコードって紹介されてます。
でもあれはamazlet風(改)-1が対応になってるんですよね。
今までずっとamazlet風-2でリンクを貼っている僕のような人が使うとデザインが崩れちゃいます。
今までのリンクを張り替えるのも面倒なので、amazlet風-2を使ってる人にはぜひ利用してほしいCSSです。
さらにカスタマイズする
上で紹介したコードにさらに手を加えるともっと自分好みのスタイルに仕上げることができます。
次を参考にしてみてください。
枠線を変える
今のカスタマイズでは細い2本の線で枠を作っていますが、これを変更した場合は「.booklink-box, .kaerebalink-box」の部分に書いてある border をいじりましょう。
ここでは枠線の種類、太さ、色を指定することができます。
僕は枠線の種類(double:二重線)と色(#CCC:灰色)しか指定していません。
ちなみにborderの構成はこんな風になってます。
あとは自分の好きなように指定することで思い通りの枠線を作ることができます。
枠線の種類
枠線の種類はこちら。
-
solid(実線)
-
dotted(点線)
-
dashed(破線)
-
double(二重線)
-
groove(谷型)
-
ridge(山型)
-
inset(左と上が濃い)
-
outset(右と下が濃い)
色を決める
色は16進数で指定すると細かい調整が可能です。
こちらの原色大辞典を参考にして好きな色を選んで#から始まる番号を書き換えましょう。
背景に画像を設定する
枠線の中に画像を入れることもできます。
これもさっきと同じように.booklink-box, .kaerebalink-boxから始まる部分に次のコードを書き加えます。
background: url(http://sakura.png);
background-size: cover;
こんな風になります。
url(http://〜)から始まる部分はアップロード済みの画像URLを指定します。
さらにbackground-sizeをcoverに設定することで枠いっぱいに画像が広がるようになります。
僕はこの部分に季節を感じる画像を入れていて、今の時期なら春の桜ですね。
ピンクの背景にうっすら桜が見えて季節感を演出しています。
ボタンの見た目を変更する
アマゾンリンクやヤフーショッピングリンクのボタンを変更することも出来ます。
先ほど追加したCSSの中に「ボタンを変えるときはここから」という項目があります。
そこに shoplinkamazon や shoplingrakuten などという単語がありますので、さっき勉強した枠線の種類や16進数で色を指定することにより自由にアレンジできます。
色々変更してオシャレなカスタマイズに挑戦してみましょう。
比べてわかる!カスタマイズの大切さ
それではここでカスタマイズしてない時とした時を比べてみることにしましょう。
カスタマイズなし
カスタマイズを加えてないとシンプルで見やすいですが寂しいですね。
カスタマイズあり
CSSでカスタマイズした場合。
リンク先のボタンも見やすく、ついクリックしたくなるようなデザインです。
さらにカスタマイズ
そしてこれは背景に画像を設定した場合のカスタマイズ。
挿入する画像を選ぶ必要はありますが、見た目のインパクトが違いますね。
このあたりはお好みでどうぞ。
こうやって比べてみてもやっぱりカスタマイズしたほうがいいなと感じます。
CSSでカスタマイズしているブログはたくさんありますが、今回のように画像まで指定しているケースは珍しいかもしれませんね。
まとめ
導入するのはちょっとハードルが高く感じるかもしれませんが、一度設定してしまえばあとは楽ちん。
デザインはクリック率にも影響を与えるため少しずつ調整しながら親しみやすいカスタマイズを実現しましょう!
STORK(ストーク)カスタマイズ編
子テーマを用意する方法
メニューを2段表示する方法
ロゴを大きく表示する方法
カテゴリーラベルを消す方法
見出しを自由に変更する方法
ひと味違ったトップページにする方法
記事を3列表示させる方法
関連記事を新しいタブで表示する方法
テクニック編
CSSの変更が反映されない時の対処法
蛍光ペン風のマーカーを引くカスタマイズ方法
プロフィールを2つ設置する方法
カエレバ・ヨメレバをオシャレに表示する方法
画像に枠線を付けて目立たせる方法
特殊文字を使ってコードを紹介する方法
h2見出しの前にアドセンスを自動表示させる方法
疑似要素でアイコンを表示させる方法
記事の離脱率と読了率を無料で計測する方法