WordPressで画像配置の基本と横並びにする方法

WordPressを利用していると画像を使う事が多いですよね。今回はWordPressでの画像の配置方法についてちょっと解説していこうと思います。コメントでもリクエストがあったので。

さて、WordPressで画像を利用する場合の配置についてですが、まずは基本的な部分のおさらいをしておきます。

画像のサイズと配置
1. 配置「左」と「右」
2. 画像の配置「中央」と「なし」
画像を横並びにする方法
並べる画像の高さが違う場合
スマートフォンでの位置調整

画像のサイズと配置

まず最初に確認しておくのはWordPressの設定です。管理画面から「設定」⇒「メディア」と進み、自分が設定している画像のサイズを確認しておきましょう。

これがデフォルトの設定だと思います。「サムネイルのサイズ」「中サイズ」「大サイズ」の3種類がありますよね。画像をアップロードするとここで設定した3種類のサイズと「オリジナルサイズ」の画像がWordPressにアップロードされます。

つまり1枚の画像をアップロードすると４枚の画像がアップロードされる事になります。まずはここを覚えておきます。

それとサムネイルサイズの下の「サムネイルを実寸法にトリミングする」にはチェックを入れておくとサムネイルが全部均一な大きさになりますのでおすすめです。このメディアの設定に関しては以前にも詳しく書いてます。
⇒WordPressのメディア設定の解説

さて、記事を書きながら「メディアを追加」するときに画面の右下で画像のサイズを選択する事ができますよね。

これが先ほど設定したサイズから選べます。それから「配置」も選択できます。

ちょっと配置についても簡単に説明しておきます。配置には「左」「中央」「右」「なし」の4種類があります。

配置「左」と「右」

これは配置「左」です。このように画像が左に回り込むので右側に文章が書けます。これは配置「右」なら画像が右に来るという違いだけです。

文章の回りこみを解除する時には

<div style="clear:both;"></div>

これを解除したい部分に追加します。（ビジュアルエディタではなくてテキストエディタで追加ね）。

画像の配置「中央」と「なし」

画像の配置「中央」の場合も「なし」の場合も文字の回りこみはありません。違いは画像が中央（中央）か左寄せ（なし）になるかの違いです。

以上が配置の基本的な部分です。さて、それでは画像を横並びにする方法もやってみましょう。

画像を横並びにする方法

WordPressで画像を横並びにするには幾つか方法がありますがよく利用されるのはおそらくこの２つ。

表などを挿入する「tableタグ」を使う
CSSで横並びにする

「table」タグは昔はどのサイトでもよく使われていたのですが、最近はあまり多くはない印象があります。というのも、スマートフォンの普及によってスマートフォン用のレイアウトを考える必要がでてきたからです。

「tableタグ」は便利ですが、スマートフォンから見た時にキレイに見せようとするとCSSで結構色々考えないといけませんので面倒です。

という訳でCSSで何とかしてみましょう。基本的には記事中でこのように書いておきます。

<div class="img-float">
<ul>
<li>画像1</li>
<li>画像2</li>
</ul>
</div>

「画像1」「画像2」の部分に画像を挿入します。画像の配置は「なし」でOKですが画像のサイズは揃えておいた方がスムーズです。サイズが違う画像を揃える方法もありますが、それはまた後で解説します。

さて、上記の記述をしてもこのままだと縦に並びますので、これをCSSで横に並ぶようにしていきます。この部分にはCSSで色々できるように「img-float」という名前を付けておきました。

さて、子テーマのCSSには次の記述を追加します。

.img-float ul{
  margin-bottom:15px;  /* 下のコンテンツまでの余白 */
}
.img-float li {
  width:50%;  /* 画像の横幅（２つなので） */
  float: left;  /* 画像の左寄せ */
  list-style: none;  /* リストマークを削除 */
  margin:0; /* 画像の周りの余白を削除 */
  box-sizing: border-box;
}
.img-float ul:after {
 content:"";
 clear:both;  /* 画像の回り込みを解除 */
 display:block;
}

という感じにしておけば画像は横並びになります。「.img-float li」という部分で「width:50%」としてますが、これは２つの画像を横にならべるので、50%にしてます。

