WordPress

WordPressの自作テーマで画像が寄らない原因と対策

left/center/right

WordPressのエディタには色々と便利な機能が入っています。

しかし、画像の左・中央・右寄せはデフォルトでは機能しません。
CSSにコードを追加する必要があります。

テーマを作成するときに忘れがちなので気をつけましょう。

img配置

↑CSSを記述しないと押しても何も変わらない

ネイティブCSSを指定する

画像の配置を指定すると、imgタグにClassが追加されます。

  • 左:alignleft
  • 中央:aligncenter
  • 右:alignright

これらのclassに対してCSSを記述しましょう。(僕はSassで書いています)
エディタによって追加されるclassに関するCSSを「ネイティブCSS」と呼ぶようです。

画像関連のネイティブCSSです。
左寄せ・右寄せはfloatを使って指定します。

floatを使うのは文字を回り込ませるためです。
画像と文字の間が詰まらないように、左右にマージンを設定しています。

回り込みを行わない場合はブロック要素にしてマージンを指定しましょう。

myImg
Yuta

HTML5でブロック要素は廃止されてるので、厳密には意味が違うかもしれません。display: block;を指定した要素のことをなんて表現すればいいのでしょうか?

floatを設定したら、解除しなければいけません。
親要素に対してclearfixのスタイルを定義します。

clearfixに関しては以下のサイトを参考にさせていただきました。

WordPress テーマ作成時には必ず指定しておきたいネイティブCSS

ファイルを分割して管理する

ネイティブCSSはWordPressでテーマを作成する際、必須と言っていいでしょう。
使い回しやすいようにstyle.cssとは別のファイルに分割しておきます。

ですが、CSSファイルを分割すると読み込み速度が落ちてしまいます(誤差の範囲ですが)。

そこで便利なのがSassです。
SassとはCSSの上位互換のようなものです。

Sassはファイルが複数になっても、CSSファイルにコンパイルする際1つのファイルになります。

CSSでしか書いたことがない方はSassも勉強するといいでしょう。
CSSをプログラムのように書けるようにしたものなので、プログラミング経験者はすんなり理解できるはずです。