Simplicityでヨメレバの美しいカスタマイズが反映されるまでに試したこと

どうも、レボログです。

ブログなどで本の紹介をする際に、便利なツール「ヨメレバ」。使っている方もいらっしゃるかと思いますが、

今回は、そのヨメレバのデザインを美しくカスタマイズしようとして最初はうまくいかず、その後なんとかうまくいったところまでの一連の過程をメモとして記録しておこうと思います。

これで、私と同じようなところでつまずく人を一人でも減らせれば…。

具体的にどう変わったのか

ヨメレバの初期デザインは次のような感じなのですが、

これが、CSSコード追加後は、次のように美しく生まれ変わります。

え？最初のでいいって？

そういう気にならない方は、この記事は読まないでくださって結構（笑

ここからは、このデザインに興味のある方だけ読み進んでいただくことにして。

ちなみに、ヨメレバの方で変更後のデザインを反映させるためには、ブログパーツを作成する際に、「amazlet風-2(cssカスタマイズ用）」を選択する必要があります。どうぞ、お忘れなく。

では、前置きはこれくらいにして、実際試した工程の説明に入らせていただきます。

PCとモバル用それぞれにＣＳＳコードを貼り付け

まず、最初に参考にさせていただいたのがコチラのサイト

4mirai

Simplicityでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズ

https://4mirai.com/how-to-display-yomeleba-kaeleba-beautifully-with-simplicity

STINGER5や他のテーマでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズはありましたが、Simplici…

私がCSSコードの書き方に疎いということもあり、現在使っているワードプレスのテーマ「simplicity」に即した形で説明してくれているサイトをと思い検索をかけ、その中で具体的なコードと挿入位置まで分かりやすく記載されていたので。

1．PC用コードの貼りつけ

こちらの解説に従って、「simplicity　子テーマ」内のstyle.cssに次のコードをコピペします。

/*————————————–
ヨメレバ・カエレバここから
————————————–*/
.booklink-box, .kaerebalink-box{
width:90%;
margin:20px auto;
padding:20px;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}.booklink-image, .kaerebalink-image{
width: 150px;
/*height: 150px;*/
margin:0 15px 20px 0;
float:left;
}
.booklink-image img, .kaerebalink-image img{
/*height: 150px;*/
display:block;
margin:0 auto;
text-align:center;
}.booklink-info, .kaerebalink-info{
display:block;
margin:0 auto;
text-align:left;
line-height:120%;
overflow: hidden;
}.booklink-name, .kaerebalink-name{
font-size:16px;
margin-bottom:24px;
line-height:1.5;
}.booklink-powered-date, .kaerebalink-powered-date{
font-family: verdana;
font-size:8pt;
margin-top:5px;
line-height:120%;
}
.booklink-detail, .kaerebalink-detail{
margin-bottom:5px;
}.booklink-link2, .kaerebalink-link1{
margin-top:10px;
}.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkseven, .shoplinkrakukobo{
float:left;
width:30%;
margin:15px 1% 0 auto;
padding:10px 0px;
/* width:90%; */
height:15px;
overflow:hidden;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
/* margin:0 auto 5px auto; */
/* padding:10px 0px; */
text-align:center;
}.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkrakukobo:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkrakukobo:active{
position:relative;
top:1px;
}.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkseven a, .shoplinkrakukobo a{
display:block;
cursor:pointer;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
}.shoplinkamazon a{
color:#FF9901;
}.shoplinkrakuten a{
color:#c20004;
}.shoplinkkindle a{
color:#007dcd;
}.shoplinkyahoo a{
font-size:10px;
color:#7b0099;
}.shoplinkseven a{
color:#000;
}

.shoplinkrakukobo a{
color:#2098A8;
}

.booklink-footer{
clear:left;
}
/*————————————–
ヨメレバ・カエレバここまで
————————————–*/

2．モバイル版用コードの貼り付け

続いて、「Simplicity 子テーマ」内のmobile.cssに次のコードを貼り付け。

/*————————————–
ヨメレバ・カエレバここから
————————————–*/
.booklink-box, .kaerebalink-box{
width:85%;
margin: 1em 0 1em;
padding: 5%;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}.booklink-image, .kaerebalink-image{
float: none !important;
text-align:center !important;
margin:0 auto !important;
}
.booklink-image img, .kaerebalink-image img{
display:block;
margin:0 auto;
}.booklink-info, .kaerebalink-info{
text-align:center;
line-height:120%;
overflow: hidden;
clear:left;
}.booklink-name, .kaerebalink-name{
font-size:16px;
margin-bottom:14px;
line-height:1.2em;
}.booklink-powered-date, .kaerebalink-powered-date{
font-size:8pt;
margin-top:10px;
line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
margin-bottom:15px;
}.booklink-link2, .kaerebalink-link1{
margin-top:20px;
}.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom, .shoplinkseven, .shoplinkrakukobo{
width:99%;
text-align:center;
height:15px;
overflow:hidden;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
margin:0 auto 5px auto;
padding:10px 0px;
}.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, shoplinkrakukobo:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkrakukobo:active{
position:relative;
top:1px;
}.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a, .shoplinkseven a, .shoplinkrakukobo a{
display:block;
cursor:pointer;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
}.shoplinkamazon a{
color:#FF9901;
}.shoplinkrakuten a{
color:#c20004;
}.shoplinkkindle a{
color:#007dcd;
}.shoplinkyahoo a{
color:#7b0099;
}

.shoplinkseven a{
color:#000;
}

.shoplinkrakukobo a{
color:#2098A8;
}

.booklink-footer{
clear:left;
}

/*————————————–
ヨメレバ・カエレバここまで
————————————–*/

ここまでの工程でサイトの表示を確認したところ、モバイル版ではうまくデザインが反映されたものの、PC版の方は依然として、変更前のデザインのままでした。

そこで、問題解決のために、さらに検索をかけ、ヒットしたページがこちら。

HEROCY.COM

【Simplicity】カエレバ・ヨメレバのmobile.cssのカスタマイズが反映されない場合...

~~http://herocy.com/archives/4554~~

Simplicity2にてカエレバ・ヨメレバの表示を変更しようとCSSを編集したところ、スマートフォンで正しく表示できなかったので、その対策をメモしておきました。

このページの説明によると、変更後のデザインが反映されない原因として「完全レスポンシブ表示を有効/無効」の設定が関係しているのではないかということでした。

ページ内の事例では、モバイル版の表示がうまくいかなかった際に、完全レスポンシブ表示を無効にしたところ変更後のデザインが反映されたとのこと。

ということで、実際に私も、完全レスポンシブをオフってみようと…ん？すでにオフ設定じゃない。
どうやら、simplicityの初期設定では、最初からこの項目はオフになっているみたいです。

ってことは、これが原因ではないわけだ。
さてさて、どうしたものか。

レスポンシブ用コードの貼り付け

次に参考にさせていただいたのが、コチラのサイト。

Yukihy Life

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life

http://www.yukihy.com/entry/kaereba-yomereba-custom

はてなブログだけでなく、アマゾンや楽天・ヤフーショッピングの商品を紹介する際にはブロガーのかん吉さんが作ってくださったサービス「ヨメレバ・カエレバ」を使うことで簡単にリンクを作成することができます。それらを綺麗に表示させるカスタマイズはもう出ているのですが、先日あるブロガーさんに会ったときにカスタマイズをしたら喜んでいただけたので、紹介したいと思います！

こちらのページには、先ほど紹介したPC版、モバイル版2つのCSSコードに加えて、さらに次のようなレスポンシブ用のコードが紹介されていました。

/*————————————–
ヨメレバ・カエレバ（レスポンシブ）
————————————–*/
.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;
}
.booklink-info, .kaerebalink-info{
margin:0;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5em;
}
.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: #fff !important;
}
.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: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}@media screen and (max-width: 680px) {
.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;
}
}

これを「simplicity　子テーマ」内のresponsive.cssに張り付け。

この状態で、試しに、simplicityのダッシュボードから「外観」→「カスタマイズ」→「レイアウト（全体・リスト）」とすすみ、完全レスポンシブ表示を有効にチェックを入れてサイトを表示させてみます。