背景色がスマホに反映さらない問題について



  • カラー設定で背景色を変更した結果、パソコン・iPadには背景色が反映されましたが、スマホには反映されていません。
    解決策をお願いします。


    マニュアル確認済み
    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • @mashimaro_021 さん

    こんにちは!

    キャッシュの削除やプラグインの全停止や、
    1つ1つ停止して変化があるかご確認いただいても良いでしょうか?

    変化がなければ、現状を確認させていただきたいので、
    実際のサイトのURLをご共有いただけますと幸いです!

    よろしくお願いいたします!



  • いろいろと試しましたが、パソコンにあまりくわしくないので改善できませんでした。
    ブログサイトのURLは https://bartender-days.com/ になります。よろしくお願いします。



  • @mashimaro_021 さん

    URLありがとうございます!

    変わらないのは記事のコンテンツ部分ですかね...??
    そうであれば、管理画面「外観」>「カスタマイズ」>「サイトデザイン設定」>「記事エリアのデザインの選択」の項目で
    「スタイル2」を選択してみてください!

    ご確認お願いいたします!



  • スタイル2に変更するとスマホにも反映しました。記事内も背景色と同じ色になるんですね。iPadで見てるような感じにしたかったのですが、できる方法があれば教えて下さい。



  • @mashimaro_021 さん

    ご確認ありがとうございます!

    iPadで見てるような感じにしたかったのですが、

    というのは、どういった状態のことを指していますか...??



  • スタイル1に設定して、背景色をグレーにすると、iPadではトップページに反映され記事枠内の部分はホワイトの背景になり、記事を開くと同じく記事内の背景色はホワイトで記事枠以外には背景色グレーが反映されてます。
    スマホの場所はトップページに記事枠内以外の背景色のグレーは反映されず(ホワイトのまま)、記事を開くと背景色はホワイトになってます。
    できれば、スマホもトップページの記事枠以外がグレー 記事の背景色はホワイトにできると幸いです。



  • @mashimaro_021 さん

    うまく解釈できているかわかりませんが、追加CSSで対応するとなると
    以下のようなコードになるんじゃないかなと思います。。

    @media screen and (max-width: 767px) {
    	#wrapper {
    		background-color: #ededed;
    	}	
    	.single #main-contents,
    	.page #main-contents {
    		margin: 0;
    		padding: 10px 15px 15px;
    		background-color: #fff;
    	}
    }
    

    ※「#ededed」の部分には背景色で指定したカラーコードを入れてください。

    少し全体の余白部分なども変更しているので、
    上記のコードでイメージしたい形にならないようでしたら
    恐れ入りますが、mashimaro_021 さんご自身でカスタマイズと調整をいただけますと幸いです...!

    ご確認お願いいたします!



  • すごい!完璧にしたいカラースタイルになりました、ありがとうございます。
    スマホ:トップページに好きな背景色がはいり、記事をタップすると記事内はホワイト色で見やすく表示できています。
    カラーコードありがとうございます。



  • @mashimaro_021 さん

    いえいえ、ご報告ありがとうございました...!