前提・実現したいこと
お世話になります。
はてなブログProを使用しています。
ブログURL→https://www.poroppooo.com/
レスポンシブデザイン(スマートフォンでもPCと同じデザイン設定でブログを表示)以外のテーマを使用しています。
アフィリエイトに便利とされているカエレバを使用したいと思っています。
発生している問題・エラーメッセージ
こちらのブログからカエレバのカスタマイズCSSをコピーさせていただきました。
https://happylife-tsubuyaki.hatenablog.com/entry/customize-kaereba-yomereba-ver2
PCではカエレバのボタンも表示され、amazon等へのページの移動もできました。
でも、スマホではボタンの表示も、amazon等へのページの移動もできませんでした。
そのため、こちらのブログを参考にさせて頂き、<style type="text/css"></style>の追記が必要とのことだったので、コピーしました。
http://mshitech.hatenablog.com/entry/2016/10/28/210000
すると、スマホでもカエレバのボタンは表示されるようになったんですが、amazon等へのページの移動はできないままです。
―――――Lhankor_Mhyさんからご連絡いただき追記します。2018.11.22―――――
根本が不足しており、申し訳ありませんでした。
カエレバがうまく使えなくて、下書きで色々作業して、そのままでした。
過去の記事2つにカエレバを使ってみました。
https://www.poroppooo.com/entry/inu-pettokyari--osusume
https://www.poroppooo.com/entry/kannsou-hoshitsu-shittori-o-ruinnwann
確認したところ・・・
1.PCではカエレバのボタンも表示され、ページの移動もできます。
2.スマホでもカエレバのボタンは表示されます。
amazon、楽天へはページの移動ができましたが、ヤフーショッピング、Wowmaへはページの移動ができませんでした。
他にも何か不足等ありましたら、教えて下さい。
よろしくお願いします。
エラーメッセージ
ありません。
該当のソースコード
ブログで使用しているテーマ(レスポンシブデザイン以外)のコードは次のように記載されています。
/* <system section="theme" selected="handwriting"> /
@import "/css/theme/handwriting/handwriting.css";
/ </system> */
.cstmreba {
width:98%;
height:auto;
margin:36px auto;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
カエレバのスマホ用カスタマイズCSSは、『ダッシュボード→デザイン→スマートフォン→ヘッダ→タイトル下→スマートフォン用にHTMLを設定する』のところに次のようにコピーしています。
<style type="text/css"> /* カエレバ・ヨメレバ (レスポンシブver.2.4) */ .booklink-box, .kaerebalink-box{ width:78%; margin: 1em 0 1em; padding:3% 8%; border: 1px dashed #BDBDBD; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:15px 0 15px 0; text-align: center; } .booklink-image img, .kaerebalink-image img{ display:block; margin:0 auto; text-align:center; } .booklink-info, .kaerebalink-info{ text-align:center; line-height:120%; overflow: hidden; } .booklink-name, .kaerebalink-name{ font-size:15px; margin-bottom:5px; line-height:1.2em; } .booklink-powered-date, .kaerebalink-powered-date{ font-size:8pt; margin-top:10px; line-height:120%; } .booklink-powered-date, .kaerebalink-detail{ font-size:8pt; margin-bottom:3px; } .booklink-link2, .kaerebalink-link1{ margin-bottom:3px; } .kaerebalink-link1 img, .booklink-link2 img{ display:none; } .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkwowma, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinkebj, .shoplinktoshokan{ width:100%; } .shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkrakukobo a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkbellemaison a, .shoplinkcecile a, .shoplinkwowma a, .shoplinkkakakucom a, .shoplinkbk1 a, .shoplinkehon a, .shoplinkkino a, .shoplinkebj a, .shoplinktoshokan a{ display:inline-block; float:left; width:95%; overflow:hidden; border-radius:6px; border:1px solid #dcdcdc; margin:5px 5px 0 5px; padding:10px 0px; text-align:center; cursor:pointer; text-decoration:none; font-weight:bold; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; background-color:#ffffff; } .shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkkindle a:hover, .shoplinkrakukobo a:hover, .shoplinkyahoo a:hover, .shoplinkseven a:hover, .shoplinkbellemaison a:hover, .shoplinkcecile a:hover, .shoplinkwowma a:hover, .shoplinkkakakucom a:hover, .shoplinkbk1 a:hover, .shoplinkehon a:hover, .shoplinkkino a:hover, .shoplinkebj a:hover, .shoplinktoshokan a:hover{ color:#fff; } .shoplinkamazon a{ color:#ff9900; } .shoplinkamazon a:hover{ background-color:#ff9900; } .shoplinkrakuten a{ color:#bf0000; } .shoplinkrakuten a:hover{ background-color:#bf0000; } .shoplinkkindle a{ color:#1a8dcc; } .shoplinkkindle a:hover{ background-color:#1a8dcc; } .shoplinkrakukobo a{ color:#d50000; } .shoplinkrakukobo a:hover{ background-color:#d50000; } .shoplinkyahoo a{ color:#ff0033; font-size:10px; } .shoplinkyahoo a:hover{ background-color:#ff0033; } .shoplinkseven a{ color:#ff6501; } .shoplinkseven a:hover{ background-color:#ff6501; } .shoplinkbellemaison a{ color:#84be24; } .shoplinkbellemaison a:hover{ background-color:#84be24; } .shoplinkcecile a{ color:#8d124b; } .shoplinkcecile a:hover{ background-color:#8d124b; } .shoplinkwowma a{ color:#E77035; } .shoplinkwowma a:hover{ background-color:#E77035; } .shoplinkkakakucom a{ color:#051D93; } .shoplinkkakakucom a:hover{ background-color:#051D93; } .shoplinkbk1 a{ color:#0786cb; } .shoplinkbk1 a:hover{ background-color:#0786cb; } .shoplinkehon a{ color:#000066; } .shoplinkehon a:hover{ background-color:#000066; } .shoplinkkino a{ color:#003e92; } .shoplinkkino a:hover{ background-color:#003e92; } .shoplinkebj a{ color:#D84330; } .shoplinkebj a:hover{ background-color:#D84330; } .shoplinktoshokan a{ color:#212121; } .shoplinktoshokan a:hover{ background-color:#212121; } .booklink-footer{ display: none; } @media screen and (min-width: 600px) { .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkrakukobo, .shoplinkyahoo, .shoplinkseven, .shoplinkbellemaison, .shoplinkcecile, .shoplinkwowma, .shoplinkkakakucom, .shoplinkbk1, .shoplinkehon, .shoplinkkino, .shoplinkebj, .shoplinktoshokan { display:inline-block; float:left; width:45%; overflow:hidden; } } </style>試したこと
ネットで色々調べてみたのですが、私に見つけることができたのは『<style type="text/css"></style>の追記』でした。
でも、解決しないのでどうしたらいいのか分からず困っています。
補足情報(FW/ツールのバージョンなど)
他に何か情報が必要でしたら教えて下さい。
素人のためこんな質問で、また分かりにくいところがありましたら申し訳ありません。
お力を貸していただけたら嬉しいです。
あなたの回答
tips
プレビュー