画像の中央合わせができない場合【画像レイアウトを変えてみよう】


あび

ブログに画像を入れたんだけど
左側にしかならないの?
真ん中に持ってこれないかな?


村重

それは、こういうことかな?

画像を入れると、ふつう左側に寄る。

 

 

それを、ブログの真ん中に置きたい。

 

 


あび

そうそう!そんなかんじにしたいけど
なんだかうまくいかないの!

 

 


村重

じゃあまず設定方法を確認するね

 

 

 

画像を真ん中に配置する方法

画像を、ブログ記事のどこに配置するか、
レイアウトを変更する方法は3つあります。

どれを使っても同じなので、
投稿の編集操作で押しやすいもので良いでしょう。

 

1.画像の中央寄せボタンを使う

まず、普通に画像を入れます。

 

その画像をクリックすると、吹き出しが出てきます。

 

左から2番目が、真ん中合わせです。

 

これをクリックすると、画像が真ん中に配置されますよ^^

2.メニューの中央寄せボタンを使う

 

他にも、メニューにも「中央合わせ」ボタンがあります。

 

画像を選択して、これをクリックしても、同じことになります。

 

3.画像編集の「中央寄せ」を使う

または、画像をクリックして、
鉛筆マークをクリックすると、画像編集メニューがあります。

 

 

ここにある、配置を「中央」に変える方法もあります。

 

私はだいたい1ですが、画像設定を変えることも多いので
3を使うことも多いです。

 

 


あび

ちゃんとやってるつもりなんだけど、
押しても中央寄せにならないんだ・・

 


村重

あらそれは大変!
CSSを見てみるね

 

この方法を使っても、真ん中にならない場合

さて、ここまでは普通の画像の配置の設定なので
そんなに難しいことはないのですが、

ごくまれに、お使いのテーマによっては
あびちゃんのように、
今ご紹介した3つの方法を使っても、画像が中央にならない場合があります。

 

そんな時は以下のCSSを使ってみてください。

 

カスタマイズメニューを開き

 

追加CSS をひらきます。

 

そこに、このコードを
張り付けてください。

 

——–ここから(この線はいらない)

/*画像中央合わせ*/
.aligncenter {
display: block;
margin: 0 auto;
}

——–ここまで(この線はいらない)

すると、画像が中央に反映されるはずです。

いかがでしょうか?

 

理由は様々ですが、
もともと入っているはずの「中央に合わせる」CSSが
うまく動いていない場合があります。

そんな時は、上で紹介したCSSを貼ってやると
正常に動くようになります。

お困りの際は、試して見てくださいね。

 

写真のレイアウトは中央が良いのか?


あび

画像は真ん中合わせにしたほうがいいの?

 


村重

ううん、目的によって使い分けてね

 

 

通常、何も意識せずに
画像を入れると、左側になりますよね。

普通は左よせにするケースが多いと思います。

それを、一手間かかりますが
画像を真ん中合わせに揃えると、また違った印象になります。

たとえば、こんなお申し込みはこちら、のボタン画像。

クリックしてお申し込みページに移動させるような場合は、
真ん中に置いておいたほうが、ボタンらしいですよね。

なんでもかんでも中央にすれば良いというものではありませんが

全体のバランスを見てレイアウトを整えると
効果的に印象を変えることができますよ。

ぜひご活用くださいね。

Follow me!

村重敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。