どうも、レボログです。
ブログなどで本の紹介をする際に、便利なツール「ヨメレバ」。使っている方もいらっしゃるかと思いますが、
今回は、そのヨメレバのデザインを美しくカスタマイズしようとして最初はうまくいかず、その後なんとかうまくいったところまでの一連の過程をメモとして記録しておこうと思います。
これで、私と同じようなところでつまずく人を一人でも減らせれば…。
具体的にどう変わったのか
ヨメレバの初期デザインは次のような感じなのですが、
これが、CSSコード追加後は、次のように美しく生まれ変わります。
え?最初のでいいって?
そういう気にならない方は、この記事は読まないでくださって結構(笑
ここからは、このデザインに興味のある方だけ読み進んでいただくことにして。
ちなみに、ヨメレバの方で変更後のデザインを反映させるためには、ブログパーツを作成する際に、「amazlet風-2(cssカスタマイズ用)」を選択する必要があります。どうぞ、お忘れなく。
では、前置きはこれくらいにして、実際試した工程の説明に入らせていただきます。
PCとモバル用それぞれにCSSコードを貼り付け
まず、最初に参考にさせていただいたのがコチラのサイト
私が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版の方は依然として、変更前のデザインのままでした。
そこで、問題解決のために、さらに検索をかけ、ヒットしたページがこちら。
このページの説明によると、変更後のデザインが反映されない原因として「完全レスポンシブ表示を有効/無効」の設定が関係しているのではないかということでした。
ページ内の事例では、モバイル版の表示がうまくいかなかった際に、完全レスポンシブ表示を無効にしたところ変更後のデザインが反映されたとのこと。
ということで、実際に私も、完全レスポンシブをオフってみようと…ん?すでにオフ設定じゃない。
どうやら、simplicityの初期設定では、最初からこの項目はオフになっているみたいです。
ってことは、これが原因ではないわけだ。
さてさて、どうしたものか。
レスポンシブ用コードの貼り付け
次に参考にさせていただいたのが、コチラのサイト。
こちらのページには、先ほど紹介した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のダッシュボードから「外観」→「カスタマイズ」→「レイアウト(全体・リスト)」とすすみ、完全レスポンシブ表示を有効にチェックを入れてサイトを表示させてみます。
すると、無事、変更後のデザインを反映させることができました。
ちなみに、モバイル版ではこのような感じに。
なお、試しに上のコードをresponsive.cssではなく、style.cssの方に貼り付けてみたのですが、うまく表示されませんでした。さらに、念のため、完全レスポンシブ表示設定を解除してみてもうまくいかず。
理由はちょっと特定しずらいのですが、今のところ、この方法でPC版、スマホ版ともに変更後のデザインが反映されたので、とりあえず良しとしてます。
Googleはレスポンシブデザインを推奨しているという話もあるので、特に不具合もなく、レスポンシブ対応でなおかつ狙ったデザインで表示できているというのは、まあ、ラッキーということで(笑
追記
その後、一時的に
・PC版・モバイル版ともデザイン変更後のボタン位置がズレる
・モバイル版で「記事を読む」ボタンとメタディスクリプションがいずれも表示されなくなる
という症状が現れたのですが、
PC版とモバイル版のCSSを削除して、レスポンシブ用CSSのみを子テーマのstyle.cssに配置することで何とか修正できました(汗
どうぞご参考までに。
それでは、また。