ワードプレスのブロックエディタで、特定のブロックに独自のデザインを追加できることをご存知ですか？実は「追加CSSクラス」機能を使えばとても簡単に実現できます。
この記事では、初心者でも分かりやすいようにクラス追加の基本と具体的な実例を交えながら解説していきます。カスタマイズする際にとても重宝する方法なのでぜひ覚えてくださいね。
- 追加CSSクラスとは？
- 設定手順と注意点
- 追加CSSクラスを使った具体的なカスタマイズ例
- クラス設定を使う際のメリットとデメリット
特にワードプレスのブロックエディタを使いこなしたい方、簡単な設定でサイトのデザイン性を高めたい方におすすめです！
About me
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計370件（月間約20件）購入いただいています
「追加CSSクラス」とは？基本と必要性
「追加CSSクラス」は、特定の要素だけにカスタムスタイルを適用するための機能です。たとえば次のようなことができます。
- 文字色や背景色の変更
- 特定ブロックのアニメーション追加
- フォントやマージンの調整
特にテーマ「Cocoon」や有料テーマでは、この機能を活用することでテーマ既定のデザインを壊さず、自分だけの個性的なスタイルを追加できます。
例：段落を赤文字にする
<p class="font-red">この段落全体を赤字にします。</p>.font-red {
color: #ff0000; /*文字色を赤にする*/
}特定の段落だけが目立つスタイルに早変わりします。
「追加CSSクラス」の設定方法と使い方｜初心者向け
「追加CSSクラス」はワードプレス新エディタ「Gutenberg」で追加された機能。
「高度な設定」と書いてあるけど難しくないので大丈夫。
使い方を説明しますね。
- Step1投稿画面で対象のブロックをクリック
- Step2右側のサイドメニュー「ブロック」タブを選択
- Step3「高度な設定」→「追加CSSクラス」に入力します
クラス名だけをそのまま入力します。
クラス名の前にピリオド（.）やclass=" " を付けると反映されないので注意。
この操作をおこなうだけで、自動的にクラスを追加したHTMLが生成されます！
<p class="class-name">クラスを追加した段落です</p>
HTMLを直接いじらなくてもできるってすごいっ！！
使えるクラス名のルール
クラス名は分かりやすく任意につけられますが、使える文字や使い方に決まりがあるので確認しましょう。
- 半角英数字、ハイフン（-）、アンダーバー（_）が使用可能
- 先頭はアルファベット（数字や記号から始めない）
- アンダーバー（ _ ）をクラス名に含めると、一部の古いブラウザではクラス名が認識されない場合があります
「追加CSSクラス」を使うメリットとデメリット
ブロックエディタの「追加CSSクラス」を使うメリットとデメリットを説明します。
メリット
デメリット
CSSの知識が少しあれば好きなデザインを反映できるとても便利な機能です。
実践｜「追加CSSクラス」を使った具体的カスタマイズ
「追加CSSクラス」を使ったカスタマイズ例をご紹介します。
箇条書きリストに下線を引く例
ここでは箇条書きリストに下線を引く具体的な手順を紹介します。以下のリストに下線を引く場合を例にして説明します。
<ul class="under-line">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>- リスト１
- リスト２
- リスト３
- Step1スタイルシートにCSSを記述
まずは、子テーマのスタイルシートに以下のCSSを記述します。
/*箇条書きの項目（li要素）に下線を引く*/ .under-line li { border-bottom: 1px dashed #ccc; /* 1pxの破線を設定 */ }このコードでは、
.under-lineクラスが付与されたリスト（<ul>や<ol>）内のli要素に下線を適用します。 - Step2HTMLにクラスを追加
次に、ブロックエディタでクラスを追加します。
- 対象の箇条書きリストを選択します（項目ではなく、箇条書き全体の親ブロックを選択）。
- サイドバー「追加CSSクラス」に
under-lineを入力
- 完成
クラスが反映されたリストに指定した下線が追加されます
表示例：クラス追加あり
- 下線あり｜リスト１
- 下線あり｜リスト２
- 下線あり｜リスト３
表示例：クラス追加なし
- リスト１
- リスト２
- リスト３
この例ように、特定のブロックだけにピンポイントに下線をひきたい、文字色を変えたい、線の太さを変えたい、アニメーションを入れたい等もすべて高度な設定「追加CSSクラス」で叶います。
当サイトで紹介している他のカスタマイズ事例
当サイトでは「追加CSSクラス」を使ったカスタマイズ例を紹介しています。ぜひ活用してサイトを個性的に仕上げてみてください。
こちらは複数スタイルからクリックひとつで選択できて使い勝手は抜群です。
- Cocoon新着記事・人気記事ブロックのカラム数
- Cocoonタブブロック
- Cocoonブログカード
- Cocoon白抜きボックス
- Cocoonラベルボックス
- Cocoonタブ見出しボックス
- Cocoonアイコンボックス
- Cocoonアコーディオン（トグル）ブロック
まとめ｜CSSクラスの活用でサイトを自由にデザインしよう
追加CSSクラスを活用すれば、WordPressやHTMLサイトのデザインを簡単にカスタマイズできます。
基本の使い方を理解し、適切なクラス名を設定することでデザインの管理もスムーズになります。ぜひ試してみてください！
Comment コメントはこちらへ