ワードプレスのCSSのカスタマイズで追加のCSSが反映されない！
という問題にぶち当たり、調べまくってこの記事にたどり着いた方にはごめんなさいな結果なのですが、私もそんな問題にぶち当たって解決した顛末を書きたいと思います。
目次
まず基本は文法が間違っていないか
デバッグをするときの基本ですが、文法の間違いを最初に疑います。
特に高級プログラム言語ではコンパイルリストにエラーメッセージが出力されて、基本的な文法のエラーは見つかるのです。シンタックスエラーというやつです。
しかしCSSやHTMLだと、そんなエラーメッセージはなく。（あるのかもしれないけれど、僕は知らない。）エラーがあっても、なかったことにしてスルーする。Webの画面表示系のシステムは、そんなざっくりな仕組みという先入観を私はもっています。
}がちゃんと閉じているか、セミコロン;がついているか、これらがダブルバイトになっていないか、コメントの/*から*/が閉じているか。などなど、ワードプレスの管理画面で、めっちゃ短いコードを目を皿のようにしてみても、まったくおかしなことがない。
なんとこんな短いコード
.box-simple {
padding: 0.5em 1em;
margin: 2em 0;
border: solid 2px #ee8182;
}
.box-simple p {
margin: 0;
padding: 0;
}やりたいことは、テキストの周りに枠を付けたい
こんな感じ
これはテストだす
枠でてる？
これがいくらやっても反映されない。
その前に追加した「あわせて読みたい」の枠はちゃんと反映できてるのに。
↓これ。
もうHTMLにインラインでスタイルを指定してみよう。
<div style="border: 2px solid #91D8AC;
padding: 1px;
border-radius: 3px;
background: ;">
<p>インラインのテスト</p></div>
インラインのテスト
できた。
cssに記述した簡単な枠がなぜ出てくれないのか。悩みました。
ワードプレスの管理画面のメニューの追加CSSからだと反映されないのか？
そこに記述しても反映されないし。
子テーマのテーマの編集のstyle.cssに書いても反映されないし、うーむ。
いろいろ調べるけど決め手が無い
こうなってくると、どんどん深く検索していくわけです。
ブラウザだかサーバーだかのキャッシュが残っていると、CSSの変更が反映されない？
に始まり。
- 読み込むCSSの優先順位のせいで反映できない？
- functions.phpに、子テーマのCSSを優先して読むようにする？
- !importantというおまじないをCSSにつける？
- 子テーマとの構成が、Stinger8だと特殊なのか？
- もしかして、無料テーマstinger8のせいか？
- もうテーマを有料テーマに取り換えるか？
などと、いろいろ出てくるんですが、どれもできればやりたくない。
幸か不幸か私も暇ではないので、phpコードを追加する対応や、テーマを有料の他のテーマに置き換えるという事はしなかったのです。
４～５日はもやもやしたまま過ぎました。
見えない文字が紛れていたのが原因
これまでに伏線が貼ってあったのをお気づきの方もいらっしゃるかもしれません。
結論は、見えないところに余計なコードが入っていたという事でした。
ワードプレスのエディター画面に余計なコードが入っていたんですが、エディター上は見えていなかったんですね。
いろいろやって半ばあきらめていた時、なんとなくコードをコピーして、TeraPad（プログラマーやシステムエンジニア界隈では基本のエディター）にペーストしてみたんです。
その結果がこちら
ん？コードの先頭に「？？」が入ってます？？
これが原因でした。
ググって見つけたCSSのコードをコピーペーストして使おうとして、その時に入り込んだバグです、反省。
取り除いて、改めてコピーペーストしたら反映されてめでたしめでたし。
これでいくらでもカスタマイズできると安堵して、金麦を飲んでいます。
画面表示系のプログラミング、特に日本語の表示が入っている時は、こういう事ってよくある事なんです。変なバイナリのコードが紛れ込んでいて画面が崩れたりという事はよくある事で、なんで真っ先に気づかなかったのかと。
でも、こんな事、経験が無ければ沼にはまりますよね。仕組みの裏が分かっていないとこんな些細な問題もわからず仕舞いになってしまう事でしょう。
皆さんのお役に立てれば幸いです。
