WordPress（賢威7.0）画像の回り込みの設定

画像を回り込みたいと言う事はしばしばあると思います。意外と、忘れてしまう事があるので備忘録として書き留めておきます。wordpressで投稿記事を書いていくうえで、見た目にも重要です。

利用するテーマによっては、レスポンシブ対応などで、キチンと表示されない場合は、個別対応が必要です。

賢威7.0のテーマを使って画像の回り込みの設定

賢威7.0と言うよりwordpressで画像を追加する時は、投稿編集画面のメディアを追加ボタンをクリックします。この時、左、中央、右、なしから配置する場所を選択できます。この時、回り込みの指定が出来るのは、左、右です。

賢威7.0では、画像を投稿ページなどに追加した場合、その後のテキストを回り込み出来るようになっています。
base.cssにその指定があります。もし、修正する場合は、base.cssの下記個所を修正する必要があります。基本は、変更しなくて良いと思います。

/*回り込み
※モバイル時には回り込み解除*/
.left{
float: left;
margin: 0 1em 1em 0;
}

.right{
float: right;
margin: 0 0 1em 1em;
}

さらに、賢威7.0では、rwd.cssなども読んでみると、カラムのレイアウトによっても、回り込みの解除などを細かく指定されているようです。しかし、この部分に関しては、よほどの自信がない限り変更しない方が良いと思われます。もし、修正されるなら、子テーマを使って、失敗しても復元できるようにする必要があります。

私の場合は、修正したいサイト意外に、同様のテストサイトの環境を作ります。Xserverなどでは、簡単にサブドメインなどでwordpressサイトを作ることが出来ます。ここでテストをして確認してから本番環境で修正を加えれば、まず失敗することはありません。

画像の回り込みのテスト

wordpressのメディアを追加で、自動的に挿入されるclassの指定で、回り込みが設定されています。

画像を左に配置　class=”alignleft”
回り込みします。
左配置

回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト

画像を右に配置　class=”alignright”
回り込みします。
右配置

回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト

画像をセンターに配置　class=”aligncenter”
回り込みしません。
中央配置

回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト

画像の配置なし　class=”alignnone”
回り込みしません。
配置なし

回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト

回り込みをしたくない場合

例えば、このページだけしたくない場合は、この投稿だけの個別CSS/js記述欄にclassの指定を追記します。このページだけに、cssが適用されます。

/*回り込みしない設定*/
.alignleft{
	float: none;
}
/*もしくは個別のclassを設定するだけです。*/
.alignleft1{
	float: none;
}

画像を左に配置　class=”alignleft1” alignleft1に設定
左配置

回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト、回り込みのテスト

これで、回り込みをしなくなります。kenni 7.0は、デフォルトで回り込みの設定がされています。個別ページではなく、全てのページで回り込みをさせたくない場合は、子テーマなどで修正する必要があります。