質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

403閲覧

はてなブログProでカエレバの使用について。スマホでページが移動しません。

po-po-po

総合スコア10

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/20 23:16

編集2022/01/12 10:55

前提・実現したいこと

お世話になります。
はてなブログ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/ツールのバージョンなど)

他に何か情報が必要でしたら教えて下さい。
素人のためこんな質問で、また分かりにくいところがありましたら申し訳ありません。
お力を貸していただけたら嬉しいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/11/22 01:09

こんにちは。先頭から5記事ぐらい読んでみたのですが、PC表示でもカエレバのブログパーツが見当たりませんでした。実際に挿入をしている記事はどれですか?
Lhankor_Mhy

2018/11/22 01:10

そうそう。ようこそはてなブログへ!
po-po-po

2018/11/22 03:58

こんにちは。ご連絡ありがとうございます。「発生している問題・エラーメッセージ」の欄にURLと現在の状況を追記させていただきました。よろしくお願いします。
Lhankor_Mhy

2018/11/22 04:06

確認いたしました。当方の環境(iOS12)では問題なくページ移動します。質問者さんの環境は Android ですか?
po-po-po

2018/11/22 07:27

ありがとうございます。私はAndroidを使っています。約3年半前の機種なんですが、Androidであることや、古いスマホであることが関係している可能性もあるんでしょうか?
Lhankor_Mhy

2018/11/22 07:47

もう少し他の情報がそろわないと断言しにくいですが、おそらくは環境の問題ではないかと思います。
po-po-po

2018/11/22 08:03

PCはもちろんスマホも初心者レベルを脱していないもので・・・。Lhankor_MhyさんにiOSでは機能していると教えていただいて安心しました。ありがとうございました!また何かあったらお力貸してください!
Lhankor_Mhy

2018/11/22 08:23

お力になれず、すみません。はてな関連のことはもしかしたら人力検索はてなで聞いた方がいいかもしれませんね。 http://q.hatena.ne.jp/
po-po-po

2018/11/22 08:27

いえいえ、おそらく私のスマホの問題とわかって安心しました。全く機能していないと思っていたので・・・。人力検索はてなというものがあるんですね!見てみます。教えていただいてありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問