WORDPRESSでは画像の表示位置を「左」、「中央」、「右」の三つから選べます。

しかしWORDPRESSのテーマによってはこの表示位置を変更しても、画像の表示位置を変更できないことがあります。

そこで今回は画像の表示位置を変更できない場合の対処法を調べました。

 

 

画像の挿入と表示位置の変更

WORDPRESSで画像を挿入と表示位置の変更の方法は次のように行います。

 

1. 「メディアを追加」
2. 画像選択
3. 「添付ファイルの表示設定」
4. 「配置」
5. 「投稿に挿入」

 

このように画像を挿入し、表示位置を「中央」に設定しました。

しかし画像を挿入した記事を見ると、画像が中央ではなく左によって表示されています。

 

画像のclass名の特定

画像が中央に表示されない問題に対処するために、まずこの画像のクラス名を調べます。

記事内の要素のクラス名を調べる方法は下記記事と同じ、google chromeのデベロッパツールを使用しました。

 

 

 

これによって表示位置を中央に設定した画像のクラス名は「 aligncenter 」だということがわかりました。

また同様に表示位置を右に設定した画像のクラス名は「 alignright 」だということがわかりました。

次にこのクラス名を元に、style.css を編集します。

 

style.cssの変更

先ほど調べた画像のクラス名を元にstyle.css を変更します。

今回は画像の表示位置を中央や右を選択すれば、画像が中央や右に表示されるように次のコードをstyle.css に追加しました。

 

 

これによって無事画像の表示位置に中央を選択すれば、画像が中央に表示されるようになりました。

 

まとめ

• WORDPRESSでは画像の表示位置を三種類から選べるが、テーマによっては表示位置が反映されない。
• 記事内要素のクラス名等を調べるにはデベロッパツールが便利
• 中央表示では「 aligncenter 」、右表示では「 alignright 」クラスのCSSを設定すれば、画像の中央・右表示ができる