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

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

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

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

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

ネイティブCSSを指定する

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

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

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

/* img */

.aligncenter {
  display: block;
  margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }
.alignright, .alignleft {margin: 8px;}

img[class*="wp-image-"],img[class*="attachment-"] {
  height: auto;
  max-width: 100%;
}

/* clearfix */

.clearfix {
  overflow: hidden;
  zoom: 1;
  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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