WordPressにカスタムCSSクラスを追加する方法（3つの簡単な方法）

CSSを知っている人は、CSSクラスがサイト全体をスタイリングするときに大規模なタイムセーバーであることを知っています。しかし、コードしなければ、それらがどれほど強力であるかを理解したことがないかもしれません。今日、私たちはそれを変えます。

この投稿では、CSSクラスをWordPressに追加する3つの簡単な方法を紹介します。たとえ単一のコードを書いたことがなかったとしても。また、強力なWordPress WebサイトビルダーであるDiviを使用して、ノーコードの方法でそれを行う方法も学びます。

CSSクラスとは何ですか、そしてそれらはどのように役立ちますか？

CSS（カスケードスタイルシート）は、ウェブサイト上の色、間隔、フォントなどの要素の設計と外観を制御するコードです。 CSSクラスは、複数の要素に割り当てる再利用可能なラベルであるため、各要素に対して同じプロセスを繰り返す代わりに、一度にスタイルをスタイリングできます。

CSSクラスがなければ、特に複数のページを持つより大きなWordPressサイトで作業する場合、各要素を手動でスタイリングする必要があります。しかし、多くの場合、ほとんどの場合、ほとんどのWebサイトには、価格設定ページのボタンやさまざまなセクションの機能ボックスなど、繰り返し要素やモチーフが含まれます。

これらの要素は、バックエンドで同じクラスグループを共有するため、似ています。したがって、CSSを共通のクラスグループの1つの要素に適用すると、そのすべての要素が自動的に同じスタイル設定を継承します。フロントエンドでは、視覚的に似た外観を与えます。 CSSクラスは、各要素を1つずつ変更するのではなく、クラスを更新するだけであるため、時間を節約し、デザインの一貫性を保ち、将来の編集を簡単にします。

WordPressにCSSクラスを追加する方法

CSSを使用する習熟度に応じて、CSSクラスを複数の方法でWordPress Webサイトに追加できます。 WordPress CustomizerとSimple Custom CSSのようなプラグインを使用してそれを行う方法を紹介しますが、これらの方法はどちらもCSSを記述する必要があります。

ノーコード方法にもっと興味がある場合は、3番目の方法にスキップします。

1。WordPressカスタマイザーの使用

WordPressページには複数のボタンがあるとしましょう。彼らは現在、プレーンに見え、あなたは彼らが目立つようにしたいので、あなたは海軍の青い境界とスカイブルーの背景を追加する予定です。

各ボタンにCSSを追加するには、プロセスを8回繰り返す必要があるため、かなりの時間がかかります。ただし、CSSクラスでは、同じCSSクラスを各ボタンに割り当てて、CSSを1回だけ書き込むことができます。 CSSクラスの「 Custom-A」という名前を付けましょう。 WordPressページエディターウィンドウで、[任意のボタン]> [設定] （ギアアイコン）をクリックして、[高度なオプション]を切り取ってください。次に、追加のCSSクラスにクラス名を書きます。

各ボタンのプロセスを繰り返して保存します。これらのボタンにスタイリングコードを追加するには、 WordPressカスタマイザー>追加のCSSに移動する必要があります。

Border Navy BlueとBackground Sky Blueを作るには、ここでCSSを貼り付けます。

選択したCSSクラス名は、コードのスタイリングルールの前に来ることに注意してください。これにより、このクラス名が割り当てられているすべての要素にコードが適用されるようになります。

公開してプレビューした後、スタイルのボタンは次のようになります。

CSSを知っていれば、それは簡単です。

WordPressカスタマイザーは、軽微な変更を加えるのに最適です。ただし、問題は、そこに追加されたCSSがテーマに結び付けられていることです。つまり、テーマを切り替えると失われる可能性があります。そのため、ウェブサイトでさまざまなテーマをテストするのが好きな場合は、別のテーマに切り替えるたびにコードを更新する必要がありますが、これは楽しくありません。その場合、CSSクラスのスタイルを安全に保つためにプラグインをインストールする方がはるかに良い選択肢です。

2。シンプルなカスタムCSSのようなプラグインを使用します

