【Simplicity】CSSがうまく反映しない時にやってみる3つの方法を語る

私はWordpressのテーマに「Simplicity」を使っています。
で、私のようなウェブサイト構築のド素人さんでもやってみたいのがCSSカスタマイズ。
もちろん私は1からカスタマイズすることなどできないので、いろんなサイトをお手本にさせていただいています。(ありがとうございます🙏)

でも、ちゃんとお手本を見て単に指定されたCSSをコピペしただけにも関わらずCSSがうまく反映しないことがあります。
そんな時に私が試す3つの方法をご紹介させていただきます。

※前提※テーマはSimplicity child(子テーマ)を有効にしている状態です

スポンサーリンク

ブラウザを最新の状態に読み込む

一番シンプルで手っ取り早い方法ですが、意外とこれが一番だったりします。

Google Chromeの場合:[Shift][F5] を押す
Internet Explorerの場合:[Ctrl][F5] を押す

【怪奇現象】iPhoneのSafariだけ反映しない時

同じiPhoneなのに、Chromeでは反映していて、Safariでは反映しないという怪奇現象がよく起きます。

そんな時は、Safariでプライベートモードで閲覧すると解決します。

1.右下のアイコンをタップ 2.左下の「プライベート」をタップ

サーバー側の style.css ファイルを一旦削除して再アップロード

いきなり大技(笑)
サーバー側の style.css を削除して、PC側の style.css をアップロードしなおす方法です。
理由は分かりませんが、正常に反映されるようになることがあります。

きっちり削除対象のファイルを確認していても、削除する時はひやっひやする操作なのであまりお勧めはしません💧

念のため削除前に style.css ファイルのバックアップをお勧めします。
必ず「/wp-content/themes/simplicity2-child」フォルダ内の style.css であることを確認して操作を行ってください。
誤操作に関して当方は責任を負うことはできません。

親スタイルの style.css からコピってカスタマイズする

これも理由は分らないけど、やってみると正常に反映されることがあります。
見た目は正しいCSSの記述でも、どこかが間違っているっていうことなんでしょうけど、ド素人さんの私には見つけられません😅💦

  1. 親テーマ「/wp-content/themes/simplicity2」内の style.css をダウンロード
  2. ダウンロードした style.css の中から、カスタマイズしたいコードが含まれる個所を探してコピー
    (例)H1見出しの場合

    .article h1 {
    margin-top:30px;
    margin-bottom:20px;
    font-size: 30px;
    line-height:117%;
    }
  3. 子テーマの style.css にペーストして、お手本を参考にして修正する
    (例)赤文字部分が修正・追記個所

    .article h1 {
    margin-top:30px;
    margin-bottom:20px;
    font-size: 25px;
    line-height: 170%;
    border-bottom: solid 2px #6ec4ff;
    }
  4. 修正した style.css を子テーマ「/wp-content/themes/simplicity2-child」内にアップロードする

以上です。
絶対正常に反映される保証はできませんが(おいおい、いいのか?)、良かったらお試しください。

スポンサーリンク
スポンサーリンク