余計な余白があると50%でも入らなくなり、2番目の画像が下に落ちてしまいますのでそのような場合はwidthの数値を変更して調整して下さい。もし３つの画像を並べるのであれば「width」は33%って感じです。

今書きましたが、ちょっと余白についても説明しておきます。画像と画像の間の余白を自分で設定したい場合には「.img-float li」の「 margin:0; /* 画像の周りの余白を削除 */」という部分を削除して「margin-left:0;」と「margin-right:〇〇px」の２つを追加します。この「margin-right」の「〇〇px」の部分に数値を入れると画像と画像の間の間隔をあけることができます。

ただし、上記でも説明したように画像と画像の間に間隔を入れるとwidth:50%で入らなくなるので、widthの数値を調整して下さい。

並べる画像の高さが違う場合

本当は並べる画像のサイズは画像を準備する段階でそろえておいたほうが良いのですが、高さの違う画像の高さを揃えたいという場合には応急処置的な方法として高さを指定する「height」を入れてはみ出す部分を隠す「overflow: hidden」を使います。

この２つを追加してもう一度コードを書いてみますが、この場合には高さは揃う半面指定した高さをはみ出した部分が隠れてしまうので注意です。それと利用する画像内、一番高さの低い画像の高さに合わせるようにしてください。

.img-float ul{
  margin-bottom:15px;
}
.img-float li {
  width:50%;
  height:150px;  /* ここで高さを決めます */
  overflow: hidden;  /* 高さをはみ出す部分は隠す */
  float: left;  
  list-style: none;  
  margin:0;  
}
.img-float ul:after {
 content:"";
 clear:both;  
 display:block;
}

これで高さを揃えることができます。画像は3つでも4つでも並べてもいいですが、スマートフォンで見たときの事も考えないといけません。一応スマートフォン用のCSSも簡単に説明しておきます。

スマートフォンでの位置調整

スマートフォンで見たときに画像を横に３つも４つも並べてしまうととても小さくなってしまいますので、スマートフォンの時だけは画像の横並びを解除するとか４つ並べていたものを２つにするとか色々できます。

基本的には多くのテーマがレスポンシブデザイン（スマートフォン対応）のテーマだと思いますので、CSSで条件分岐（スマートフォンの場合のCSS）を書き分けてやります。子テーマのCSSにはこのように記述していきます。

@media screen and (max-width:599px){

/* スマートフォンで適応したいCSSの記述 */

}

これはブラウザのサイズが599px以下ならという条件分岐で、この中に処理を書いて行きます。一般的な７インチタブレットのブラウザのサイズが600pxなのでそれよりも小さいという条件分岐です。

ここで、調整したいのは「.img-float li」の「width」の部分です。最初に設定したのは２つの画像を50％ずつの幅で設定しましたよね。これを１つずつ上下に表示したいのであれば「width」は100%にしてやれば良いという訳です。

画像を４つ並べていてスマートフォンでは2つ横並びにしたいという場合は50%という計算です。

それともし高さを調整する「height」を入れた方はこれもここで調整して上げる必要があるかもしれません、実際に見ながら調整して下さい。例えば画像の幅を100%にして横並びにならないようにして高さも揃え、ちょっと位置調整をするとこんな感じ。

@media screen and (max-width:599px){
 .img-float ul{
  margin-bottom:10px;  /* 下のコンテンツまでの余白 */
}
.img-float li {
  width:100%;
  height:100px;
  overflow: hidden;
  margin:0; 
}
}

実際にスマートフォン画面で確認しながら調整してみるといいと思います。

アシベより:
2017年3月21日 2:06 PM
しげぞう様コメントありがとうございます。
ビジュアルエディタでの方法はやめて、テキストエディタの方でsingle.php時のCSSファイルを利用すれば記事内で直接反映できるのを忘れていました。(ビジュアルエディタの方ではレイアウト変化は無理でしたので・・・見出しや文字列などの装飾には便利ですけど)
メディア追加時にclass名は基本的に”配置なし”でCSSの記述はしないで、テキストエディタ内に”タグ挿入クイックタグボタン”をfunction.phpの方で追加する方法で階層形式にするように独自タグを追加していく方法を試してみようと思っています。(class名の追加もできそうなので)
WordPressで困った際には貴サイト内のヒントなども利用していこうと思います。
サイト運営がんばってください。

« 前へ 12