どうもイトサル（@itosaru)です。
あなたはWordPressで記事を書いているときにこんなことを思ったりしませんか？
そんな時は”追加CSSクラス“を使いましょう。
そもそもCSSってなんですか？
簡単に説明するとHTMLなどのWebページを装飾するための設定のようなもの。
例えば文字色を変更したり背景色を変えたりなどWebデザインには欠かせないものがCSSです。
CSSについての詳細はこちら
この記事では追加CSSクラスの使い方について説明します。
追加CSSクラスとは
WordPress5.0から搭載されている”ブロックエディタ”で使用できる設定の一つです。
ブロックに追加CSSクラスを設定することで、そのブロックだけ他とは違った装飾ができるようになります。
具体的にどういったことができるのかという例はこちらです。
- 行間の調整
- 背景色の変更
- 罫線の色や種類（転線にするなど）
ですので「このリストの背景色だけ変える」や「画像の説明文の行間だけ詰める」
といったことができます！
追加CSSクラスの使い方
追加CSSクラスを使うためには事前にCSSを記述する必要があります。
今回は例として段落の下の行間をなくすCSSを書きます。
テーマファイルエディタにCSSを追記する
1.WordPress管理者画面の「外観」から「テーマファイルエディタ」を開きます。
2.style.cssに追加するCSSを記述し、[ファイルを更新]をクリックします。
今回書いたCSSはこちらです。
/************************************
** 画像説明文章
************************************/
p.img-explain {/*下のマージンを解除*/
margin-bottom: 0;
}このコードの意味は段落(HTMLでいうところのpタグ)に”img-explain”というクラスが設定されていたら、下の行間をなくすというものです。
1-3行目は不要ですが、何用のCSSなのか分かるように合わせてコピーしましょう。
追加CSSクラスにCSSクラス名を記述する
追加したCSSは投稿編集画面で使用できます。
1.CSSを適用したいブロックを選択し、[高度な設定]をクリックします。
2.追加CSSクラスの設定が表示されます。CSSクラスを追記すると適用されます。
まとめ
今回はWordPressの追加CSSクラスについて説明しました。
通常のブロックの装飾はいじりたくないけど、特定のブロックだけいじりたい！
という場合に追加CSSクラスは便利です。
装飾に関することはすべてこのカスタムCSSで対応できるので積極的に使っていきましょう！
コメント