【CSSには優先度がある】デザインがうまく反映しない場合はコードの書き方をチェックしよう!

  • 2021年1月1日
  • 2021年3月30日
  • CSS
CSS
おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!(プロフィールはこちら

ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

正しく・デザインを変えたい場所を指定してCSSコードを書いているのにうまくカスタマイズの内容が反映されない・・・。

その時は、CSS適用の優先度をチェックしてみてください。

 

 

実は、CSSには「この順番で優先して読み込む」というルールがあって、

  • 有無を言わさず、「超」最優先させるコードが書いてある
  • HTMLコードに直接書いている
  • 重複して書いていたため片方が反応していない

といった場合、WordPressでよく使う「追加CSS」にコードを書いてもうまく反応しないことがあります。

 

追加CSS
「ほとんどのテーマであるはずです」

 

「え、ちゃんと書いているのに?!」って思うかもしれませんが、何事にも順序というものがあるってことですね^^;

具体的なコードも書きながら解決方法を解説していきますね〜

 

みみこみみこ
いや、ホントそれ教えてください!

 

ー ブログで伸び悩んでいる方へ ー

無料動画

正しく、対象箇所を指定できているか確認しよう

チェック

「優先度」の前に、まずはデザインを変えたい箇所をちゃんと指定できているかを確認しましょう。

ちょっと専門的な言葉を使うとCSSのクラス名が正しいかどうかを見ていきます。

 

CSSのクラス名についてはこちらで解説しています^^

関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです!(プロフィールはこちら) ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^   今回の記事では、CSS[…]

CSSクラス 書き方・ルール

 

つまり、そもそも変えたい場所をちゃんと指定できているのかどうか?を確認して、正しく指定できていることを確認してから優先度チェックをしていこうというわけです。

ここでクラス名を簡単に確認できる便利なツールをご紹介します!

 

 

テテテテン!

開発ツ〜ル〜!

開発ツール

 

 

・・・さて、著作権ギリギリな感じ(笑)で四次元ポケットからサクッと出てきたこの「開発ツール」。

 

 

WEB業界ではよく使われるもので、

更新前にブラウザ上でカスタマイズした場合の見え方をチェックしたり、パソコンでスマホ表示のレイアウトをチェックしたりと、

ブロガーにとっても普段使いレベルで便利な機能がたくさん備わっているツールなんです。

(だから開発ツール、またの名をデベロッパーツールとも言われたりします)

 

 

使ってるWordPressのテーマごとにクラス名って違うので、

この開発ツールを使ったCSSのクラス名を見つけ出す方法をお伝えしますね!

関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^   今回の記事は、「開発ツール」につ[…]

開発ツール

 

みみこみみこ

「開発」って言うくらいだから難しいことやるのかな?って思ったけど、実際やってみたら思ったより簡単に見つけることができました!!(*^ω^*)/ヤッホイ

で、ちょっと面白い(笑)

おかぴーおかぴー
時短にもなるので、ブロガーの人には使い慣れてほしいツールです!^^

CSSの優先度

優先度

では、今回の記事テーマに戻ります!

CSSには以下の順番で優先度があり、そのルールに従ってパソコン画面に表示させています。

 

 

例えば、下のような黄色い背景の色を指定する場合で考えてみましょう。

サンプルテキスト

 

まずは骨組みであるHTMLコードは、下のような書き方で作れます。

 HTMLソースコード
<div>サンプルテキスト</div>
そして、この骨組みに対して「背景」をつける場合は「background」というコードを書き、黄色「yellow」を指定します。
 CSSコード
background:yellow;

 

この骨組みに対して、黄色い背景をつけるコードは大きく分けて3通りの方法があり、以下の優先度で反映されるようになっています。
 優先度①:「!important」を書いて強制的に優先させる
▼HTMLに直書きしている場合
<div style="background:yellow!important;">サンプルテキスト</div>
▼CSSファイルに書いてある場合
.box{
background:yellow!important;
}

→赤文字の箇所に「!important」と書いたパターン。これは何が何でも「絶対にこれを優先させて!!」と伝えるコードです。

※扱う際の注意点があるので、後でまとめますね^^

 

 優先度②:HTMLコードに直書きする
<div style="background:yellow;"></div>
→「style=""」の中に、デザインのコードを書いたパターン。

 

 優先度③:CSSファイルに記述
「カスタマイズ>追加CSS」or「各テーマのCSSファイル」
.box{
background:yellow;
}
〜その他、様々なコードが書いてあったりします〜

→CSSのコードがまとまったファイルに、コードを書いていくパターン。

この3つのパターン、どれで書いても黄色い背景のボックスができます。

 

 

さて、①>②>③の順位で強い訳なんですが、

123!!

③の方法でコードを追加したとしても、①or②の書き方が存在しているとカスタマイズが反映されません。

つまり、①or②が優先されてしまう訳なのです。

③の方法で反映されない時は、①or②が書いてないか確認してみてください。

 

!importantの注意点

これは英語の意味と同じで「重要」を意味するコード。

これを末尾に書くと必ずこのコードが優先されて適用されます。

みみこみみこ
じゃあ、全部この書き方で良いんじゃないんですか??
おかぴーおかぴー
それでも良いんですけど、あまり「!important」を多用しすぎない方法でカスタマイズすることをおすすめします。

 

あまり多く使いすぎると、時間が経って追加でカスタマイズしたい時、どこが最優先で適用させるべきコードか作ってて分からなくなります。

WordPressのテーマで使われているCSSコードは物凄い量なので、毎回そのコードをチェックしながらやらないといけなります。

 

さらに、テーマには「更新」があります。

WordPressテーマの更新

 

テーマを更新する理由は、主に使い勝手を良くしたり、WordPressの新しい仕組みに対応させるためだったり、SEO対策のための記述方法に対応してくれたりと、

簡潔に言うと、「テーマをより良くするため」です。

 

そんな時に、「!important」で何でもかんでも最優先で指定していると、更新してもそっちが優先されてしまってうまく反映されなくなります。

つまり、応用が効きにくくなるんです。

 

だから、テーマを作る人もあまり「!important」は多用せずに作ります。

どんどん追加していった時に今までのが変に反応しないようにするためです。

 

なので、カスタマイズする時は「!important」は本当に必要なところだけに絞るように使うように気をつけてください。

 

HTMLに直書きの注意点

これを考える前に、なんでCSSファイルがあるのか?ですが、

それはあちこちにデザインコードを書くと、「あれ?どこに書いてたっけ??」となって管理がしにくくなります。

管理
「ファイル管理は分かりやすく!」

 

そうならないように、CSSコードをまとめたファイルを用意して管理をするのが一般的です(多くの人が追加CSSに書いていくのは、そこにまとめて書いていくのが管理がしやすいから)。

なので、あちこちにバラバラ書くのではなく、追加CSSなどのファイルにまとめて書いていくようにしてください。

 

CSSファイルに書く時の注意点

CSSファイルに書く時の注意点は、コードは上から下に向かって読み込まれていくことです。

おかぴーおかぴー
実は、CSSに限らず、HTMLやJavascriptといったブログで使われるコードは全て上から下に向かってコンピュータは解析していく特徴があるんです。

 

つまり、もし同じクラス名が2箇所にある場合、上の方にある内容は打ち消されます。

 

追加CSS

同じクラス名でも、下には背景がピンク(background:pink)の指定。上には背景が黄色の指定が書いてあります。

この場合、優先されるのは下にあるコードなので、背景色はピンクになってしまいます。

 

カスタマイズするコードを追加していく時は、一番下に追加していくようにしていけば安心です。

先ほども書きましたが、もし一番下に追加しても反映されない場合は「!important」で指定してるか、「HTMLに直書き」している可能性があるので確認してみてください。

 

ちなみに、追加CSSがたくさん書いてあると探すのが大変です。

そんな時は「Ctrl+F」のショートカットを使うと、検索窓が出てくるのでコードを入力して探せますよ^^

↓↓↓

 

各テーマの設定画面の内容について

各テーマには、簡単にカスタマイズできる設定画面があります。

「カスタマイズ」の項目内のことです。

カスタマイズ
「赤枠のどちらからでもカスタマイズ画面に飛べます」

↓↓↓

カスタマイズ テーマ
「赤枠内の設定」

 

追加CSSで設定した内容は、この画面の設定に上書きされます。

つまり、ここで設定した内容が反映されない時は、追加CSSの中に記述があるのかもしれません。

(各テーマ設定の後に、追加CSSを読み込む順番になっているからです)

 

まとめ

まとめ

CSSはうまく反映されましたでしょうか。

 

優先度の前に、まずは正しい箇所を選択出来ているかを確認しましょう。

確認方法でおすすめなのが開発ツールです。

 

そして、CSSの優先度をチェック!

  1. !importantを書く
  2. HTMLに直書きする
  3. CSSファイルに書く

①>②>③の順番で優先されました。

 

基本的な内容なのですが、ここを押さえておくだけで時短になりますし、

この記事の「CSSの優先度」「開発ツール」の使い方に慣れれば、これからのカスタマイズがきっと楽になると思いますよ!^^

デザイン効果と組み合わせて、最適な収益化方法を見つけよう

あなたに最適な収益化方法を見つけてみませんか?

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

興味がある方は、ぜひ以下からご覧ください〜

 

↓↓↓

 

 

ストレスフリーなブロガーライフを送ろう ブログデザインお悩み解決室WPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG