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