WEB系キャンパス

(K)記事投稿時テキストが画像の右に回り込ない時の対処(WordPress自作Theme作成時)

wordpress_text_top

自分でWordpressのThemeを一から作成すると、デフォルトのTheme(Twentyなんとか)や配布されてるThemeにあるから、何の気なしに出来てた事ができない場合があります。今回はブログ記事に画像(メディア)を入れる時に投稿画面で右寄せや左寄せに設定しても、指定したとおりにならない時の対処法の備忘録。

投稿画面でテキストが画像の右側に回りこんでくれない例

投稿画面より画像の設定
ベタな所で画像付きのブログを上げたい場合、通常はメディアの設定の「配置」から選びます。

 

ビジュアル編集画面でのプレビュー
ビジュアルでの表示はちゃんと右にテキストが回りこんでいますが・・・

 

実際の投稿画面のプレビュー
プレビューで確認すると下に落ちてます。

CSSにコードを追加するだけでOK

wordpressは画像を「配置」で設定するとclassがつくので、そのclass通りの設定をCSSに追加してあげればOKです。

※CSSに以下のコードを追加

1img.centered {
2display: block;
3margin-left: auto;
4margin-right: auto;
5}
6 
7img.alignright {
8padding: 4px;
9margin: 0 0 10px 10px;
10display: inline;
11}
12 
13img.alignleft {
14margin: 0 10px 10px 0;
15display: inline;
16}
17 
18.alignright {
19float: right;
20}
21 
22.alignleft {
23float: left
24}

marginの設定は、作成したサイトのデザインの間隔で合わせてあげればいいと思います。

キチンと右に回りこんでる状態
これで、ばっちりテキストが右側に回りこみました。

まとめ

WordPressで構築したサイトを納品した際は、クライアントさんも投稿画面を触るでしょうし、ソースコードを見ただけで頭痛のするタイプの人は十中八九ビジュアルエディタで更新作業をしますから、当然エディタのプレビューと違う結果になれば「??」となりますから、この設定はほぼ必須かなと思います。
こんな感じのデフォルトコードはどんどんEvernoteにでもまとめて、ちゃちゃっとやってしまいたいトコです。今回は以上ですm(_ _)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です