アフリエイトで遊んでいると便利なツール「カエレバ」を見つけて使ってみた。慣れてくると表示がシンプルすぎてちょっと寂しいのでカスタマイズしてみました。
ネットで調べると色々なやり方がありますが、初心者の私には指示通りしても上手く動いてくれない。なので自分でCSSの挿入の仕方を試して見ました。
基本となるCSSのコードはここのページに載っているコードを変更しないで挿入させてもらっています。初心者なので細かいコードの意味はまだ良くわかりませんが(笑)
しかし「もしもアフィリエイト」を利用した場合は、Bloggerのテーマによってはこのままのコードではなぜかボタンレイアウトが崩れてしまうことがあり、最後にコードを追加してあります。少しまだ小さい四角いゴミが残ってますが、気にならないのでそのままにしてますが．．．
私としてはあまり派手なボタンは嫌いなので丁度いい感じだと思ってます。自分のスマホでも雰囲気を確認して下さい。
PCでは横一列にボタンが並び、スマホでは画像の横に文字とショップボタンが縦一列ずつ並びます。これが正解なのかわかりませんが私の知識レベルではここまでです(笑)
ALCATEL ONETOUCH
以下が実際に挿入する手順です。
最初に「テーマ」を選択肢「歯車」のアイコンをクリックして「デフォルト」⇒「カスタム」を設定しておいて下さい。また、カエレバのデザインはamazlet風-2(cssカスタマイズ用)を選択して下さい。
追伸：
最新版ではカエレバは「楽天」で検索するため、表示される画像小を選ぶと小さくなってしまった(画像中では大きくなりすぎ)。そこで「画像小」でHTMLコードの画像「64×64」を「128×128」にすると私の場合、バッチリになりました！(11/5/2019）
次に「テーマ」の画面で「HTML編集」を選択し、コード表示で10行前後にある「<b:skin> ... </b:skin>」を見つけます。
スマホ表示コードを以下のように挿入します。（設定等によってはコメント文が表示され手しまうことがありますが、その時はコメント文だけ削除）
<b:skin> ... </b:skin>
/* モバイルからのアクセスで表示される内容 */
/*--------------------------------------
ヨメレバ・カエレバ（スマホ）
--------------------------------------*/
<b:if cond='data:blog.isMobile'>
<style>
.booklink-box, .kaerebalink-box{
padding:15px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
width: 100px;
}
.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 > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{
margin-bottom:12px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:10px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-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:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin: 2px 0px;
padding:10px 0px;
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;}
.booklink-footer{clear:left;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
</style>
</b:if>
/*--------------------------------------
ヨメレバ・カエレバ（スマホ）
--------------------------------------*/
<b:if cond='data:blog.isMobile'>
<style>
.booklink-box, .kaerebalink-box{
padding:15px;
margin-bottom: 10px;
border:double #CCC;
overflow: hidden;
font-size:small;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
width: 100px;
}
.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 > a, .kaerebalink-name > a{
font-size: 15px;
font-weight: bold;
}
.booklink-name, .kaerebalink-name{
margin-bottom:12px;
line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:10px;
margin-top:5px;
font-family:verdana;
line-height:120%;
}
.booklink-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:calc(100% - 4px);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
margin: 2px 0px;
padding:10px 0px;
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;}
.booklink-footer{clear:left;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}
</style>
</b:if>
次に「<b:skin> ... </b:skin>」に隠れているコードを表示させて、]]></b:skin>の手前に以下の文のPC表示コードを挿入します。
/* 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;
}
.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;}
/*以下は、もしもアフィリエイトではレイアウトが崩れる場合は必要なコード*/
.kaerebalink-name img,
.shoplinkamazon img, .shoplinkrakuten img, .shoplinkrakukobo img, .shoplinkyahoo img, .shoplinkyahooAuc img,
.shoplinkseven img, .shoplinkbellemaison img, .shoplinkcecile img, .shoplinkkakakucom img,
.shoplinkkindle img, .shoplinkbk1 img, .shoplinkehon img, .shoplinkkino img,
.shoplinkjun img, .shoplinktoshokan img {
display:none;
}
]]></b:skin>/*--------------------------------------
ヨメレバ・カエレバ（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;
}
.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;}
/*以下は、もしもアフィリエイトではレイアウトが崩れる場合は必要なコード*/
.kaerebalink-name img,
.shoplinkamazon img, .shoplinkrakuten img, .shoplinkrakukobo img, .shoplinkyahoo img, .shoplinkyahooAuc img,
.shoplinkseven img, .shoplinkbellemaison img, .shoplinkcecile img, .shoplinkkakakucom img,
.shoplinkkindle img, .shoplinkbk1 img, .shoplinkehon img, .shoplinkkino img,
.shoplinkjun img, .shoplinktoshokan img {
display:none;
}
これで終わりです。
普通は<b:skin> ... </b:skin>にCSSが書かれているのでこの間に書くのですが上手くいきませんでした。
以下のようなもう少しスマートな書き方でも、結果的には上手くいきません。
<b:if cond='data:blog.isMobile'>
スマホ用表示
<b:else/>
PC用表示
</b:if>
想定通りのレイアウトではないのですが取りあえず動作することがわかったので当分はそのまま使用してみます。CSSでカスタマイズしているので、後はコードを分析しながら少しずつ変更してみようかと思っています。
