CSSのトラブルシューティング

フォーム用にカスタムCSSを作成したのに、サイト表示時にそのスタイルが表示されないことはありませんか？CSS がサイトに正しく表示されない原因には、いくつかの一般的な問題があります。

このチュートリアルでは、CSSが機能しない原因のトラブルシューティングと、考えられる解決策について説明します。

---

ブラウザ・キャッシング

ブラウザは、読み込み速度を向上させるために、アクセスしたウェブサイトのリソースをキャッシュしたり、一時的に保存したりすることがよくあります。また、プラグインを使用してキャッシュを追加するサイトもあります。サイト上にカスタムスタイルが表示されないのは、ブラウザやその他のシステムが古いバージョンのサイトをキャッシュしているためです。

ここでは、サイトとプラグインのキャッシュをクリアするための主な手順を説明するチュートリアルです。

ブラウザのキャッシュをクリアしても効果がないようなら、以下の追加戦略を試してみよう：

別のブラウザを試す

各ブラウザは、アクセスしたサイトのキャッシュを保持します。別のブラウザ（またはChromeのシークレット・ウィンドウなど、一部のブラウザが提供するプライベート・モード）でサイトを開くと、多くの場合、キャッシュされていないバージョンのサイトを見ることができます。

ホストにキャッシュの有無を尋ねる

ホストの中には、あなたのサイトのファイルが保存されているサーバー上であなたのサイトのキャッシュを提供しているところもあります。よくわからない場合は、ホストに連絡して、あなたのサイトをキャッシュしているかどうか尋ね、キャッシュしている場合は、そのキャッシュをクリアするように依頼するとよいでしょう。

別のインターネット・ソースを試す

別のインターネット・ソースからサイトを読み込むだけで、既存のキャッシュをバイパスできる場合があります。データ通信が可能なモバイル・デバイスをお持ちの場合、最も簡単な方法は、デバイスのWiFiを一時的にオフにしてページを再読み込みすることです。

無効なCSSフォーマット

CSSは、ブラウザが理解できるように特定の形式で記述する必要があります。W3SchoolのCSS Validatorをはじめ、あなたのCSSが有効かどうかをチェックするオンラインツールはたくさんあります。カスタムCSSが多く、少なくともCSSを作成した経験が少しでもあるなら、これは優れたオプションです。

しかし、少量のCSSしか使用していない場合は、自分で簡単な書式チェックを行う方が簡単な場合もあります。まずは、有効なCSSのスニペットを見てみましょう：

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

このCSSがなぜ有効なのか、あるいはブラウザが「読める」のか、その理由を説明しよう：

• 正しいセレクターのフォーマット： セレクタが複数の部分を含む場合は、「最大」から「最小」まで記述する必要がある。上の例では div.wpforms-container-full はHTMLの中で最大のコンテナ要素である。 .wpforms-form はそのコンテナの中にある。セレクタの最小で最後の項目、 .wpforms-titleは、これら両方の要素の中に含まれています。それ以外の順序では、ブラウザはこのセレクタを読み取ることができません。
• Two brackets: There must be an opening curly bracket ({) right after the CSS selector and at the end of the property and value list. Forgetting that closing bracket (}) is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
• コロンとセミコロン： ブラウザがCSSを読めるように、すべてのCSSプロパティと値の間にはコロン（:）を、すべての値の後にはセミコロン（;）を必ず入れてください（例）、 font-size: 26px;).
• 空白の正しい使い方： ほとんどの場合、CSSは空白（タブやスペースを含む）にあまりこだわりません。ただし、単位の場合は例外です。 26px は機能するが、例えば 26 px そうではないだろう。

適切な構文でCSSを記述する方法については、W3Schoolsのチュートリアルを参照してください。

CSSの特異性

すべてのテーマとほとんどのプラグインには独自のスタイル・セットが含まれているため、カスタム・スタイルが既存のスタイルと「競合」しなければならないことがよくあります。そのような状況では、より具体的なCSSセレクタの方が、より具体的でないセレクタよりも勝ることがほとんどです。

例えば、WPFormsのフォームタイトルのフォントサイズを設定するデフォルトのCSSは以下の通りです：

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
}

そのCSSを上書きして、フォントを大きくしてみよう。このような短いCSSセレクタを使いたくなるかもしれない：

.wpforms-title {
    font-size: 40px;
}

そのCSSは有効ですが、そのスタイルはブラウザに反映されません。代わりにデフォルトのスタイルが適用されます。その代わりに、カスタムCSSのデフォルトスタイルと同じ、より長いセレクタを使用する必要があります：

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 40px;
}

CSSで!

状況によっては、CSSの特定のスニペットに !important ルールをセミコロンの前に追加してください。より具体的なセレクタ（上記のような）を最初に試してみるのが常にベターですが、これですぐに解決できることもあります。

しかし、注意しなければならないのは !important ルールが常に機能するとは限りません。前回の例で説明したCSSについて、この方法を試してみよう：

.wpforms-title {
    font-size: 40px !important;
}

このような状況では、ブラウザはデフォルトのCSSの特異性を !important ルールが適用されるため、このCSSはあなたのサイトには適用されません。

を追加する例を見てみよう。 !important ルール する の作業。デフォルトでは、WPFormsの'必須'フィールドを示すアスタリスク(*)は赤くなります：

以下は、そのスタイルを作成するCSSです (#ff0000 は赤を表す16進コード）：

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

このアスタリスクを青く表示させたい。上のCSSから完全なセレクタをコピーしてもいいし、短いセレクタを使って !important ルールに従います：

.wpforms-required-label {
    color: #007acc !important;
}

を知るのは難しいかもしれない。 !important ルールは機能するので、試してみる必要があるだろう。

以上です！CSSがうまく動作しない場合に使用する、最も一般的なトラブルシューティングの方法を説明しました。もしまだ WPForms のスタイル設定に問題があるようでしたら、サポートまでご連絡ください。

次に、フォームをさらにカスタマイズしたいですか？個々のフォームフィールドのカスタマイズに関するチュートリアルの詳細と例をご覧ください。