WordPressテーマ変更!SimplicityからCocoonへ

CSSが効かない原因!反映させるため、ブログ初心者さんが確認する7つのこと

スポンサーリンク

反映していたCSSが突然、反映しなくなった原因はホントに沢山あります。編集後のコードの消し忘れや消しすぎなどが原因です。コメントアウトのミス、CSSの構文があっているかなどを書いていきます。このほか基本的な事で確認するのは下記4つ。

  1. キャッシュを削除するか、シークレット(プライベート)ウィンドウでキャッシュが残っていない状態で確認

キャッシュとシークレットモードの説明は下記リンク先に書いてます。

LINKカスタマイズ時キャッシュの削除よりワンクリでシークレットモード!Chrome拡張機能「Incognito This!」

上記リンク先の見出し『キャッシュを削除する』(Chromeの場合)方法なども参考にどうぞ。

  1. スマホやPCのみに反映するメディアクエリの中に書いてないか
  2. セレクタの指定方法が間違ってないか
  3. CSSの優先順位が低いからではないか

他CSSが反映されないとき、意外な落とし穴がコメントアウト。あとCSSの構文があってない。もう1つブラウザのキャッシュも削除したのに、反映しない原因に書いてるとおりです。それぞれ説明を見て確認すると反映するので、チェックしてくださいね^^

原因を確認してCSSを反映させよう:タマゴのデコレーション

スポンサーリンク
スポンサーリンク

突然CSSが反映されなくなった原因、コメントアウト編

CSSのコメントアウトとは、反映させたくないコードを消さずにコメント化したり、メモとしてスタイルシートに/*ほげほげ*/を書いてコメントにしたりして使います。変な文字が入ると場合によって、CSSが反映しなくなるから、コメントアウトする感じですね。

下記コードでは1行目と、2~4行目の記載が、コメントアウトしたものです。

/*h2のフォントサイズ変更*/
/*h2 {
	font-size: 22px;
}*/
h2 {
	font-size: 20px;
}

/*から*/の間にスタイルを指定してるとき、一見コメントアウトしてないように見えても、ず~っと上・ずっと下にこの記載があれば、その間のコードは反映しません。

コメントアウトが途切れている場合も装飾が反映しないので、見てみましょう❦

コメントアウトが途切れて、装飾が反映されてないか確認

コメントアウトが途切れると言えば、コメントの中にコメントがある場合!

/*h2 {
	font-size: 22px;
	margin: 48px -5px 24px;
	position: relative;
	border-bottom: 1.5px solid #D0A8F5;
	position: relative;
	background: #ffe7fc;
	line-height: 30px;
	border: 1px dashed #D0A8F5;
	border-radius: 5px;/* 角丸 */
	box-shadow: 5px -5px 20px 0 #FFD5FA inset;
	margin-bottom: 30px;
	padding: 1.2em 0.4em 0.6em 1.8em;	
}*/

10行目に/* 角丸 */というコメント。最初/*と最後*/で全てコメント化させたはずなのに、実はコメントは10行目で途切れてしまって、以降のコードがむき出しになります。

コメントアウト後、10行目で途切れてる

10行目/* 角丸 */のコメントまでがコメント!と、CSSはとらえるワケですね。

コメントアウト前のCSSで比較

コメントアウトの閉じ忘れをチェック

コメントアウトの閉じ忘れは、コメント開始/*は書いたのに、終了*/の書きわすれ・編集時に気付かず消しちゃったとき。CSSが反映しない原因になります。

コメントの閉じ忘れで下のCSSが消えた例

h2のコメント開始マーク/*から、次のコメントアウトまで、このように全て消えます。

h2・3・4・5・6タグまでのスタイルが消えた例え

そのため編集後、触った覚えのない箇所のスタイルが反映されない。。まさに、なんで?となるのは、CSSは開始マーク/*から閉じるマーク*/を探し、見つけたところまでコメントにする言語。そういうイキモノ!っとでも、思ってください❦

閉じ忘れと同時に、次のパターンも注意して確認してください。

コメントの閉じ間違い

/*コメント*/部分が間違っていると、次のコメントアウトまでのCSSが全部反映されません。

たとえば閉じるマーク*/スペースが入ったとき* /や、閉じたつもり*/開始/*になってるなど。

コメントの始まりは反映されたまま、終わり間違ってるコメントとして成立しないので上記と同じ、次の閉じる*/までコメント扱いになりCSSが反映しません。

コメントアウトの書き方もチェックしてくださいね。

コメントアウトの間違いがないか、楽に確認する3つの方法

