WordPress ブロック エディターを使用してカスタム CSS クラスを追加する方法

CSS は HTML で記述されたスタイルシート言語であり、色、サイズ、レイアウト、表示などのさまざまな属性を HTML タグに割り当てて、Web サイトの基本構造の外観を変更できます。たとえば、WodPess サイトにカスタム CSS クラスを追加することで、必要なデザインと外観を作成できます。この記事では、WodPess ブロック エディターを使用して CSS クラスを追加する手順を紹介します。

WodPess 5.9 以降では、グローバル スタイルとブロックごとのデザインに重点を置いた新しいフルサイト編集アプローチが採用され、CSS と大規模なコーディングの必要性が軽減されました。ただし、任意の WodPess ブロックにカスタム CSS クラスを追加することは可能です。

まず、WodPess ダッシュボードで [ツール] -> [テーマ ファイル エディタ] を選択し、アクティブなテーマを選択して、スタイルシート テーマ フォルダを開き、style.css ファイルを編集して、スタイルシート内の CSS クラスを定義します。

テキスト エディターを使用して CSS クラスとコードを追加します。たとえば、テキストの配置を実現するために justify-clss クラスを追加できます。

p.justify-classs {テキスト行: ジャスティファイ; }

CSS クラスを編集したら、「ファイルの更新」をクリックしてファイルを保存します。

次に、「Appence」->「Site Edito」に移動してサイト エディターを開き、カスタマイズするブロックを選択して「Settings」をクリックし、「Added」ドロップダウン メニューを開いて「Additional CSS clss(es)」を見つけ、このテキスト フィールドに CSS クラスを挿入します。

justify-clss クラスを追加すると、ブロック段落内のテキストが両端揃えになります。さらに、スペースで区切ることで、複数の CSS クラスをブロックに追加できます。