Simple Custom CSSプラグインをインストールすると、カスタムCSSオプションが表示セクションに追加されます。これで、CSSコードを追加し、変更を反映するためにカスタムCSSを更新するだけです。 （一般的なスタイルを持ちたい要素にクラス名を割り当てる必要があります。）

このようなプラグインは、後でテーマを変更しても、カスタムCSSをそのままにしておきます。また、WordPressカスタマイザーよりも少し整理されています。ただし、Webサイト全体の複数の要素グループにカスタムCSSを保存すると、簡単に乱雑になる可能性があるため、両方の方法がスケーラブルではありません。

そのため、サイト全体のスタイリングの場合、推奨されるアプローチは、子テーマを作成し、スタイルシートを更新することです。これにより、テーマの更新後でも、すべての変更が子供のテーマで安全に保たれます。

効果的です（およびコーダーが推奨しています）が、この方法はまだ手動での作業が必要であるため、迅速に技術的になる可能性があります。各要素（またはCSSクラスを使用して複数の要素）をスタイリングする必要があります。これは、時間がかかり、初心者向けではありません。また、クラス名を追跡する必要があります。特定のボタンクラスを編集したいと想像してください。コードの無限の文字列をスクロールしています。

では、単一のコードを書くことなくスタイリングをスケーリングできたらどうでしょうか？それは、Diviのようなモダンなドラッグアンドドロップページビルダーが入ってくる場所です。

3. DiviのようなノーコードWebサイトビルダーの使用

Diviのような最新のノーコードWebサイトビルダーを使用することの美しさは、サイト全体に一貫したスタイルを適用するためにCSS（または任意のコード）を書く必要がないことです。ビジュアルインターフェイスを使用すると、設計設定を選択およびカスタマイズするだけで、セクション、行、列、モジュールにスタイルを割り当てることができます。

DIVIでは、CSSクラスの代わりにプリセットを作成します。 Diviは何年もの間、ボタン、ぼやけ、画像などのモジュールのスタイルを保存および再利用できるモジュールベースのプリセットを提供していました。しかし、私たちはさらに驚くべきものを発売しました。オプショングループプリセットで、さらに進むことができます。

オプショングループプリセットの前に、モジュールにプリセットを適用することのみが許可されていました。たとえば、宣伝文句プリセットは別の宣伝文句でのみ使用できます。これで、モジュール間で設定を共有することもできます。

1つの要素を一度にカスタマイズする代わりに、オプショングループプリセットを使用すると、背景、境界線、テキストスタイルなどの共有設定のスタイルを保存し、複数の異なる要素に一度に適用できます。たとえば、セクションと列の両方が背景色を使用する場合、そのスタイル設定をプリセットとして保存し、関連するすべての要素に適用して、まとまりのあるデザインを作成できます。

Diviは、コーディングなしでドラッグアンドドロップ機能を介して、建物と保存スタイルをプリセットとして簡素化し、特に非コーダーの場合、サイト全体のデザインの変更をより速く、よりアクセスしやすくします。

Divi 5をダウンロードします

以下で私が意味することをもっと詳しく見てみましょう

Diviのオプショングループプリセットにより、CSSクラスの追加が簡単になります

Diviのオプショングループプリセットは、CSSクラスの概念を取り、非コーダーのために簡素化します。クラスを手動で書き込んで割り当てる代わりに、Diviのビジュアルビルダーを使用して、わずか数回クリックしてさまざまな要素に共有デザインスタイルを適用できます。

これらのプリセットは、オプションレベルで機能します。つまり、複数の要素タイプで共有される背景色、境界、または間隔などの特定の設計設定をターゲットにします。したがって、たとえば、セクションの背景設定は、列、行、さらにはテキスト要素にも適用できます。

ウェブサイトの設計を一貫性に保つためのより速く、より簡単で、より直感的な方法です。方法は次のとおりです。

