無料イラストをダウンロード【イラストAC】会員登録はこちら

便利な「追加CSSクラス」!ワードプレスのブロック(HTML)に簡単にクラスをつける方法

アイキャッチ/追加cssクラス テーマ共通
テーマ共通
記事内に広告が含まれています
スポンサーリンク

この記事では、ブロックにカスタムクラスを追加する方法をご紹介します。

ブロックエディタの追加CSSクラスを使うことでとても簡単!

特定のブロックだけに、オリジナルのスタイルを追加できます。カスタマイズする際にとても重宝する方法なのでぜひ覚えてくださいね。

こんな方におすすめの記事です
  • カスタマイズ初心者
  • ワードプレスのブロックエディタを使っている
  • ブロックに簡単にクラス名をつける方法を知りたい
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計250件(月間約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クラス」に入力します
    追加CSSクラス

クラス名だけをそのまま入力します。(先頭に. や class=” “を入れると反映しないので注意)

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

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

HTMLを直接いじらなくてもできるってすごいっ!!

クラス名に使える文字の種類

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

  • 使用できる文字は、半角の英数字、ハイフン( – )、アンダーバー( _ )のみ
  • 先頭はアルファベットにします( 数字や記号で始めてはならない)
  • アンダーバー( _ )をクラス名に含めると、一部の古いブラウザではクラス名が認識されない場合があります
スポンサーリンク

高度な設定「追加CSSクラス」を使うメリットとデメリット

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

メリット

  1. 好きなデザインができる
    特定のブロックだけに、オリジナルのデザインを簡単に追加できます。例えば、特定の部分だけ文字色を変えたり、背景色を変更したりできます。
  2. 既存のデザインを壊さない
    今あるサイト全体のデザインに影響を与えずに、特定のブロックだけをデザインできます。
  3. 何回も使える
    一度作ったクラスは、別のブロックでも使えるので、同じデザインを何度も設定する必要がありません。

特定のブロックだけに個別のスタイルを適用できるんだね!

デメリット

  1. CSSの知識が必要
    「追加CSSクラス」を使うには、基本的なCSSの知識がないと難しいかもしれません。
  2. 他のスタイルとぶつかることがある
    テーマやプラグインが同じ名前のクラスを使っていると、デザインが思った通りにならない場合があります。既存のクラスと重複しないように注意しましょう。

CSSの知識が少しあれば、好きなデザインを反映できるとても便利な機能です。

スポンサーリンク

高度な設定「追加CSSクラス」を使ったカスタマイズ例/箇条書きリストに下線をひく

高度な設定「追加CSSクラス」を使ったカスタマイズ例をひとつご紹介します。

CSSを使ったすべてのカスタマイズに応用できるので、手順をイメージしながらご覧ください。

例えば、記事内の箇条書きリストに下線をひきたいという場合。

  • リスト1
  • リスト2
  • リスト3
  • Step1
    スタイルシートにCSSを記述しておく

    子テーマのスタイルシートを利用して下線をひくCSSを入力します。

    /*箇条書きの項目(li要素)に下線をひく*/
    .under-line > li {
        border-bottom:1px dashed #ccc;/*1pxの太さの破線*/
    }
  • Step2
    HTMLにクラスを追加
    1. 作成した箇条書きのブロックを選択(各項目ではなく箇条書き全体の親ブロックをクリック)
    2. 高度な設定→「追加CSSクラス」に under-line と入力
  • Step3
    完成

under-lineというクラス要素直下のli要素に下線をひくという意味。

高度な設定→「追加CSSクラス」に under-line と入力するだけで反映されます。

「追加CSSクラス」を使って表示した下線
  • 下線あり/リスト1
  • 下線あり/リスト2
  • 下線あり/リスト3
クラス追加なしの箇条書き
  • リスト1
  • リスト2
  • リスト3

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

当サイトで公開している「追加CSSクラス」を使うカスタマイズ例

他にもたくさんあります。

スポンサーリンク

まとめ/高度な設定「追加CSSクラス」を駆使して効率的なサイト構築を

従来はすべてHTMLの直接入力が必須でしたが、ブロックエディタの登場でできることが増えました。

そのひとつ、ワードプレスの高度な設定「追加CSSクラス」の利用は、サイトの柔軟性とカスタマイズ性を向上させる重要な手段です。これらの機能を駆使して効率的なサイト構築をおこないましょう。

この記事は以上です。

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました