【初心者向け】WordPressで追加CSSから子テーマCSSへ移行しようとしてもうまくいかなかった時の試行錯誤
●はじめに
こちらの記事はCSS等の知識が全然ない素人が書いています。結構昔に趣味サイトをやっていて、最近またちょくちょく検索しながらコピー＆ペーストでどうにかしたり、推しテーマ「EASEL」を制作されたガタガタ様のHP「do」や著書『個人サイトを作ろう！ テンプレートですぐできる！すぐに身につく！HTML&CSS』でちょっとずつ勉強している、そんな素人が書いているので、色々間違っていたり、もっといい方法があったりするかもしれません。できる人にとっては基本事項かとは思います。ただ、あくまでご自身の判断のもとお試しください。
この記事は自分ではPHPをいじらず、配布されている子テーマのCSSのみをカスタマイズするということを前提としております。読み込まれるはずのものが反映されないことに悩んでおりましたので、PHP関連の話は一切ないです。
ちなみに、このnoteにアクセスする方はご存知とは思いますが、WordPressではカスタマイズ→追加CSSでリアルタイムプレビューしながらCSSをいじれる機能もあるので、特にこだわりがなければそちらの方がいいのかもしれません。
わたしが追加CSSでなく子テーマのCSSにしたのは、追加CSSだとセキュリティの問題でエラーで弾かれたものがある＆記述が長くなってきたというのが主な理由です。
●問題：追加CSSではうまくいったのに子テーマCSSに書くと反映されない
はじめは追加CSSを利用してCSSを記述していました。その後、子テーマCSSに移行しようと思ったら、何故か反映されませんでした。
「EASEL」のフォーラムでも時々「子テーマCSSでは反映されなかった」というのを見かけるので、同じように悩んでいた方のお役に立てればいいなと思います。
●必須事項：基本をチェック
先述したガタガタ様のホームページで、こういう記事を載せてくださっています。ありがとうございます。（ちなみにガタガタ様の著書『個人サイトを作ろう！ テンプレートですぐできる！すぐに身につく！HTML&CSS』にも詳しく載っています！）
「HPの例をコピペしたのにどうしてダメなんだろう」とか「目視では大丈夫な気がするけど」と思いながら悩んでいたのですが、恐らくどこかしらの文法が誤っていたようです。追加CSSだとそこが補完されて表示されていたのではないかと思います。
●今回の解決策：CSS文法チェックツールを使う
「CSS 文法 チェック」などで検索すると出てくるんですけれど、そういったCSSの文法チェックサービスで、追加したいCSSを全文チェック＆汚い記述を綺麗に整えます。それを子テーマのCSSにいれると反映されるようになりました。
その後、CSSをいじるたびに文法チェッカーのお世話になっています。少しだけいじるのなら文法チェッカーに頼らずともいけるのですが、できる人のCSSをただコピペしたものや、CSSに使えるはずのテキストエディタを使って書いてもうまくいかない時があるので、やっぱり素人は文法チェッカーに頼った方が良さそうな感じです。
●おわりに
書いてみると本当にこんな基本的なこと！？ みたいになってしまって書く必要なかったかもしれないとも思いますが、初心者すぎて何がダメすらかも分からなかったので、何かの引っ掛かりになれば幸いです。
最後に、ずっとこのnoteで書いてますけど、いつもお世話になっているガタガタ様のサイト＆テーマへのリンクを貼っておきます。おすすめです！
制作記事ノウハウ、プログラムの配布などたくさんあります！↓
創作・同人サイトにおすすめなテーマ「EASEL」の配布＆デモサイトはこちら↓
WordPressとは直接の関係はないものの、HTMLとCSSの基本が抑えられている書籍の詳細ページはこちら↓
2021.10.27 りう