【WordPress】特定の文章の行間を詰めたい→追加CSSを使いましょう

Wordpress

どうもイトサル(@itosaru)です。

あなたはWordPressで記事を書いているときにこんなことを思ったりしませんか?

そんな時は”追加CSSクラス“を使いましょう。

そもそもCSSってなんですか?

簡単に説明するとHTMLなどのWebページを装飾するための設定のようなもの。

例えば文字色を変更したり背景色を変えたりなどWebデザインには欠かせないものがCSSです。

CSSについての詳細はこちら

【初心者向け】CSS講座1限目 CSSの概念と簡単なサンプル
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で対応できるので積極的に使っていきましょう!

コメント

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