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は、デフォルトで回り込みの設定がされています。個別ページではなく、全てのページで回り込みをさせたくない場合は、子テーマなどで修正する必要があります。
[…] 、こちらの記事の場合は、追記ではなく、親テーマの上書きになります。) […]