コメントアウトがキチン出来てるか目視で確認するのは、コメント部分が緑など色分けされてなければ大変です。

  1. コメントにカラーが付いてるエディタを導入
  2. PCから要素の検証からコメントの色が付いたCSSを見る
  3. CSS検証サービスを使う

などすれば楽に確認できるので、環境によってやりやすい方法を選んでください^^

エディタを導入して確認する

環境にあったテキストエディタを導入したら、コメントアウトが外れてしまったのを簡単に確認できます。

テキストエディタAtom

テキストエディタAtomのコメントアウト例

テキストエディタで見たら、装飾したいh2が消えて、11行目から14行目だけコメント化されてない文字になってます。もしエディタを導入してないのであれば、TeraPadは初心者向けで扱いやすいです。

LINKTeraPadのダウンロード

エディタを導入したらTeraPadを開いて、あなたが書いたCSSスタイルシートを全選択コピーして、TeraPadに貼り付けます。メニューにある表示をクリックし、編集モードCSSに変更してください。

TeraPadコメントアウトの色付け操作画面

そうすれば、コメントアウトが緑になり分かりやすいので、おかしなコメントアウトがないか、確認しやすくなります。

パソコンからブラウザの要素の検証を使って確認

PCからキーボードのF12キーをつかって、要素の検証画面からCSSを表示して確認したら、色分けされて分かりやすいです。Chromeでしたら、F12を押して画像1の矢印マークが青い状態で、あなたが装飾したものをクリック画像2。

Chrome要素の検証画面の説明

画像3その装飾されたCSSを選択する。リンクを装飾していれば、a { hoge: yotto; }であなたの装飾したstyle.cssをクリックしたら、スタイルシートが表示され便利です❦

GoogleChromeでのその他使い方の説明は下記リンクをどうぞ。

LINK要素の検証の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編

W3CのCSS検証サービスを使う

CSS検証サービスを使ってみるの方法もありますが、初心者的にちょっと難しく感じる記載がいっぱい出てきますけど、頑張れば、おかしな記載を教えてくれます。!

  • ブログのURLを指定して全てのCSSを検証する方法
  • PC上にCSSファイルのバックアップファイルを選んでアップロードする方法
  • あなたが書いたCSSや使っているCSSを貼り付けて検証する直接入力

あった方法で試してくださいね。※ばあいによって、難しい言葉もたくさん出るかも!?ですが、分かる範囲を直していくと、改善されますよ。

LINKW3C CSS 検証サービス

CSSの構文を間違って更新したら、反映しない

CSSの構文が間違ってるから、反映しない場合です。※反映するときもある。構文っていうと難しく感じるけど、下記のよう、かなりシンプルに考えてください。

htmlのどこ場所の 何を: どうする} この赤字が基本的なCSSの構文で、CSSにすればこんな感じ。

h2 {
	font-size: 22px;	
}
翻訳したら、h2タグの { フォントサイズを: 22pxにする}
  1. 装飾したいものh2{ ←半角始まりカッコ この装飾の始まり
  2. フォントサイズを: ←半角コロン 決まり文句
  3. 22pxにする; ←半角セミコロン 決まり文句
  4. } ←半角閉じカッコ この装飾の終わり

半角のマークはピンクの説明で、構文です。赤文字の部分をCSSの言葉で言えば、下。

  • h2』にあたるのはセレクタ
  • 『何を』のfont-sizeは、プロパティ
  • 『どうする』の22pxを、
  • セレクタ { プロパティ:; }
  • コレが構文の形

上のシンプルなCSSh2 { font-size: 22px; }この、シンプルなHTMLタグが下。

<h2>h2タグに囲まれた、このフォントサイズは、22pxになる</h2>

h2のHTMLタグに囲まれたモノを、セレクタを指定してプロパティ装飾を増やしてスタイルを決める感じ。

h2 {
	font-size: 22px;
	margin: 48px -5px 24px;	
}

そのときに構文の形は必須で、(キホン)半角で書く!って思ったら、良くできましたの『花丸を贈呈したい』ほどキホンの構文を攻略完了です❦

HTMLとCSSはセットで見るとわかりやすいので、HTMLとは?から書いたCSSのセレクタを説明したページを、分かりにくい場合どうぞ。

LINK初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?

編集時に{:;}を消してしまってないか

上で書いた構文、CSSの始まりを示す{、終わりを示す}が無ければ、どこまで反映させたらいいか、CSSが理解できないです。

ポイント

