WordPressテーマ自作時の記事内画像位置のCSS設定

画像挿入時に自動付与される画像配置のスタイル

WordPressで記事に画像を挿入する際には、「添付ファイルの表示設定」欄で画像の配置を選択できます。

選んだ配置により、画像には以下のclassが自動的に付与されます。

配置 左：alignleft
配置 中央：aligncenter
配置 右：alignright
配置 なし：alignnone

テーマ作成時の注意点

WordPress標準のテーマを使用している場合は問題ありませんが、WordPressのテーマを自作している場合は、これらのclassをCSS内に定義していないと画像配置が正しく記事に反映されません。

エディタ上では「左寄せ」「中央寄せ」「右寄せ」が正しく表示されていても、公開した記事では「画像がセンタリングされない」などの状態が発生します。

記事内の画像位置を正しく反映させるためには、以下のclassをCSSに定義するようにしてください。

/* 画像配置 左 */
img.alignleft {
        text-align: left;
}

/* 画像配置 中央 */
img.aligncenter {
        display: block;
        margin: 1px auto;
}

/* 画像配置 右 */
img.alignright {
        display: block;
        margin: 1px 1px 1px auto;
}

これで、画像位置が記事に正しく配置されます。