CSSが反映されないとき

デザインのカスタマイズにはスタイルシート(CSS)を編集しますが、「参考のCSSのコードを見ながら書いたけどデザインが変わらない」とか、「一部のデザインが変わらない」ということがあります。

そんなときの対処法を紹介します。

CSSの文法ミス

まずは自分が書いたスタイルシート(CSS)が間違っている可能性を疑います。

当然ですが、文法ミスがあれば指定したデザインのスタイルが反映されません。単純なミスに意外と気づかないものです。

ありがちな文法ミスを紹介します。

FC2ブログのCSSが反映されないときの対処方法3 (1)

クラス名の書き間違えです。

<div class="example1">・・・</div>

となっている場合に、

#example1 { 
 ・・・
}

と書いてしまう場合。

この場合、クラス名なので「#example1」ではなく、「.example1」が正解ですね。

ただしくは、これ↓。

.example1 { 
 ・・・
}

逆に、ID名をクラス名としてしまう場合もありますね。

HTMLタグの書き間違えです。

<p><a href="...">・・・</a></p>

となっている場合に、

pa {
 ・・・
}

と書いてしまう場合。

<p>タグの中にある <a>タグを指定するのであれば、"p" と "a" の間に半角スペースが必要です。

ただしくは、これ↓。

p a {
 ・・・
}

プロパティの書き間違えもあります。

.example3 {
 margn-bottom: 5px;
}

スペルミスしています。正しくは「margin-bottom」ですね。

値の書き間違えもあります。

.example4 {
 display: blcok;
}

これもスペルミスです。正しくは「display: block;」ですね。

「;(セミコロン)」の書き忘れ。

.example5 {
 color: red
 font-size:12px;
}

意外とよくありますよ。複数のプロパティを指定する場合は、「;」で区切る必要があります。

正しくは、これ↓。

.example5 {
 color: red;
 font-size:12px;
}

「;(セミコロン)」を忘れると、CSSは正しく適用されません。

「 } 」の閉じ忘れ。

.example6 {
 color: red;

となっている場合。波括弧 「{ }」で囲まれていないと、CSSは正しく適用されません。

正しくは、これ↓。

.example6 {
 color: red;
 font-size:12px;
}

コメントアウトの閉じ忘れ。

/* 文字色をredにする
.example7 {
 color: red;
}

わかり易くコメントを追加したまでは良かったのですが、コメントアウトを閉じ忘れました。

この場合、次のコメントアウトの箇所までCSSが無視されます。

コメントアウトは、「/* … */」ときちんと閉じましょう。

正しくは、これ↓。

/* 文字色をredにする */
.example7 {
 color: red;
}

キャッシュが残っている

キャッシュとは、高速化のための仕組みのひとつです。

一度アクセスして開いたページのデータをブラウザで一時的に保存しておいて、次に同じページを開くときにページにアクセスして読み込む代わりに、保存したデータを使い素早く表示をさせます。

でも、自分でページをカスタマイズしているときには、常に新しく読み直して欲しいですよね。

この仕組みが邪魔して、変更前のデータがブラウザに保存されていて、変更後のデザインが表示されず「デザインが変わらない」と悩むことが結構あります。

ブラウザで簡単にキャッシュの削除ができます。

Firefoxの場合は、次のようにすることで削除できます。

①ブラウザの右上に表示される「メニュー」を押します。

②「オプション」を選択します。

FC2ブログのCSSが反映されないときの対処方法3 (2)

③「プライバシーとセキュリティ」を押します。

④開いたページの中にある「キャッシュされたウェブページ」から「今すぐ消去」というボタンを押すと、キャッシュが削除されます。

FC2ブログのCSSが反映されないときの対処方法3 (3)

検証モードでCSSが効かない原因をチェック

今までの内容を確認しても「反映されない」ということはよくあります。

そんなときには、ブラウザの開発ツールを使って何が原因なのかをチェックすることができます。

開発ツールというのは、現在表示されているページのHTMLやCSSのコードをチェックできるツールです。メジャーなPCブラウザにはだいたい搭載されています。

Firefoxの開発ツールの「インスペクター」を使います。

この記事で確認したFirefoxはバージョンは次の通りです。

FC2ブログのCSSが反映されないときの対処方法3 (5)

上部のメニューバー「ツール」から「ウェブ開発」を選択し、「インスペクター」を押します。

FC2ブログのCSSが反映されないときの対処方法3 (6)

インスペクターが起動します。

インスペクターを使うと、ブラウザ上でカーソルを当てたときの要素の内容を見ることができます。

FC2ブログのCSSが反映されないときの対処方法3 (7)

チェックしたいHTMLを見る

問題のある記事のパーツにカーソル合わせ、問題のありそうな場所を探します。

この例では、<p>タグのフォントサイズを16px と設定したのですが、フォントサイズが設定よりも大きいようです。

確認してみると、「!important」が設定され、優先的にフォントサイズが指定されていました。

FC2ブログのCSSが反映されないときの対処方法3 (8)

まとめ

このような場合は、CSSコードにミスが無くても思い通りにデザインが反映されません。

インスペクターを使うことで、このような問題に気づくことができます。問題点がわかれば対処方法も判明します。

うまく開発ツールを使いこなして問題点に気づいてください。

慣れてくれば問題点がパターン化されてくるので、原因がすぐに判るようになってきますよ。

  • FC2ブログの記事内にバリューコマースのバナー広告を横並びに貼る方法
  • FC2ブログに最新記事をサムネイル画像付きで表示させる方法
  • FC2ブログのサイドバーにインフォカートのテキスト広告を貼る方法
  • FC2ブログの記事内にインフォカートのバナー広告を貼る方法

Twitterでフォローしよう

  • 仮想通貨
    【知らないとヤバイ】不労所得は存在しないのか?ウソなのか?
    2021年8月30日
  • アフィリエイト
    アフィリエイト初心者におすすめのASP一覧 11選
    2018年8月18日
  • 仮想通貨
    【初心者にオススメ】ビットコインや仮想通貨(暗号資産)取引所ランキング
    2021年5月28日
  • 仮想通貨
    【知らない損する】ビットコイン初心者が勘違いしていること5つ
    2023年3月22日
おすすめの記事
FC2ブログ カスタマイズ初心者講座
今回は、FC2ブログのスマホの広告を消す方法について紹介します。 目次1 FC2ブログの広告2 スマホにおすすめのクリック課金型アフィリエイ...