カスタムクラスを使って自由にデザインしよう！【WordPress】

WordPressで自由にデザインをしたいなら、カスタムクラスを使うのが便利です。

本記事では、WordPressのカスタムクラスの使い方について解説します。

カスタムクラスとは？

WordPressのサイトをCSSでデザインする場合は、WordPressや使用しているテーマが設定しているクラスを活用するのが一般的です。

しかし、たまに「このページのこの部分だけデザインを変えたい」といった時もあると思いますが、元々設定されているクラスを使用するとサイト全体で変更されてしまいます。

そんな時に便利なのがこの「カスタムクラス」

ブロックごとに自分なりのクラスを設定できるので、サイトデザインの自由度がかなり上がります。

カスタムクラスの使い方

カスタムクラスは記事や固定ページのエディタ画面で設定できます。

まず設定したいブロックを選択し、サイドバーのブロックメニュー下部へスクロールしてください。

すると「追加CSSクラス」というボックスがあるので、そこに任意の文字列を入れてください。 文字列はCSSと同様のルールで名付ければOK。

後は「外観」「カスタマイズ」の「カスタムCSS」で先ほど設定したクラスに対してCSSを記述するだけです。
もちろんstyle.cssファイルに記述しても問題ありません。

カスタムクラスの便利な点は使いまわせることです。

他の記事やページであっても、該当のブロックに同じクラスを設定すれば同じデザインにできますし、CSSをコピーすれば他のサイトでも簡単に使うことができます。

WordPressでデザイン性のあるサイトを作りたい人の参考になると嬉しいです。