このサイトでアメブロとかSeesaaブログとかWordPressのカスタマイズ書いてるのですが、カスタマイズ系の記事って質問コメントがめっちゃくちゃ多いです。
↑自分が返信した分もありますし、全てがカスタマイズ系の記事へのコメントではないんですが、それでもカスタマイズ記事への質問多いです。
そんなカスタマイズ系の記事で多いのが「スタイルシート（CSS）記述したけど反映されない！原因は何でしょう？」という質問です。
また今後もこういう質問来るかなと思うので一度記事にしておく事にしました。
CSSが反映されない原因別の対処方法
ほんとに特殊な例を除いて基本的には次のような原因があります。
- CSSの記述ミス
- CSS記述する場所間違ってる
- キャッシュが残っている
- 別のコードが優先されていてCSSが反映されない
１．CSSの記述ミスが原因の場合の対処方法
これは一番最初の確認事項ですが、そもそもCSSの記述にミスがないか確認します。
今回新規に追加した記述の部分だけでなく、以前に追加した記述にミスがあるって場合もかなり多いです。
以前に追加した記述で記述ミスがある場合は、それ以降のCSSが効かない場合があります。以前の記述なので気が付かない事が多いです。
そのため、反映されないcssの記述をCSSの一番最初に追加して反映されるか確認します。
CSSの一番最初の方に追加して反映される場合は以前の記述にミスがある可能性が高いです。
以前に追加した記述で記述ミスがないか確認。特に閉じタグ「 } 」がない場合が多いのでチェックしてみて下さい。
よくある記述ミスのランキング！
よくある記述ミスをランキングにしてみました。私がやらかす順でランキングしてます。
- 閉じタグ「 } 」が抜けてる
- 「;」と「：」を間違っている
- 半角ではなく全角スペースになってる
- 「”」と「”」など全角になっているミス
- プロパティや値のスペルミス
半角と全角問題は結構あります、特にスペースの半角と全角などは本当にウォーリーを探すよりも難しいときがあります。
２．CSSを記述する場所が間違っている場合
スタイルシート（CSS）は後から書いたもの（下に書いたもの）が優先的に反映されます。
同じ記述が複数重複するのは問題ないですが、反映されるのは後から書いたものです。
.entry-content p {
font-size:16px;
}
.box {
margin:20px 0;
}
.entry-content p {
font-size:12px;
}
「.entry-content p」の「font-size（文字の大きさ）」が２回記述されてますが、反映されるのは後から書いた「12px」の方です。
なので基本的にCSSを記述する場合はCSSの一番下（最後）に追加して行けばOKです。
一番下に追加してみてCSSが反映されないならそれはその記述、もしくはそれ以前の記述にミスがある可能性があります。
３．ブラウザにキャッシュが残っていて反映されない場合と対処方法
ブラウザにキャッシュ（以前のデータ）が残っているためにCSSが反映されない事があります。
キャッシュを消したりする前にまずはリロード（再読込み）して確認してみます。
- Windowsの場合：[F5]キーを押す。
- Macの場合：[Command]キーと[R]を押す。
これでリロード（再読み込み）をする事ができるので試してみて下さい。また、それでも反映されない場合は次の手順も試します。
- Windowsの場合：「Ctrl」と一緒に「F5」を押す。
- Macの場合：「Command」と「Shift」と「R」を一緒に押す。
こっちは強制再読み込み（スパーリロード）。
リロードしても上手く反映されない場合は一度別のブラウザで確認するか、別の端末（スマホ・タブレット・PC）で確認してみて下さい。
別のブラウザや端末でCSSが反映されているならブラウザのキャッシュが原因と思われます。
キャシュの消し方はブラウザによって違うので検索して調べてみて下さい。
４．別のコードが優先されていてCSSが反映されない
スタイルシート（CSS）で変更しても優先度が上の要素の影響を受けて変更が反映されない場合があります。
セレクタを詳しく指定した方が優先順位が高くなりますが、セレクタって何？という方が多いと思いますので、変更した記述に「!important」を付けてみて下さい。
●● {
margin-right:0px !important;
}
こんな感じで、優先したい部分に「!important」を付けるとそれが優先されます。
「!important」つけて反映されない場合はやはりCSSの記述ミスを疑います。
他の方のサイトのコードをコピペしている場合などはそもそものコードが間違っている事もあります（私も時々あります）。
WordPressのスタイルシート（CSS）で「×」マークがでる場合の対処方法
WordPressのスタイルシートはエラーチェック機能が装備されているので、「！」とか「×」マークで間違いをお知らせしてくれます。
「！」マークは特に問題なくても表示される場合がありますが、「×」が出る部分は修正する必要がありますので、上記に書いた原因と対処を試してみて下さい。
特に問題ないと思っても上記のように「×」マークが表示される場合は次の事を試してみて下さい。
- 全角のスペースを半角のスペースに変更
- コメントアウトの部分を削除
全角スペースになっている部分を半角に変更
先程も書いたのですがスペース部分が全角になっている場合があります。
例）「font-size」の前の部分に全角のスペースを半角のスペースに変更。
コメントアウト前後のスペースを削除してみる
/*〜*/の間に書かれた部分は「コメントアウト」。要はCSSの記述に自分なりのメモを残す事ができます。
このコメントが原因でなぜか「×」マークが付いている時がありますのがこれもコメントアウト前後のスペースが原因の事が多いです。
コメントアウト前後のスペースを削除してみるか一度コメントアウトの部分を削除ｓて「×」が消えるか確認してみて下さい。
以上スタイルシート（CSS）が反映されない原因と対処方法でした。
なお、コメント自体は大歓迎ですが、最近はホントに時間のある時だけしかコメントの返信できてませんのでご了承下さいませ。
コメント
のりこ様
返信ありがとうございます。見出しがテキストっていうのは多分見出しとは別に「h3」とかがテキストとして表示させるか？という事だと思います（違ったらすみません！）。これは表示されませんので大丈夫です。あくまで装飾されていない状態というだけで、見出しとしては認識されます。
しげぞうさま
お返事ありがとうございます。
やはり無料ブログサービスの場合、カスタマイズするのに面倒な面というか、複雑な面があるのですね…。
装飾せずに、見出しをつける場合は、投稿するときにテキストでつくのでしょうか？
なんだか頭がフリーズして、何を質問してるのかも分からなくなっています( ω-、)
すいません…。ありがとうございました。
のりこ様
返信ありがとうございます。のりこ様の言われるようにスマホのデザインは別になってます。デザイン⇒スマートフォンのタブを選択⇒デザイン設定⇒デザイン名と進むとスマホの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でやってしまうと関連記事のタイトルとかにも影響するかと思います。これはちょっとやりずらいです。
しげぞうさま
以前に、自由形式の設置で質問した者です。
その節は、お世話になりありがとうございました。
今回は、見出しの挿入をしたく質問します。
設置についての流れは理解できましたが、スマホから見ると見出しの装飾が反映されません。
カスタマイズする歳に、PCとスマホは別なのはわかるのですが、スマホ表示で見出しを反映させるには、どのようにすればよいのでしょうか？
こちらのサイト内でさがしてみたのですが、見つけられませんでした。
お時間のございますときにでも、教えていただけると助かります。
よろしくお願いします。
カラス様
返信ありがとうございます。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にあるので、一度ブログを削除してやり直すべきか悩んでいます。