WordPressで記事内の画像位置を左寄せに整える方法
画像のレイアウトを統一したいけど、レイアウトの調整がうまくいかない時がありますよね。
WordPressの記事投稿のビジュアルエディタでは、画像と文字の回り込みを調整できますが、レイアウトを調整していても公開ページで見た時に「あれっ？」と、思うレイアウトになってしまったりします。
今回は、画像の回り込みと、画像の位置を調整する方法をお伝えします。
目次
画像の回り込みとは
WordPress標準の機能を使って、文字を画像に回り込ませます。
ビジュアルエディタで配置した画像をクリックすると設定の変更をすることができます。
鉛筆マークの画像詳細設定をクリックすると、詳細な設定ができるのですが、今回は画像の回り込みの設定のみですので、画像をクリックした際に表示される「回り込み切り替えのボタン」を使います。
左寄せ
中央寄せ
右寄せ
配置なし
画像の左寄せ
画像の中央寄せ状態からスタート
投稿のビジュアルエディタで、まずは２つの画像と文章を入力します。
公開ページを見てみると。。。
とりあえず左寄せをしてみた場合
公開ページを見てみると。。。
エンターを入力して調整してみる
公開ページではちゃんと左寄せになった状態だけど、記事に余計な「 」がいくつも入って編集時に邪魔ですね。
画像の回り込み解除のタグを入れる
この場合、画像の横並びレイアウト（回り込み）を解除してから新たな段落を作れば解決です。
回り込みの解除をテキストエディタで行う場合、文章の後あたりに次のコードを入力すれば、そこで回り込みが解除されます。
|
1 |
<div style="clear:both;"></div> |
ただし、HTMLタグの入力に慣れていない方などは、できれば投稿をビジュアルエディタで編集したい方もいます。
そのような方にはTinyMCE Clear Floatプラグインが役立ちます。
TinyMCE Clear Floatプラグイン
TinyMCE Clear Floatプラグインのインストール
メニューの「プラグイン」→「新規追加」画面にて、キーワードに「TinyMCE Clear Float」を入力して、インストールを進めます。
プラグインの基本的なインストール方法については、記事にまとめていますので、下記の記事を参考にしてください。
TinyMCE Clear Floatプラグインの使い方
TinyMCE Clear Floatプラグインを有効化すると、ビジュアルエディタに次のようなボタンが追加されます。
「Clear Float」ボタンをクリックすると、ビジュアルエディタに「–CLEAR–」が挿入されます。
まとめ
画像のレイアウトを統一することで、ブログを訪れたひとがとても見やすいようになります。タグを毎回入力するとタイヘンですが、プラグインの機能で簡単に入れることができるので、レイアウトを意識してブログを書くことで、ブログの質も上がっていくと思います。
