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

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

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

スポンサーリンク
アフィリエイトBパートナー募集

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう 投稿作成者

    >PoN様

    コメントありがとうございます。私自身が結構アナログ派なので、PCの操作自体も詳しく知らない事が多いんです(笑)。正直言うとブログを始めた2012年までPCすら持ってませんでしたので、今でも時々苦労することがあります。スタート地点が他の方よりずっと後ろからのスタートした感じでしたので、忘れないようにメモ代わりにブログ書いている感じですが、それでコメント頂けるのが嬉しいです。ありがとうございます。

  2. PoN

    いつも参考にさせていただいております。
    このような、アフィリエイトのやり方だけではなくPCの操作についての解説もあるのはありがたいです。

  3. しげぞう 投稿作成者

    >ゆうこ様

    コメントありがとうございます。サーバー側の問題かブラウザのキャッシュの問題だろうと思います。私も時々似たような事がありますが、反映されていないと思ったときには別のブラウザで確認するようにしています。それで反映されていれば時間が経てば解消できている場合が多いです。またできない部分があればいつでもコメント下さい。今後もよろしくお願い致します。

  4. ゆうこ

    返信ありがとうございます。
    seesaaに入り、確認したところ反映されていました。
    確認のため、再度色の変更を試みてみました。
    やはり直ぐには反映されず、反映されるまでに2時間は要したと思います。
    ただ、以前にも何回か同じ作業を繰り返し行なっても、直ぐに反映できていたので、
    なぜという気持ちは残りますが。。
    まずは1つ解決できました、ありがとうございました。
    ご親切な対応ありがとうございました。

  5. しげぞう 投稿作成者

    >ゆうこ様

    コメントありがとうございます。レビューで確認したときには反映されているという事なので、コードは間違っていないと思われます。原因としてはブラウザのキャッシュが怪しいですが、ブログを表示してF5を押し、リロードしても変わらないのであればURLを教えて頂けると助かります。もしかすると別に原因があるかも知れません。URLはコメント公開時には削除しますのでもし良かったら教えて下さい。お手数ですが、よろしくお願い致します。

  6. ゆうこ

    お世話になります。
    ブログ初心者です。
    いつも参考にさせて頂いています。
    ブログタイトル、ブログ説明の文字の色の変更をスタイルシートで変更し、
    レビューで確認し、変更されてるのを確認して、保存しても、反映されていません。
    CSSが対応されていない場合の対処法も試させて頂きましたが、結果に変化が見られません。
    どの様な原因が考えられますでしょうか。
    アドバイス頂ければ幸いです。
    よろしくお願いします。

  7. しげぞう 投稿作成者

    >新福岡人様

    先日シーサーブログのスマートフォンでのCSSについての質問があったのですが、シーサーブログの管理画面⇒「デザイン」⇒「スマートフォンのタブ」を選択して「デザイン一覧」をクリック。そして適応中の自分のテンプレートを選択する事でスマートフォン用のCSSを編集できました。

    スマートフォンの用のCSSにテーブルのCSSを追加する事で可能でした。気づかなくてすみません。

  8. しげぞう 投稿作成者

    >新福岡人様

    こちらこそありがとうございます。私自身最近はtableは使わない場合が増えてきています。スマートフォンやタブレット等に対応させるレスポンシブデザインを考える時にtableは結構面倒です。画面が狭くなるとtableが縦に伸びたような見た目になるのでスマートフォン用のtable表示を色々変更して考える必要がでてきますので。

    私も最近になってレスポンシブデザインの勉強やjavascript、jQueryの勉強を始めたら楽しくてブログ更新がおろそかになっています(笑)また近いうちに今度はHTMLやCSS、javascript等を解説するサイトを作れたらいいなと思っています、というか絶対作ります。そのためのインプット作業中です。

    これからブログやホームページ作成をする方の参考になるようなサイトを作りたいと思っていますので今後ともどうぞよろしくお願い致します。

  9. 新福岡人

    ご返信有難うございます!
    スマホサイトの編集につきましては、一度ご教示の通り「tableを使わないでdivを使って枠組みを作る」こと等を含めて試行錯誤してみたいと思います。
    スマホサイトでcssが使えないのは残念ですが、見やすいページ作りを目指して頑張っていきます!

    私自身はアフィリエイトに興味があり、現在はブログで日記作成しながら、文章作成やホームページ・タグの勉強中です。
    最初は一歩を踏み出せなかったのですが、実践してみるとブログ作成も面白いですね!
    ただ、本業もありますので、ブログ更新がままならないのが悩みですが(苦笑)

    今後、勉強のために貴サイトを活用して、スキルアップしていきたいと思いますので、また何かありましたら宜しくお願い致します。

  10. しげぞう 投稿作成者

    >新福岡人様

    コメントありがとうございます。私も試してみましたが、tableのCSSはPCでは反映されますが、スマホ用では反映されてませんね。tableにidやclass名を付けてもスマホ版では反映されてません。要素を調べてみた所、シーサーブログのスマホ版ではあらかじめtableのCSSが決まっているのではないかと思います。そのため、PCでは反映されてもスマホ版では反映されないのだと思います。

    スマートフォン用のCSSは「シーサー管理画面」⇒「デザイン」⇒「スマートフォン」⇒「デザイン一覧」と進み、適応中のテンプレートを選択するとCSSが書けます。そこに書けば反映されました。初歩的な部分でのうっかりでした、すみません。

  11. 新福岡人

    しげぞうさん、はじめまして。
    現在、アフィリエイト開設のためにブログを勉強しておる者です。
    シーサーブログを開設しており、しげぞうさんのサイトを参考にカスタマイズの勉強をさせていただいております。

    最近、ブログ内にテーブルを作成し、背景色、文字色をcssに記載しました。
    ところが、PCサイトではキチンと反映されているのですが、スマートホンサイトでは背景色、文字色が全く反映されません。

    ソースは以下のように記述しております。
    (投稿欄HTML)

    所要時間約4時間~4時間30分
    運賃(およそ)約15,000円~

    (css)
    .accessdata {
       border=”1″;
       border-collapse=”collapse”;
    }
    .dai{
     background-color:#556b2f;
     color: #ffffff;
     font-weight:bold;
    }
    .naiyou{
     background-color:#f5fffa;
    }

    テーブルの型だけはどうやら反映されているみたいですが、文字色…黒、背景色…白でしか映し出されません。

    なぜこういった現象が起きるのか、全くわからず途方に暮れております。
    お忙しい中恐縮ですが、ご教示くださいませんか。

  12. しげぞう 投稿作成者

    >miho-away様

    コメントありがとうございます。サイドバーが下に行ってしまったという事はブログの幅の調整が間違えている事が考えられます。サイドバーと記事本文の横幅がブログ全体の横幅より大きくなってしまったのでサイドバーが下に行ってしまった可能性があります。一度CSSをメモ帳等に全部コピーしておいて、最近追加したカスタマイズのコードを削除してみるといいかもしれません。特にブログの幅、サイドバーの幅を変更したのであればおそらくそれが原因ではないかと思います。

    また、どうしても分からないという場合はブログのURLを教えて下さい。ブログのURLはコメント公開前に削除しますので。実際にブログを見れば原因も分かるかと思います。

  13. miho-away

    パソコン初心者のmiho-awayといいます。
    アフィリエイトに以前から興味があり貴方様のサイトにたどり着きました。
    Seesaaブログに登録し、カスタム法を参考に順調に触っていたのに、更新時に通信障害?が起きたのか訳のわからない設定になってしまいました。

    サイドにあったコンテンツ類が全て下にいってしまい、設定→コンテンツで見てもちゃんとサイドになっているのに一体どこがおかしくなってしまったのか全然見つけられず途方に暮れています。

    本当に始めたばかりで三記事しかなく、記事原文はexcelにあるので、一度ブログを削除してやり直すべきか悩んでいます。