プログラミング1年生

2020年8月5日 / 最終更新日時 : 2020年8月18日 ENBARQMENT プログラミング1年生

WordPress、CSSはどこに書く

WordPress（以下：WP）のデザインを変更するためのCSSを書ける場所はいくつかあります。いくつかあるのでどこに書いたらいいのかCSSの優先順位、簡単度、安心度など踏まえて説明していきます。

WordPressのCSSを書ける場所

プログラミング1年生：22時限「WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編」ではIcoMoonでダウンロードしたファイルの中のstyle.cssの内容を全部コピーしてWPの「外観＞テーマエディター＞スタイルシート(style.css)」の一番最後にペーストしました。

そして投稿ページにCSSが書けるプラグインを入れ、投稿ページごとにデザイン変更出来るようにしました。

ですので今回はCSSを書くスペースが以下の3ヶ所ある前提で説明します。

「子テーマ」を使う方法

元のテーマ（親テーマ）の情報を引き継ぐ「子テーマ」の作り方を書きました。

WordPressで子テーマを作って安心のカスタマイズ

やはり子テーマの中でカスタマイズするのがオススメですが、以下の記事も今後WPをカスタマイズする上で参考になるのでぜひ◎

スタイルシート、追加CSS、カスタムCSSの３ヶ所の場合

外観＞テーマエディター　の中にあるスタイルシートに書けます（先程説明したようにコピペしましたし）が、ここをあまりいじっていると他のコードを誤って削除変更してしまった時にWPに慣れていない方だとつらいです。
外観＞カスタマイズ　の中にある追加CSSに書けます。ここは気楽です。
投稿のページにプラグインで入れたカスタムCSS　に書けます。ここも気楽です。（入れ方はCSSコードが書けるプラグインを入れるへ）

簡単、安全度で考える

は上で書いたように止めておいた方が安全かなと思います。
は簡単で安全だと思います。自分で書いたCSSだけなのでもし削除してしまったとしても被害は小さいですしコードを全部コピーして保存するのも手軽かと。
はもっと簡単で安全と言いますか、投稿ごとなので被害はそのページだけです。

CSSのルールから優先される順位

CSSのルールなどからの場所に優先順位があります。
優先順位？
に書いたものよりに書いたもの、それよりに書いたものが優先されるんだよ

他のスタイル指定より優先順位が低いとうまく反映されない

例えばデフォルトで紫色にしていた寝袋のアイコンをこの投稿記事では水色に変更したいとします。

（”検証モード”でチェックしました）同じアイコンフォント.icon-sleepingbag:before に対してでは紫色、では水色を指定しました。

上で説明したようにの場所に書いた物が優先されて紫色の寝袋が表示されてしまいました。
の水色が打ち消されているね。では安全簡単なの追加CSSに全部書くの？

それプラス投稿ごとにアイコンフォントのデザインを変えたい事もあるかと思います。なのでこう考えました。

の追加CSS（外観＞カスタマイズ＞追加CSS）にサイズ、色などデフォルトで使いたいコードを書く。（facebookやYoutube、ブランドオリジナルのカラーなどでしょうか）そして投稿で個別に変えたい時はのカスタムCSSに書くというものです。

あれ？はよりも優先順位が低いってさっき言ったよね

そうです。なので、、

CSSのセレクタの詳細度を上げる

セレクタとは、例えば.icon-sleepingbag:before {~}の{の前の部分.icon-sleepingbag:beforeの事です。この部分をよりも詳しく書いてのCSSの順位を上げるのです。

「B市」と書くより「A県のB市」と書いた方が詳細度は上で順位は上に来ます。それからより後ろに書かれたスタイル指定が優先されます。

CSSを書く場所、書き方まとめ

以上を踏まえてアイコンフォントのCSSの書き方、あくまで１つの提案をまとめますと

外観＞テーマエディター＞スタイルシート(style.css)　の一番最後にicoMoonのstyle.cssを全てコピペ。

外観＞カスタマイズ＞追加CSS　にデフォルトにしたいコードを書く。

投稿のページにプラグインで入れたカスタムCSSに、セレクタの詳細度を上げて変更したいコードのみ書く。

WPの投稿の場合、.entry-content、.post-contentなどです。最後にこの追加するセレクタの見方を解説します。

結果を比較してみます

とに書いたセレクタが同じだった時はの色が反映されませんでした。

ここは水色にしたいんだもんね

のセレクタに.entry-content
を付けて詳細度を上げ、.entry-content .icon-sleepingbag:before
としたらでは無くの色が反映されました◎

追加するセレクタの確認方法

WPの公式テーマ、Twenty fifteenの投稿の場合は上記のように.entry-contentをセレクタに追加して詳細度を上げれば良かったのですがテーマは他にも沢山あるのでお使いのテーマによってはこれでは効かない事もあります。

それぞれお使いのブラウザの「検証ツール」「デベロッパーツール」を開いてください。

Chromeなら(Macの場合)調べたい所の上で右クリック→検証で開きます

デベロッパーツールで確認する

【テーマ：Twenty FifteenやTwenty Seventeenの場合】

調べたいコード、icon-sleepingbagをB市とします。

B市は少し上の方へ行って、、A県の中だと確認出来ました。追加するセレクタは.entry-contentです。他のテーマも見てみます。

【テーマ：Lightningの場合】

ランタンのアイコンフォント(icon-lantern)をB市とした時、B市はentry-bodyというA県の中です。追加するセレクタは.entry-bodyです。

ダメ押しにもう１つ。

【テーマ：Fukasawaの場合】

この場合はA県の所にpost-contentとentry-contentの2つ書いてあります。この場合.post-content、.entry-contentどちらを付けても大丈夫でした。

以上、プログラミング1年生の22時限でwebアイコンフォントを入れた続きで、それを装飾するためのCSSをどこに書くかの1つの提案でした。

ちなみにに書いていない指示を書く場合はセレクタは同じでも大丈夫です。に書いた内容を上書きしたい時に”セレクタの詳細度を上げる”必要が出てきます。

試しにセレクタを同じにして「左に45度回転」する指示を書いた所ちゃんと表示されました。

お疲れ様でした◎

2020年8月18日　追記

どこにCSSを書くかで表示が異なる

CSSを書いた場所によって表示が異なる事があると分かりました。お使いのテーマによるので気にしなくていい場合もあるのですがTwenty Fifteenの場合トップページで投稿が何記事か見れます。「icomoonテスト２」は子テーマのテーマエディタ（親テーマのテーマエディタも同じ考えです）に色やサイズまでCSSを書きました。「Eキャンプ場」は投稿のカスタムCSSに色やサイズを書きました。（どちらもicoMoonでダウンロードしたstyle.cssはテーマエディタにコピぺした上で）