カエレバのcss設定で、画像やボタン表示をスマホで見やすくする

こんにちは

SimplicityやWordPressの問題ではなくアメブロに貼り付けても同じで、要はHTMLの仕様です。

G-tool風-2（画像表示：小）では、HTMLにstyleの指定があり、CSSにその指定を書いても!importantをつけなければ反映しません。HTMLにしstyleを書いたほうがCSSの優先順位が高いので。

画像が小さくなるのは、もしかしたらCSSの指定方法を変更すれば良いかもです。それともブラウザではなくプラグイン・サーバーでキャッシュを表示していればそれを削除しないと反映しません。

※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

お返事、ありがとうございます。
とても、参考になりました。

対象URLは、私のサイトのすべての記事なんですが、わかりやすいところだと、
http://toyonakarenji.com/winter-wind/
とかです。

下のほうの入浴剤とかが、すごく、小さくなってしまいます。

あと、
http://toyonakarenji.com/snake/
とかも、すごく、画面が小さくなってしまいます。

＞-tool風-2（画像表示：小）では、HTMLにstyleの指定があり、
＞CSSにその指定を書いても!importantをつけなければ反映しません。
＞HTMLにしstyleを書いたほうがCSSの優先順位が高いので。

上の書き込みから推測させて頂くと、style.cssとかmobile.cssに書き込む定型コピペに!importantを書き足して、スマホのカエレバをオシャレにする方法もあるということですよね？

いままでは、カエレバをamazlet風-2(cssカスタマイズ用）にすべて、変更する方法しかないのだと思っておりました。

えっと、でも、いまのところ、リンク先と画像を確認していただければ、と思います。
画像が一定の大きさではなく、まちまちで、なかにはすごく小さくなっているのとか、あると分かって頂けるかと思います。
ちなみに、スマホで見ると、極小になります。

ということで、一度、返信をさせて頂きました。

よろしくお願い致します。

お返事、ありがとうございます。
とても、勉強になりました。

JetpackのCDN（画像と写真をスピードアップ）をオフにしました。
すると、スマホで見ても、画像の大きさが一定の大きさになりました。

こんな簡単に画像が大きくなると思っていませんでした・・。
画像が大きくなって、一気に見やすくなって、快適になりました。
ありがとうございました！

画像が小さいのがなによりの問題だったので、問題のほとんどが解決したような気がするのですが、一応、後学のために、二点、質問させてください。（最初にした質問ですが・・）

１、cssの変更でボタンや枠などオシャレにする場合、G-tool風-2（画像表示：小）では駄目で、amazlet風-2(cssカスタマイズ用）でないといけないのかを教えていただけないでしょうか？

２、style.cssとmobile.css、どちらも使用しないといけないのでしょうか？　メディアクエリを使用して、style.cssだけに定番のcssを貼り付ける、という方法でも良いのでしょうか？

以上となります。

よろしくお願い致します。

１、cssの変更でボタンや枠などオシャレにする場合、G-tool風-2（画像表示：小）では駄目で、amazlet風-2(cssカスタマイズ用）でないといけないのかを教えていただけないでしょうか？

G-tool風-2はだめでしたか？該当ページのソースを見ようにもアラートがでて見ちゃダメ！とされるのでよくわかりませんが、枠が反映しないのは、おそらくHTMLにstyle属性が付いてるからだと思います。はじめに説明した通りです。

以下見出し5章。『過去にamazlet風(改)-1など大量に使用！cssカスタマイズ用のデザインを選んでないときのCSS』で書いてる通りになります。オススメしませんが…

https://bibabosi-rizumu.com/kaereba-customize/

２、style.cssとmobile.css、どちらも使用しないといけないのでしょうか？　メディアクエリを使用して、style.cssだけに定番のcssを貼り付ける、という方法でも良いのでしょうか？

『メディアクエリを使用して、style.cssだけに定番のcssを貼り付ける、という方法でも良い』と思いますよ。実際私も大半はそのようにしてます。

mobile.css（や設定によってはresponsive.css）は使い方によってメチャクチャ便利だったりするので、活用させてもらってます。やりやすい方で管理するのが良さそうですね❦

お返事、ありがとうございました。
親切に教えて頂きまして、ほんとにありがとうございます。

＞該当ページのソースを見ようにもアラートがでて見ちゃダメ！とされるので
どうして、ソースが見れない仕様になっているのか、ちょっと分からないのですが、たぶん、なんか、こっちでしちゃってるんだと思います……。

リンク先のサイトをよく読ませていただきました。
やっぱり、おすすめされている、カエレバの記事のはりかえを少しずつ、行っていこうと思いました。

HTMLやstyle.cssとか、全然、分かっていなかったようなので、少しずつ、学んでいきたいです。

とりあえず、無事、解決いたしました。
いろいろと教えて頂き、ありがとうございました。

また、なにか分からないことがあったら、質問させて頂きたいと思います。

それでは、失礼いたします。

ソースが見れない仕様

コピープロテクターなどのプラグインが入ってるからですが、私もソコソコの大人なのでアラートが出ても泣かずに済みました❦

CSSの指定方法まで書いてなかったので、めまいさせてしまったかも知れません…。。ただ勘違いでなければtableを使っていて、CSSの指定方法でテーブル：表とバッティングしてしまう可能性もありそうです。

記事が少ない事もあり、貼り替えた方が後々のメンテナンスが楽そうかと思います。お疲れさまでした＾＾

＞＞かわたっく様

返信、ありがとうございます。
返信を頂いたので、いちおう、再訪です。

そういえば、コピープロテクターみたいなプラグインを入れていました・・。
なんか、文章コピーできなくするという名目のヤツでしたが。

ソース確認しようとしてくださったのに、私が余計なプラグインを入れていたために、申し訳ありませんでした。。

なんか、ほかのブログとか読んでて、いいかなって思って、入れただけなのですが・・。

＞記事が少ない事もあり、貼り替えた方が後々のメンテナンスが楽そうかと思います。
＞お疲れさまでした＾＾

はい！　記事数がまだ少ないので、徐々に変えてこうと思います！

いろいろとご親切を教えて頂きまして、ほんとにありがとうございました。
とても、助かりました。

では、失礼いたします。
お疲れ様でした。

＞＞かわたっく様

失礼しました・・。
かうたっく様でした。

いろいろとご親切にしていただいたのに、名前を最後に間違えてしまいまして、すみません・・。

というわけで、最後に二度も書き込みしてしまいましたが、この問題は無事解決しましたので、終了ということで。。

ありがとうございました。
失礼します。