投稿画像が希望の位置にならない場合のCSS

wordpressの投稿画像の場合、classが自動で付加されるのですが、ちゃんと設定してあげないと、左寄せ、右寄せ、中央などの指示どおりになりません。

とくにオリジナルテーマの場合は注意です。

回り込みをさせない場合

/* ==================レイアウト/画像指示を有効にする================== */

/* 配置位置 左 */
img.alignleft {
  display: block; 
  margin: 0 auto 0 0;
}

/* 配置位置 中央 */
img.aligncenter {
  display: block; 
  margin: 0 auto;
}

/* 配置位置 右 */
img.alignright {
  display: block;
  margin: 0 0 0 auto; 
}

右と左は回りこみをさせたい場合

この場合は次の段落の前に回りこみの解除も必要です。

/* ==================レイアウト/画像指示を有効にする================== */

/* 配置位置 左 */
img.alignleft {
  float:left;
  margin: 5px 30px 10px 20px;
}

/* 配置位置 中央 */
img.aligncenter {
  display: block; 
  margin: 0 auto;
}

/* 配置位置 右 */
img.alignright {
  float:right; 
  margin: 5px 30px 10px 20px;
}

/* 回り込み解除 */
.clear{
    clear: both;
}

画像と回りこんだテキストの下にくるテキストやタイトルを書くときに以下のようにする。

<p class="clear">回り込み解除してテキスト</p>

<h2 class="clear"回り込み解除してH2タイトル></h2>

参照ページ
WordPressで画像を挿入する時の「画像の配置位置」で付加されるclassとCSSについて