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