WordPressでCSS設定
はじめに
HTMLとCSSを理解せずともコンテンツ作成できることがWordPressの特徴ですが、そのままではデザインレイアウトの種類は限定されてしまいます。標準のデザインパターン以外を適用するには、別途サードパーティー製テーマを導入したり高機能なブロックエディターの導入でパターンが広がりますが限界もあります。さらに凝ったデザインを適用するには自分で用意したCSSを必要な箇所に適用することで可能になります。
ここでは必要最低限のHTMLとCSSの基本を解説しながらWordPress上にどう設定するのかについて解説します。
HTMLとCSSとは
WordPressのブロックエディターを使えばコンテンツを作成することは容易ですが、その裏側では自動的にHTMLとCSSが生成され記述されていきます。基本を理解するためにご自分のWordPressで記事を作成しブロックエディターのカスタムHTMLを使い以下のコードをコピペしてプレビューしてみましょう。
<h2 style=" color:red; text-align:center; ">美しい日本語</h2>使用しているテーマなどの環境によって見え方は若干異なると思いますが、だいたい下記のような表示になると思います。上記コードはHTML書式の中にCSSを内包したインラインCSS形式のHTMLコードです。
美しい日本語
上記の表示とは異なり下線や囲み線など別の装飾が表示された場合、あなたの環境でh2タグの装飾がCSSで定義されているということなので今回はきにしないでOK。
コードの意味は、文字列「美しい日本語」に対しh2タグを指定し同時に色をレッド、中央揃えとするCSSスタイルを指定しています。もしもWordPress記事内に数箇所程度設置するだけなら、このようなカスタムHTMLを使ってインラインCSSを使う手もあります。ただしCSSスタイルの記述量が多いと管理が面倒になります。
通常は次に解説するようにHTMLのタグに名前（クラス）をつけて外部ファイルに記述したCSSと連携させる方法を使います。
外部ファイルにCSSを記述
前回同様にカスタムHTMLブロックを使い下記のように記述します。
<p class="heading01">美しい日本語</p>これは文字列「美しい日本語」に対しpタグを指定しながらタグに名前（クラス）を付与しています。CSSはインライン記述せず外部ファイルに記述です。
今回は heading01 という名前でHTMLとCSSが連携することになります。
.heading01 {
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
text-align: center;
}
.heading01::before,
.heading01::after {
content: '';
width: 70px;
height: 3px;
background-color: #e3bf00;
}
.heading01::before {
margin-right: 20px;
}
.heading01::after {
margin-left: 20px;
}少し高度な記述なので量が多いですね。WordPressの場合は追加するCSSの外部記述先は「外観→テーマファイルエディターで子テーマのstyle.cssに追記する方法」と「外観→カスタマイズ→追加CSSの欄に追記する方法」の2種類が選べます。どちらも結果は同じですが、2番目の追加CSSに記述が推奨されています。記述することで作成コンテンツに対し外部ファイルCSSとして動作します。
うまく設定できれば下記のような表示になるはずです。
美しい日本語
今回はHTMLとCSSを分離して別の場所に記述しました。CSSについては特定のHTMLタグでは無くheading01というクラス名に対してスタイルを定義しているので、他のHTMLタグにもheading01というクラス名が付与されていれば同じデザインが自動適用されます。記述したCSSをあとで修正更新すると適用先のデザインが一気に全変更となります。
最初のインラインCSSよりも汎用性が高くなりますね。
実運用ではHTMLブロックを使わずとも、どのブロックに対しても画面右下の高度な設定→追加CSSクラス欄にクラス名を入力すると名前付与ができます。
CSSは複雑すぎて無理？
ここまでWordPressでCSSを追加設定する記述箇所を解説しました。課題は自分で思い描いたデザインをCSSの構文で記述するには大変な学習時間を要するということ。
たしかに思い通りの見出しデザインやレイアウト、写真への効果、動きのあるボタンなどなどをゼロからCSSで記述するのは知識が要りますが、最初はネット検索でコード見つけて流用設置するといいでしょう。
「CSSデザインサンプル」などで検索して見つけたコードをクラス名だけ自分の環境とあわせ変更し利用するだけです。
下記はCSSについての一般的な基礎知識です。これまでの情報を補完する記載なので参考までに。
タグ名のセレクタ指定
HTMLのタグ名を直接セレクタに指定する方法です。この場合CSSのセレクタにはタグ名をそのまま記述します。先頭にシャープ（#）やドット（.）は付けません。タグにはbody、h1、p、a、img、table、ul、li、などがあります。HTMLタグ名に対し直接cssを適用するのは広範囲な指定となるため注意が必要です。
[HTML]
<h1>大見出し</h1>
[CSS]
h1 {
color: #333;
}.class名によるセレクタ指定
HTMLソース内のclass名をセレクタに指定する方法です。CSSのセレクタには、class名の先頭にドット（.）を付けて記述します。先にHTML内にクラス名の記述が必要です。※class名と似たようなセレクタにIDがありますが使用頻度が低いので省略します。
[HTML]
<h1 class="midashi">大見出し</h1>
[CSS]
.midashi {
font-size:24px;
}子孫セレクタ指定
CSSを適用する対象を絞り込んで指定する方法。セレクタを半角スペースで区切って複数のセレクタを連続して記述します。以下はHTML内のspanタグで囲まれた「強調文字」テキスト部分にだけCSSを指定しています。具体的にはクラスheadingの中にあるクラスtypoの中のspanタグ内の要素にのみ適用ということになります。
[HTML]
<div class="heading">
<p class="typo">これは<span>強調文字</span>です。</p>
</div>
[CSS]
.heading .typo span {
font-weight: bold;
}まとめ
①デザインを適用したい対象に名前をつける
②名前に対するスタイルを追加CSSの設置場所に記述
これが答えです。ただ、ググったりして出てくる解説サイトなどのIT用語的には下記の表現だったりします。全く同じ意味なので脳内変換しましょう。
①HTMLソース内の要素にclass名を付与する
②セレクタに対しプロパティと値をCSSファイルに記述
以上WordPressでCSS設定の解説でした。ここでは実運用上で必要な手順をシンプルに記述しました。少しでも参考になれば幸いです。