css / wordpress5.4

WordPress CSS やっぱり変わらない もういや

ここでは、初級者が陥りやすそうな問題と、その対処法（ヒント）を書いておきます。
初級者向きですが、８割方は解決できると思います。

入力ミス

入力ミスは「あってる筈…」と誰しもが思い込みやすく、それゆえにいつまでも間違いに気づかないことがあります。人間にはミスを防げない。そう思ってまず自分を疑いましょう。
例えば以下には、何か所間違いがあるでしょうか？

iflame
{
  pading: 10px;
  margin: 0px20px 3px 4px;
  background-color: #000
  color:　#f00; /* comment
  display: inline;
}

正解

間違いだらけです。全て正解するのは意外と難しいのではないでしょうか。
ちなみに、下記のミスはほぼ私の踏み絵です。

理由誤正
つづりミスiflameiframe
padingpadding
スペースがない0px20px0px 20px
; がない#000#000;
スペースが全角color:　#f00;color: #f00;
コメントになっている/*
display: inline;		/* を消すか、*/ で閉じる

なお、Chrome の検証なら間違えた CSS であれば表示されませんし、綴りミスの場合 color: #g00; のようにエラー表示されるので、是非使いこなしましょう。検証については、こちらのページをご覧ください。

Unity Indies
2020.06.05
Wordpress CSS 変わらない なぜ
https://www.create-forever.games/css-how-to-fix1
Wordpress はテーマを選ぶことで、色々な個性を出すことができます。と、思っていた事が僕にもありました。意外と思ったようにはいかないもの。かゆい所には手が届かないものです。そんな時、CSS の変更で、サイトの雰囲気を大きく変えることができます。ただ、いろんなホームページの CSS をコピペしても上手くいかない…と、諦めた人も多いのでは。ここでは、上手くいかなかった例をあげて、それをどう修正したか手順を紹介します。本記事は Wordpress5 を対象にしていますが、CSS の考え方そのものは、他のものでも役立ちます。また...

同じCSSを別の場所で宣言している

例えば color などは様々な場所で定義していますが、この場合「最後に読み込まれた CSS が優先」され、せっかく書いた自分の CSS が潰されていることがあります。
住民票の住所は最後に登録した１か所だけが有効…といった感じでしょうか。
以下のような方法で自分の書いた CSS の優先順位を上げ、有効にしましょう。

CSS を下の行に書く

１つの CSS ファイルの中で、下に書いた方が優先順位は高まります。

h1 { color: #f00; }
h1 { color: #000; }
h1 { color: #00f; } ← こちらが優先され、文字は青色になります

複数の CSS ファイルの場合はどれが先に読まれるかわかりづらい場合が多いので、初心者であれば後述の !important に頼るのが楽です。

より詳しいセレクタ指定にする

ただ h1 を指定するだけでなく、クラスやIDを指定した方が、より後になり、優先順位が高くなります。

h1 { }
↓
.class h1 { }
↓
#id.class h1 { }

id や class を知る方法については少し上で紹介した 記事 に詳しく書かれています。

魔法のキーワード !important を使う

このキーワードは「一旦全てのCSSが読み込まれた後、最後の最後で読まれ、自分を最優先にする」という魔法のキーワードです。どうしても有効にしたい場合、つけてみましょう。

h1 { color: #f00; }
↓
h1 { color: #f00 !important; }

ただし、!important が複数あった場合、結局は !important の中で優先順位が発生します。

プラグインなどでこっそり !important を使っている事もあります。
私の場合、ConoHa の TypeSquare Webfonts Plugin を使っていた所、自動的に設定される CSS が !important でガチガチに固めてあり、局所的なフォント変更が出来ませんでした…（注：プラグインは悪くありません）。
「プラグインのフォントテーマ設定」を使わず、自分で CSS 宣言することで解決しましたが、こういった修正は初めての人には難しいかもしれません。

最後に保存した CSS が適用されない

保存したつもりが保存していないケース（AHO）

私はこれをよくやります…。
追加 CSS の編集を終わり、実際のページで確認するときは、ちゃんと公開ボタンを押しましょう。

ブラウザキャッシュが悪さをしているケース

F5（更新）や、 ボタンを押すだけでは、直近の CSS が適用されず、思った通りにいかないことがあります。 この場合、Chrome であれば SHIFT + F5 を押すことで強制的にリロードさせることができます。

related posts:

WordPress CSS 変わらない なぜ FontAwesome の使い方 2020