【WordPress】CSSをコピペしたのに反映されない理由と解決方法

ブログ運営
スポンサーリンク

 

ブログの見た目をカスタマイズしようとして、こんな経験はありませんか?

 

  1. グーグルでコピペできる見出しなどのCSSを検索
  2. コピペしたCSSコードを貼り付けて保存
  3. なぜか反映されない

 

この記事では上記のように「コピペするだけでOK」と書いてあるサイトからコピペをしたにも拘わらす、うまく反映されなかった人のために、反映されなかった理由と反映させる方法を解説します

 

 

 なぜコピペをしても反映されなかったのか

コピペをしても反映されない理由として考えられるのは「クラスが違う」です

この答えを見て「あぁ、なるほど」となった人は一件落着ですが、ほとんどの人は「???」だと思うので、簡単に説明していきます

 

class(クラス)とは?

このクラスというのは簡単にいうと場所の名前です

CSSで見た目を変更するときは、この場所の名前を指定してからどう変更するのかを書きます

 

もう少し詳しくクラスについて説明すると

ウェブサイトは基本、幾つかのグループが組み合わさって作られています

これはサイト全体の構成と1つの記事の構成のどちらにも当てはまることで、今回は1つの記事の構成をピックアップして解説します

 

まず、一般的な記事の構成を確認していきましょう

記事の構成(中身)といえば何がありますか?

  • 記事タイトル
  • 見出し
  • 本文

大まかにはこの3つで構成されています

 

 

そして、この各グループには名前が付いているんです

その名前がクラスになるわけです

(classの他にidという名前もありますが、今回は触れなくても問題ないのできになる方は後で調べて見てください)

 

正しいclassを指定しないと反映されない

クラスが場所の名前だということがわかった状態で、反映されない原因の答えをもう一度見て見ましょう

コピペをしても反映されない理由として考えられるのは「クラスが違う」

 

先ほど、CSSで見た目を変更するときは、場所の名前を指定してからどう変更するのかを書くと説明しました

 

例えば、この画像のように01と02のグループがあったとします

 

 

当たり前ですが、01というグループの見た目を編集したいのに02のグループを指定しても01は変更されませんよね?さらにいえば存在しないグループを指定した場合、どこにも変化は起きませんよね?

 

もう少し具体的な話をしましょう

私のブログのこの記事を例に挙げて話していきます

初心者でも合格!Webクリエイター能力認定試験で使った教材と勉強法を紹介

 

記事の見出し、ありますよね?

見出しは元々「h2」「h3」という名前が付いています

 

 

これらの見出しの見た目を編集したいと思った場合、h2・h3と元々名前が付いてるからそれを指定すればいいと思いますよね?

実際、コピペでOK!みたいなありがたいサイトでもこの名前で宣言されていますしね

しかし、それでは反映されない場合があるんです

 

記事の見出しと固定ページの見出しでクラスが違ったりと、作りがかなり複雑になっていて完全に把握するのは多分無理です

 

でもですね、あるんです

とっておきの方法が!

 

classの確認方法

クラスを簡単に確認する方法、それは「デベロッパーツール」です

ツールといってもGoogle Chromeに初めから付いてる機能なのでインストールしたりという手間はありません

これを使えばクラスの名前が知りたい所をクリックするだけで確認できちゃうんです

 

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

まず、デベロッパーツールを開きます

  1. 右上の「・」が三つ縦に並んでるやつクリック
  2. その他のツールクリック
  3. デベロッパーツールをクリック

すると、こんな画面が出てきます

 

 

そしたら新しく出てきた欄の左上にあるこのマークをクリック

 

 

最後にクラスの名前を知りたいとこでクリック

 

するとこの部分にクラスの名前が出てきます

 

 

名前が確認できたらその名前を指定してCSSを編集しましょう

 

CSSを編集する際の注意点

まず、ワードプレスでCSSを編集する際はバックアップを取ることをオススメします

今回はコピペで編集をするという前提で話していくので、レイアウトが急に崩れるなんてことは滅多に起こらないと思いますが、こういう編集は全て自己責任になるので怖い方はバックアップをとりましょう

(私は複雑なコード追記をしていないのでバックアップを取ってませんでしたが・・

 

次に、テーマを編集する際は必ず子テーマの方で行ってください

 

最後に

サイトを編集するならそれなりの知識が必要になってきます

もっと自分のサイトを凝ったデザインにしたい、そう思っているあなた

ウェブクリという検定試験をオススメします

初心者でも合格!Webクリエイター能力認定試験で使った教材と勉強法を紹介

この検定はサイトのコーディングができることを認めるための試験なので、これを勉強すれば基本的なサイトの知識はつけられます

 

検定を受けないで、知識をつけるだけでも十分サイトをいじることは可能です

 

 

 

ブログ運営
スポンサーリンク
シェアする
趣味ニ生キレバ夜ガ明ケル
タイトルとURLをコピーしました