WordPressの「追加CSSクラス」が便利！特定のブロックにだけスタイルを適用する方法

WordPressのブロックエディタで、特定のブロックだけにデザインを追加できることをご存知ですか？

実は「追加CSSクラス」機能を使えばとても簡単に実現できます。

この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を交えながら解説していきます。カスタマイズする際にとても重宝する方法なのでぜひ覚えてくださいね。

特にWordPressのブロックエディタを使いこなしたい方、簡単な設定でサイトのデザイン性を高めたい方におすすめです！

「追加CSSクラス」とは？基本と必要性

「追加CSSクラス」は、特定の要素だけにカスタムスタイルを適用するための機能です。たとえば次のようなことができます。

• 文字色や背景色の変更
• 特定ブロックのアニメーション追加
• フォントやマージンの調整

特にテーマ「Cocoon」や有料テーマでは、この機能を活用することでテーマ既定のデザインを変更せず、自分だけのスタイルを追加できます。

例：段落を赤文字にする

<p class="font-red">この段落全体を赤字にします。</p>

.font-red {
  color: #ff0000; /* 文字色を赤にする*/
}

特定の段落だけが目立つスタイルに早変わりします。

「追加CSSクラス」の設定方法と使い方｜初心者向け

「追加CSSクラス」はWordPress新エディタ「Gutenberg」で追加された機能。

使い方を説明します。

この操作を行うだけで、自動的にクラスを追加したHTMLが生成されます！

<p class="class-name">クラスを追加した段落です</p>

使えるクラス名のルール

クラス名は分かりやすく任意につけられますが、使える文字や使い方に決まりがあるので確認しましょう。

• 半角英数字、ハイフン（-）、アンダーバー（_）が使用可能
• 先頭はアルファベット（数字や記号から始めない）
• アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されない場合があります

「追加CSSクラス」を使うメリットとデメリット

ブロックエディタの「追加CSSクラス」を使うメリットとデメリットを説明します。

CSSの基礎さえあれば、自由にデザインを反映できる便利な機能です。

実践｜「追加CSSクラス」を使った具体的カスタマイズ

「追加CSSクラス」を使ったカスタマイズ例をご紹介します。

箇条書きリストに下線を引く例

ここでは箇条書きリストに下線を引く具体的な手順を紹介します。以下のリストに下線を引く場合を例にして説明します。

<ul class="under-line">
   <li>リスト1</li>
   <li>リスト2</li>
   <li>リスト3</li>
</ul>

この例ように、特定のブロックだけにピンポイントに下線をひきたい、文字色を変えたい、線の太さを変えたい、アニメーションを入れたい等もすべて高度な設定「追加CSSクラス」で叶います。

当サイトで紹介している他のカスタマイズ事例

当サイトでは「追加CSSクラス」を使ったカスタマイズ例を紹介しています。活用してサイトを個性的に仕上げてみてください。

• テキストリンクをおしゃれに装飾／CSSサンプル
• WordPressのリストデザイン（箇条書き）点の色を変える方法
• CSSでなめらかに点滅させる方法（コピペＯＫ）

こちらは同様に「追加CSSクラス」を活用し、複数スタイルからクリックひとつで切り替え可能。使い勝手が抜群です。

まとめ｜CSSクラスの活用でサイトを自由にデザインしよう

追加CSSクラスを活用すれば、WordPressやHTMLサイトのデザインを簡単にカスタマイズできます。

基本の使い方を理解し、適切なクラス名を設定することでデザインの管理もスムーズになります。ぜひ試してみてください！