WordPressテーマ作成で設定しておくべき標準CSSコードを解説！

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressテーマ作成で設定しておくべき標準CSSコードを解説していきたいと思います。

今回の内容はWordPressのクラシックテーマやブロックテーマ等で必要になるWordPressの標準機能に対応したCSSコードになります。

よろしければぜひテーマ作成のなどでお仕事の際にお役立ていただけますと幸いです。

なぜ今回の実装が必要なのか？

なぜ今回の実装が必要なのかというと、ビジュアルエディタで画像の配置を変更するとその画像のHTMLに対して「.alignright」がWordPress標準機能として追加されますが、それに対応したCSSを記述しないと変更が反映されないからです。

WordPressではクラシックエディタのビジュアルエディタなどで画像の配置を右寄せなどといった具合に変更することあるかと思います。

このときに、独自にテーマ開発をしてしまうとWordPressの標準機能に対応したCSSが記述されていないがゆえに配置を設定してもページ表示上では何も変更されないといった問題が起こってしまいます。

それを解決するために当記事のCSSコードを利用する必要があります。

実装する方法

それでは早速、実装する方法について解説していきたいと思います。

以下のCSSコードをご自身のテーマファイルのCSSファイル等にコピー＆ペーストしてください。

.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.alignright {
  float: right;
  margin-bottom: 20px;
  margin-left: 20px;
}
.alignleft {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.wp-caption,
[class*='wp-image'] {
  display: block;
  max-width: 100% !important;
  margin-top: 1.5em;
  text-align: center;
}
.wp-caption-text {
  margin-top: 0;
}

上記のCSSコードは、WordPressで生成される画像やキャプションのスタイリングを制御するためのものです。

ペーストして保存していただければ、投稿編集画面にて設定した通りにちゃんと画像が左右に配置されたりするはずです。

CSSコードの詳細について

それでは先ほど解説したCSSコードについて、詳しく解説したいと思います。

ここでCSSについて詳しく把握しておくことで、どういった仕組みでレイアウトを制御しているのかがわかり、割とシンプルな仕組みであることがわかるかと思います。

.aligncenter

.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

display: block;: imgタグなどのインライン要素に適用される場合、ブロック要素として扱われます。ブロック要素にすることで、上下左右の余白や配置がより自由に設定できるようになります。

margin-right: auto; および margin-left: auto;: これはブロック要素を中央に配置するためのCSS設定です。autoを指定すると、左右の余白が自動的に均等になります。結果として、要素が画面の中央に配置されます。

.alignright

.alignright {
  float: right;
  margin-bottom: 20px;
  margin-left: 20px;
}

float: right;: 要素を右に寄せて、左側に他のコンテンツが回り込むようにします。画像やテキストが右側に配置され、空いた左側に他の要素が並ぶようになります。

margin-bottom: 20px;: 要素の下に20pxの余白を追加します。これにより、要素の下に余裕ができ、コンテンツが詰まらないようになります。

margin-left: 20px;: 右側に寄せた要素の左側に20pxの余白を追加し、他の要素との間にスペースを確保します。これにより、テキストなどが要素に近すぎないようにします。

.alignleft

.alignleft {
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}

float: left;: 要素を左に寄せて、右側に他のコンテンツが回り込むようにします。

float: right;と同様に、他のコンテンツを要素の隣に並べるために使われますが、今度は左側に寄せられます。

margin-right: 20px;: 左寄せされた要素の右側に20pxの余白を追加し、隣接するコンテンツとのスペースを確保します。これにより、テキストや他の要素が要素に密接しすぎないようにします。

margin-bottom: 20px;: 下側の余白を設けることで、次のコンテンツとの間にスペースを保ちます。

.wp-caption および [class*='wp-image']

.wp-caption,
[class*='wp-image'] {
  display: block;
  max-width: 100% !important;
  margin-top: 1.5em;
  text-align: center;
}

.wp-caption: WordPressの画像キャプションに対応するスタイルです。

[class*='wp-image']: wp-imageという文字列を含むクラスが対象になります。これにより、WordPressが生成する画像（通常、wp-image-xxxのようなクラスが自動で付与される）に一括でスタイルが適用されます。

display: block;: 画像とキャプションをブロック要素として扱い、要素全体が一つの行に表示されます。

max-width: 100% !important;: 画像の最大幅をコンテナの100%に制限します。これにより、画像が親要素の幅を超えてはみ出さないようになります。!importantを付けることで、他のスタイルの上書きを防ぎます。

margin-top: 1.5em;: 上に1.5em分のマージンを追加し、画像やキャプションの上部にスペースを確保します。

text-align: center;: キャプションや画像がコンテナ内で中央揃えになるようにします。

.wp-caption-text

.wp-caption-text {
  margin-top: 0;
}

.wp-caption-text: WordPressのキャプション部分に対するスタイルです。通常、画像の下に説明文として表示されます。

margin-top: 0;: キャプションの上部に余白をなくし、キャプションが画像に密接して表示されるようにします。これにより、画像とキャプションが自然な形で連続して表示されます。

ここまでの内容をまとめると、解説したCSSコードは、WordPressの標準的な画像配置機能やキャプション機能に対応したスタイル設定です。floatやmarginを使って、画像を左右に配置したり、中央に整列させたり、さらにキャプションを美しく表示させるための基本的なレイアウトを提供しています。

特にテーマを自作する際、これらのクラスが適切に動作するようにCSSで対応しておくことで、WordPressの標準機能を最大限に活用できます。また、これらの設定はさまざまなテーマやエディタで汎用的に使われているため、テーマの互換性も向上します。

まとめ

WordPressテーマ作成で設定しておくべき標準CSSコードの解説は以上になります。

今回の内容はWordPressのクラシックテーマやブロックテーマ等でほぼほぼ必ず必要になるWordPressの標準機能に対応したCSSコードになりますので、必須の知識といっても過言ではありません。

よろしければぜひテーマ作成のなどでお役立ていただけますと幸いです。