• 要素全体の再利用可能なスタイル：すべての要素を手動でカスタマイズする必要はありません。オプショングループスタイルをプリセットとして保存し、任意の要素に適用します。
• 単一の編集を使用したグローバル更新：プリセットを1回変更し、そのプリセットを使用するすべての要素が自動的に更新されます。これにより、Webサイト全体で設計調整が迅速かつ効率的になります。
• 複数のプリセットを組み合わせます：レイヤーと、ゼロから開始することなく、柔軟で創造的なデザインの組み合わせの要素に、さまざまなプリセット（境界、影、テキストスタイルなど）を混合します。
• ベーススタイルのデフォルトプリセットのカスタマイズ：デフォルトとしてプリセットを保存して、関連するすべての要素に自動的に適用します。

オプショングループプリセットの詳細をご覧ください

Diviを使用してCSSクラスをコーディングせずにWordPressに追加する方法

Diviのオプショングループプリセットとは何かを知っており、彼らと一緒に作業するためにコーディングを知る必要がないことを知ったので、Diviビルダー内でそれが正確に機能する方法を示したかったのです。グループプリセットを作成、保存、および適用するために必要なことは、背景、境界線、ボックスシャドウなどのオプション設定に適用します。例として、価格設定ページをカスタマイズしましょう。

ボタンの背景を変更します

ページの色に合わせてボタンの背景を紫に変更したいとします。そこで、最初の列のボタンをカスタマイズして、プライマリライトボタンプリセットとして設定を保存します。 （UI設定の黒い色は、設定プリセットを編集していることを示しています。ダークモードを選択した場合、それは反対になります。）

次に、他の2つのボタンに同じ設定を適用するために、ボタンプリセットをプライマリライトに変更するだけです。

列の影を変更します

すべての列にボックスシャドウを追加しましょう。最初の列にボックスシャドウを追加し、シャドウボックスシャドウプリセットとして保存します。

他の2つの列に同じ影を適用するには、ボックスシャドウプリセットをシャドウに変更するだけです。

テキストプリセットの変更

また、H1やH2Sなどのテキスト要素のスタイルを変更することもできます。列H3プリセットがどのように機能するかは次のとおりです。

保存後、価格設定ページの外観は次のとおりです。

私はそれがどのように機能するかを示すために小さな変更を加えましたが、あなたは可能性を想像することができます。 Diviのオプショングループプリセットを使用すると、グループのカスタムスタイルを編集することは、ボタンをクリックするのと同じくらい簡単です。しかし、それは氷山の一角にすぎません。あなたもできます：

• オプショングループのデフォルトプリセットを設定して、見出しやボタンなどのベース要素がサイト全体でスタイリングを自動的に継承します。デフォルトのプリセットがどのように機能するかを理解したら、古い方法の使用に戻ることはありません。
• レイヤーオプショングループプリセットの上にあるプリセットの上にあるプリセットは、共有された背景を適用してから、特定の要素を際立たせるために影やボーダースタイルを積み重ねるなど、強調を追加します。

Diviのオプショングループプリセットについて知っておくべきすべてのガイドを作成しました。完全な記事を読んで、DIVIを使用してクラスベースのWebデザインを簡素化する方法に関するデザインのアイデアとアドバイスを入手してください。

オプショングループプリセットの詳細をご覧ください

Diviは、クラスベースの設計システムのゲームチェンジャーです

Diviのオプショングループプリセットは、CSSクラスのパワーをすべての人にもたらします。ソロをデザインしている場合でも、チームとのコラボレーションでも、ワークフローをプリセットでスピードアップし、サイトが成長するにつれて美しくスケーリングし、一貫したスタイリングを楽​​にします。それらは、従来のCSSワークフローよりも速く、効率的で、はるかに直感的です。

今日はDivi 5を始めましょう

Divi 5は完全な更新モードです。オプショングループプリセットと同様に、毎週新しい機能を発売しています。高度なユニット、CSS設計変数など、Webサイトの設計へのアプローチ方法を変更することをお勧めします。

Divi 5の詳細をご覧ください

Divi 5は、Divi Dash、Diviクイックサイト、Divi AIなどの強力なツールを備えた強力な設計フレームワークです。単一のコードに触れることなく、カスタムのプロフェッショナルなWebサイトを作成するのに役立ちます。あなたを制限するものは何もありません。ウェブサイトのデザインの未来にテストドライブを利用する準備ができていますか？

Divi 5をダウンロードします