ブログのカスタマイズ(CSS)が反映されない場合の対処法

ブログのカスタマイズをしたのに反映されない!CSS(スタイルシート)の変更が反映されない!というのはよくある質問の1つです。

今回はカスタマイズをしてCSS(スタイルシート)を正しく変更しても反映されないという場合の対処方法を紹介しておきます。

カスタマイズ(CSSの編集)しても反映されない原因と対策

反映されない原因の多くは次の3つが考えられます。

  • 変更前のページをブラウザが残している(読み込み速度向上のため)。
  • 親要素の影響を受けている
  • 閉じ括弧「}」が抜けてたりセミコロン等の記述ミス。

ほかにも色々細かい原因がある場合がありますが、この3つが非常に多いので一応対処方法を紹介しておきます。

ブラウザで「最新の情報に更新」する

先ほども書いたようにブラウザに変更前のページデータが保存されている場合があります。これを解消する場合は次の手順。

  • Windowsの場合⇒[F5]キーを押す。
  • Macの場合⇒[Command]キーと[R]を押す。

これでリロード(再読み込み)をする事ができるので試してみて下さい。また、それでも反映されない場合は次の手順も試します。

  • Windowsの場合⇒「Ctrl」と一緒に「F5」を押す。
  • Macの場合⇒「Command」と「Shift」と「R」を一緒に押す。

こっちは強制再読み込み(スパーリロード)ね。

優先させるコードを追加する

スタイルシート(CSS)で変更しても親要素の影響を受けて変更が反映されない場合があります。その場合には変更した記述に「!important」を付ける事で優先的に反映させる事ができます。

●● {
margin-right:0px !important;
}

こんな感じで、優先したい部分に「!important」を付けるとそれが優先されます。

これでも反映されない場合は、閉じ括弧「}」が抜けていないかとかコロン「:」やセミコロン「;」等の記述ミスがないかをもう一度確認してみて下さい。

ブログのカスタマイズ(CSS)が反映されない場合の対処法”に23件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    のりこ様

    返信ありがとうございます。見出しがテキストっていうのは多分見出しとは別に「h3」とかがテキストとして表示させるか?という事だと思います(違ったらすみません!)。これは表示されませんので大丈夫です。あくまで装飾されていない状態というだけで、見出しとしては認識されます。

  2. のりこ

    しげぞうさま

    お返事ありがとうございます。

    やはり無料ブログサービスの場合、カスタマイズするのに面倒な面というか、複雑な面があるのですね…。

    装飾せずに、見出しをつける場合は、投稿するときにテキストでつくのでしょうか?

    なんだか頭がフリーズして、何を質問してるのかも分からなくなっています( ω-、)
    すいません…。ありがとうございました。

  3. しげぞう 投稿作成者

    のりこ様

    返信ありがとうございます。のりこ様の言われるようにスマホのデザインは別になってます。デザイン⇒スマートフォンのタブを選択⇒デザイン設定⇒デザイン名と進むとスマホのCSSへ行けます。

    CSSなどで装飾する場合にはHTMLで指定された名前が必要になります。たとえばヘッダーとかフッターとか細かい部分までサイトの部分部分に名前を付ける作業がHTMLとイメージしてもらったらOKです。それで名前を付けた部分を装飾するのがCSSで、それぞれHTMLで付けた名前を元に装飾します。「ヘッダーは赤!」「フッターは白」みたいな感じです。

    さて、Seesaaブログの場合、スマホ版とPC版ではデザイン(テンプレート)が別になっているため、HTMLで割当られた名前が違います。

    今回の例で言うと見出し(h3)がPC版だと「.article.article–entry h3」ってしてましたが、スマホ版だと「h3」だけです。なのでスマホのCSSで「.article.article–entry h3」ではなく、「h3」で装飾の記述をすると反映されるかと思います。ただ、スマホのデザインによってこの部分の名前が違う場合もあるかもしれません。

    それから本当はPC版のように「.article.article–entry h3」のように名付けるのが良いのです。なぜなら見出し以外の部分にも「h3」を使っている部分があるからです。

    先程スマホの見出しの装飾はh3と書きましたが、スマホの装飾をh3でやってしまうと関連記事のタイトルとかにも影響するかと思います。これはちょっとやりずらいです。