それを消しちゃった場所によっては、強烈にブログの装飾が大きくかわってきます。セレクタを反映させる為のCSSの宣言である半角カッコが外れてないかをチェックしてください。

:;これらも状況によって、支障が出るばあいもあるので、間違いないかチェックしてくださいね。

文字や記号など、入ってないか確認

おかしな場所に、文字や記号など入ると、HTMLタグの装飾したい場所を示すCSSの指定が成立しなくなったり、他の装飾に影響してスタイルの反映の仕方が、おかしなくなるパターンもあるんです。

  • セレクタ・プロパティ・値の前後やナカに文字が入っていると完全アウト!
  • CSSが全く効かない例:h2 { font-size: 22px; }
  • 装飾がおかしくなる例:h2 { font-size: 22px; }

おかしな文字が入ってないかをみて、CSSの構文通りになってるか確認してください。

CSSを指定の文字が間違っている。

スタイルシートを触って編集したとき、まちがって一文字 消してしまっても同じで、その部分は反映しません。

装飾したい場所を指定するセレクタが消えたら、その装飾は全部反映せず、CSSサイドからみたら、おかしな構文・おかしな文字。って事でブログの表示が崩れるってか、変になります。

プロパティや値のツヅリを間違っても反映しませんねっ。1が正解。2は反映しない。だって…ツヅリが違ってr(´・ω:;….::;.:. :::;..

  1. font-size: 22px;
  2. font-saiz: 22py;

指定した文字も、指定先も間違っていれば反映されません。

ポイント

CSSの優先順位が最強になる!importantを付けたものをCSSの一番下などに書いても反映しない場合、指定したCSSの文字か指定先(方法)が間違ってる可能性が、かなり高いです。

親要素を見てセレクタの指定先を正しいものにすれば反映しますよ。CSSの初心者のハードルでもありますけどねっ><

これら。ちいさな間違いや凡ミスでCSSが反映しない場合を紹介しました。

キャッシュを削除したのに、まだ反映しない原因

キャッシュを削除して、上記を確認しても反映しない原因は、プラグインや一部サーバーで使用している『キャッシュ』が原因です。

キャッシュはブラウザだけではなく、使用しているプラグイン側で古い情報を表示している場合があるので、プラグインのキャッシュを削除するなど対応してくださいね^^

※表示スピードを考慮したプラグインを入れているなら、チェックしてくださいね^^

まとめ

コメントアウトやCSSの構文などの間違いは、間違った場所などによっては、表示がイキナリおかしくなります。それらの原因のザックリした解消法は下記のとおり。

  • コードなど、半角で書かれているか
    • コメントの開始と終了が間違ってないか
    • CSSの{:;}マークが抜けてないか
    • 間違った構文になってないか
    • 変な文字が入りこんでないか
    • コードの一部が消えてないか、など

CSSの構文が間違ってるときは上述したLINKW3C CSS 検証サービス、間違いを教えてくれるオススメです!※ベンダープレフィックスが付いててもオカシイ。と言われますが、W3Cの規格にあってないって事だったり、色々あるので割愛します。

これと初めにお話ししたリンク先の確認。

またCSSの読み込み順で、head内にあるlinkタグの順番が親テーマと子テーマが逆になってたら、どんなに書いても子テーマに、ほぼ反映されなかったりもします。

これを確認すれば、99.9%以上は反映します!

 

さいごに

数えきれないほどCSSが反映されない原因があるなか、冒頭からまとめ直前までのパターンが濃厚ですね。

どうしても分からないときは、ツイッターやFBで困ったよぉ><。。って言ったら、それを見つけた優しい人が手伝ってくれるかもしれません。

今より初心者の頃、これがわからず時間ばかりを費やしてしまったので、これらを確認すればかなり時短になるはずです❦

これでうまく直って舞い上がりたい気分のとき、シェアで教えてもらえたら、一緒に喜び舞いあがって喜びますよぉ~。まだその気持ちは分かるはず!?ですからぁ^^

それでは、かうたっくでした。

コメント

  1. おのりん より:

    初めまして、お忙しい所大変申し訳ないのですがお力を貸していただきたくご連絡させていただきました。

    ワードプレスのSimplicity2を使用し、WPtouch Mobile Pluginを使用しモバイルに対応しておりますが、見出しのデザインだけが反映されません。

    自分なりに色々調べて、style.cssの見出しの部分をコビーし、mobile.css
    に張り付けてみたり、キャッシュを削除してみたりと試行錯誤をしてみましたが、一向に改善されず途方に暮れております。

    style.cssはこのようになっておりますが、どこか問題があるのでしょうか?

    @charset “UTF-8”;

    /*!
    Theme Name: Simplicity2 child
    Template: simplicity2
    Version: 20161002
    */

    /* Simplicity子テーマ用のスタイルを書く */

    /* Table of Contents Plusを中央に表示させる */
    #toc_container {
    margin-left: auto;
    margin-right: auto;
    }

    h2#danraku2{padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    color: #494949;/*文字色*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 5px #3498db;/*左線*/
    border-bottom: solid 3px #d7d7d7;/*下線*/}

    h3#danraku3{padding-bottom: .5em;
    border-bottom: 1px solid #3498db;}

    h4#danraku4{padding: .25em 0 .25em .75em;
    border-left: 6px solid #3498db;}

    /* facebookボタンを非表示に */
    #content .socialSet .sb_facebook { display:none; }

    /* hatenaボタンを非表示に */
    #content .socialSet .sb_hatena { display:none; }

    /* twitterボタンを非表示に */
    #content .socialSet .sb_twitter { display:none; }

    /* googleボタンを非表示に */
    #content .socialSet .sb_google { display:none; }

    /* lineボタンを非表示に */
    #content .socialSet .sb_line { display:none; }

    /* pocketボタンを非表示に */
    #content .socialSet .sb_pocket { display:none; }

    /* サイト全体 */
    body {
    font-size: 14px;
    font-size: 1rem;
    font-family: ‘ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, ‘メイリオ’, Meiryo, Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: #333;
    }

    /* 記事本文の文字 */
    .entry-content {
    font-size: 16px;
    font-size: 1.14285714rem;
    }

    #related-entries {
    display: none;
    }

    本当にお忙しいとは思いますが、改善点がありましたら教えていただけないでしょうか。

    どうぞ宜しくお願い致します。

  2. おのりんさん、こんにちは。はじめまして^^

    見出し実際のページを見てないので、ザックリとしか言えませんが、以下の通りです。

    見出しのデザインだけが反映されません。

    CSSの感じからして『記事内にある見出し』、例えばすべてのh2タグは同じHTMLタグ<h2 id="danraku2">h2タグ</h2>が入っていると想定して、返信させていただきますね。

    style.cssの見出しの部分をコビーし、mobile.css
    に張り付けてみたり

    Simplicityは設定によって読み込むファイルが違ったりします。

    管理画面の『外観』-『カスタマイズ』より『レイアウト(全体・リスト)』を選択した場所にある『完全レスポンシブ表示を有効』に

    • チェックが入ってないならSimplicity2 child: mobile.cssに貼り付ければスタイルが反映。

    チェックが入っていれば、mobile.cssは読み込まないのでresponsive.cssに追記する感じです。

    ワードプレスのSimplicity2を使用し、WPtouch Mobile Pluginを使用しモバイルに対応しておりますが、見出しのデザインだけが反映されません。

    WPtouch Mobile Pluginがどのようなものかは不明ですが、スマホ・PCビューのHTMLタグは同じですか?※テーマのHTMLタグ書き変わってしまうなどあるのか?不明ですが『変わらない』と仮定しますね。

    CSSを見る限り、例えばh2タグは<h2 id="danraku2">h2タグ</h2>とスマホ・PCビューで指定があれば反映する書きかたです。

    Simplicity2で通常反映するCSSは、以下の通りで子テーマstyle.cssに追記すれば反映します。

    .article h2 {
    	padding: 0.4em 0.5em; /*文字の上下 左右の余白*/
    	color: #494949; /*文字色*/
    	background: #f4f4f4; /*背景色*/
    	border-left: solid 5px #3498db; /*左線*/
    	border-bottom: solid 3px #d7d7d7; /*下線*/
    }
    
    .article h3 {
    	padding-bottom: 0.5em;
    	border-bottom: 1px solid #3498db;
    }
    
    .article h4 {
    	padding: 0.25em 0 0.25em 0.75em;
    	border-left: 6px solid #3498db;
    }

    全てのh2タグが<h2 id="danraku2">h2タグ</h2>となっていてもそれで反映する書きかたです。※この場合同じスタイルを書いているのでh2#danraku2 { }など、これら見出しの記載は不要になります。

    実際のページ状況を見てないので(キャッシュ系プラグイン・サーバーのキャッシュ状態・cloudframeなど高速化の有無、スマホビューのタグはどんなものか、ほかご自身でカスタマイズを行われているか…など不明で)、解決できるか分かりませんが・・・。解決できることを祈ってます❦

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る