ブログのカスタマイズをしたのに反映されない！CSS（スタイルシート）の変更が反映されない！というのはよくある質問の１つです。
今回はカスタマイズをしてCSS（スタイルシート）を正しく変更しても反映されないという場合の対処方法を紹介しておきます。
カスタマイズ（CSSの編集）しても反映されない原因と対策
反映されない原因の多くは次の３つが考えられます。
- 変更前のページをブラウザが残している（読み込み速度向上のため）。
- 親要素の影響を受けている
- 閉じ括弧「}」が抜けてたりセミコロン等の記述ミス。
ほかにも色々細かい原因がある場合がありますが、この３つが非常に多いので一応対処方法を紹介しておきます。
ブラウザで「最新の情報に更新」する
先ほども書いたようにブラウザに変更前のページデータが保存されている場合があります。これを解消する場合は次の手順。
- Windowsの場合⇒[F5]キーを押す。
- Macの場合⇒[Command]キーと[R]を押す。
これでリロード（再読み込み）をする事ができるので試してみて下さい。また、それでも反映されない場合は次の手順も試します。
- Windowsの場合⇒「Ctrl」と一緒に「F5」を押す。
- Macの場合⇒「Command」と「Shift」と「R」を一緒に押す。
こっちは強制再読み込み（スパーリロード）ね。
優先させるコードを追加する
スタイルシート（CSS）で変更しても親要素の影響を受けて変更が反映されない場合があります。その場合には変更した記述に「!important」を付ける事で優先的に反映させる事ができます。
●● {
margin-right:0px !important;
}こんな感じで、優先したい部分に「!important」を付けるとそれが優先されます。
これでも反映されない場合は、閉じ括弧「}」が抜けていないかとかコロン「：」やセミコロン「；」等の記述ミスがないかをもう一度確認してみて下さい。
カラス様
返信ありがとうございます。WordPressの場合は特にpタグを使わなくても自動的にpタグが入りますが、無料ブログなどの場合はこれがdivだったりpだったりしますね。確かにbrよりもpタグの方が正しい感じですが、これはそこまで気にする必要はないと思います。すくなくとも私自身はほとんど気にしてません。
無料ブログの時はbrで改行してた感じでしたが、きっちり狙ったキーワードでは上位表示できてましたし、今もそのまま上位で残ってますよ。タグよりもコンテンツ重視でOKと思ってます。
しげぞう様
カラスです。スパムあつかいになっていたら、すみません
◆以下をCSSに追加してみました。（相殺できてるのでしょうかね？）
.entry_body p {
margin-top:20px;
margin-bottom:30px
line-height:1.75;
}
もともと、私がえらんだテンプレートの幅が狭いので、見た感じには分かりにくいのですが、少し改善が見られたような気がします？
今回もとても助かりました。ありがとうございます。
そして、また教えて下さい。
ちなみに、しげぞう様は、段落「br」タグは打ちますか？
グーグル・クローラー的に、「br」タグは打たない方がいい、とある有名ブロガーさんがいっていたので、基本わたしは、改行「p」「/p」タグを打っています。
そして、大きく段落をあけたいときには、「 p /p 」であいだをあけている状態です。
もし、ほかのお薦め簡単タグがあればアドバイスいただけるとうれしく思います。
以上です。
カラス様
返信ありがとうございます。
普通に改行したらpではなくてdivで区切られる感じですかね？
全部でpタグを使うのは大変かもしれませんので、このそれぞれのdiv自体にmarginを設定した方が簡単かもしれません。CSSに以下を追加です。
.entry_body div { margin-bottom: 10px; margin-top: 10px; }それぞれの文章がdivで区切られるようなので、それぞれのdivに余白をって感じです。数値は変更して大丈夫です。この場合は行間というか、段落間の余白って感じです。
もしくは本当にすべてpタグを使って文章を書いていくのであれば以下をCSSに追加してみる感じになるかもしれません。ちょっと検証はしてませんが。
.entry_body p { margin-top: 10px; margin-bottom:10px line-height:1.75; }しげぞう様
たびたびすみません
どうぞよろしくお願いします
以上です。
カラス様
コメントありがとうございます。最近FC2のブログは全く触ってないので、どんな感じのテンプレートがあるのかちょっと忘れてしまったのですが、FC2の場合はテンプレートの種類が多いので実際にブログを見てチェックする必要があります。基本的にCSSでline-heightを設定すればOKなんですが、pに対してline-heightを設定すればおそらくサイドバーとかフッターとかも影響を受けるかもしれません。
要は記事中の「p」だけの対応をすればいいので、その要素を調べるためにブログのURLを教えてもらえると助かります。どうぞよろしくお願い致します。
しげぞう様
カラスです。お世話になります
今回、FC2で、サイトを立ち上げました。
ですが、ワードプレスほどテンプレートのカスタマイズが効かなくて困っています。
さすがに、それは仕方ないですね。ある程度、妥協しています。
しかし、行間だけはあけたい、と思っています。
（ p で改行したいだけです）
基本、line height の存在しないテンプレートが多いのですが、
そういう場合は、プラスで、CSSに何か記述しないといけないでしょうか？
いろいろ検索しても、これといった答えがなく難しいものが多いように感じます。
br を連打するのも気がひけるので、何か方法があるようであればぜひ教えて下さい。
ちなみに私は、Macです。
以上です。
＞PoN様
コメントありがとうございます。私自身が結構アナログ派なので、PCの操作自体も詳しく知らない事が多いんです（笑）。正直言うとブログを始めた2012年までPCすら持ってませんでしたので、今でも時々苦労することがあります。スタート地点が他の方よりずっと後ろからのスタートした感じでしたので、忘れないようにメモ代わりにブログ書いている感じですが、それでコメント頂けるのが嬉しいです。ありがとうございます。
いつも参考にさせていただいております。
このような、アフィリエイトのやり方だけではなくPCの操作についての解説もあるのはありがたいです。
＞ゆうこ様
コメントありがとうございます。サーバー側の問題かブラウザのキャッシュの問題だろうと思います。私も時々似たような事がありますが、反映されていないと思ったときには別のブラウザで確認するようにしています。それで反映されていれば時間が経てば解消できている場合が多いです。またできない部分があればいつでもコメント下さい。今後もよろしくお願い致します。
返信ありがとうございます。
seesaaに入り、確認したところ反映されていました。
確認のため、再度色の変更を試みてみました。
やはり直ぐには反映されず、反映されるまでに2時間は要したと思います。
ただ、以前にも何回か同じ作業を繰り返し行なっても、直ぐに反映できていたので、
なぜという気持ちは残りますが。。
まずは1つ解決できました、ありがとうございました。
ご親切な対応ありがとうございました。
＞ゆうこ様
コメントありがとうございます。レビューで確認したときには反映されているという事なので、コードは間違っていないと思われます。原因としてはブラウザのキャッシュが怪しいですが、ブログを表示してF5を押し、リロードしても変わらないのであればURLを教えて頂けると助かります。もしかすると別に原因があるかも知れません。URLはコメント公開時には削除しますのでもし良かったら教えて下さい。お手数ですが、よろしくお願い致します。
お世話になります。
ブログ初心者です。
いつも参考にさせて頂いています。
ブログタイトル、ブログ説明の文字の色の変更をスタイルシートで変更し、
レビューで確認し、変更されてるのを確認して、保存しても、反映されていません。
CSSが対応されていない場合の対処法も試させて頂きましたが、結果に変化が見られません。
どの様な原因が考えられますでしょうか。
アドバイス頂ければ幸いです。
よろしくお願いします。
＞新福岡人様
先日シーサーブログのスマートフォンでのCSSについての質問があったのですが、シーサーブログの管理画面⇒「デザイン」⇒「スマートフォンのタブ」を選択して「デザイン一覧」をクリック。そして適応中の自分のテンプレートを選択する事でスマートフォン用のCSSを編集できました。
スマートフォンの用のCSSにテーブルのCSSを追加する事で可能でした。気づかなくてすみません。
＞新福岡人様
こちらこそありがとうございます。私自身最近はtableは使わない場合が増えてきています。スマートフォンやタブレット等に対応させるレスポンシブデザインを考える時にtableは結構面倒です。画面が狭くなるとtableが縦に伸びたような見た目になるのでスマートフォン用のtable表示を色々変更して考える必要がでてきますので。
私も最近になってレスポンシブデザインの勉強やjavascript、jQueryの勉強を始めたら楽しくてブログ更新がおろそかになっています（笑）また近いうちに今度はHTMLやCSS、javascript等を解説するサイトを作れたらいいなと思っています、というか絶対作ります。そのためのインプット作業中です。
これからブログやホームページ作成をする方の参考になるようなサイトを作りたいと思っていますので今後ともどうぞよろしくお願い致します。
ご返信有難うございます！
スマホサイトの編集につきましては、一度ご教示の通り「tableを使わないでdivを使って枠組みを作る」こと等を含めて試行錯誤してみたいと思います。
スマホサイトでcssが使えないのは残念ですが、見やすいページ作りを目指して頑張っていきます！
私自身はアフィリエイトに興味があり、現在はブログで日記作成しながら、文章作成やホームページ・タグの勉強中です。
最初は一歩を踏み出せなかったのですが、実践してみるとブログ作成も面白いですね！
ただ、本業もありますので、ブログ更新がままならないのが悩みですが（苦笑）
今後、勉強のために貴サイトを活用して、スキルアップしていきたいと思いますので、また何かありましたら宜しくお願い致します。
＞新福岡人様
コメントありがとうございます。私も試してみましたが、tableのCSSはPCでは反映されますが、スマホ用では反映されてませんね。tableにidやclass名を付けてもスマホ版では反映されてません。
要素を調べてみた所、シーサーブログのスマホ版ではあらかじめtableのCSSが決まっているのではないかと思います。そのため、PCでは反映されてもスマホ版では反映されないのだと思います。スマートフォン用のCSSは「シーサー管理画面」⇒「デザイン」⇒「スマートフォン」⇒「デザイン一覧」と進み、適応中のテンプレートを選択するとCSSが書けます。そこに書けば反映されました。初歩的な部分でのうっかりでした、すみません。
しげぞうさん、はじめまして。
現在、アフィリエイト開設のためにブログを勉強しておる者です。
シーサーブログを開設しており、しげぞうさんのサイトを参考にカスタマイズの勉強をさせていただいております。
最近、ブログ内にテーブルを作成し、背景色、文字色を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;
}
テーブルの型だけはどうやら反映されているみたいですが、文字色…黒、背景色…白でしか映し出されません。
なぜこういった現象が起きるのか、全くわからず途方に暮れております。
お忙しい中恐縮ですが、ご教示くださいませんか。
＞miho-away様
コメントありがとうございます。サイドバーが下に行ってしまったという事はブログの幅の調整が間違えている事が考えられます。サイドバーと記事本文の横幅がブログ全体の横幅より大きくなってしまったのでサイドバーが下に行ってしまった可能性があります。一度CSSをメモ帳等に全部コピーしておいて、最近追加したカスタマイズのコードを削除してみるといいかもしれません。特にブログの幅、サイドバーの幅を変更したのであればおそらくそれが原因ではないかと思います。
また、どうしても分からないという場合はブログのURLを教えて下さい。ブログのURLはコメント公開前に削除しますので。実際にブログを見れば原因も分かるかと思います。
パソコン初心者のmiho-awayといいます。
アフィリエイトに以前から興味があり貴方様のサイトにたどり着きました。
Seesaaブログに登録し、カスタム法を参考に順調に触っていたのに、更新時に通信障害？が起きたのか訳のわからない設定になってしまいました。
サイドにあったコンテンツ類が全て下にいってしまい、設定→コンテンツで見てもちゃんとサイドになっているのに一体どこがおかしくなってしまったのか全然見つけられず途方に暮れています。
本当に始めたばかりで三記事しかなく、記事原文はexcelにあるので、一度ブログを削除してやり直すべきか悩んでいます。