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

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

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

スポンサーリンク

画像のサイズと配置

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

画像の横並び-1

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

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

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

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

画像の横並び-2

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

画像の横並び-3

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

配置「左」と「右」

サンプル画像

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

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

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

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

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

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

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

画像を横並びにする方法

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

  • 表などを挿入する「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%;  /* 画像の横幅(2つなので) */
  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%」としてますが、これは2つの画像を横にならべるので、50%にしてます。

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

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

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

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

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

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

.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も簡単に説明しておきます。

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

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

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

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

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

}

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

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

画像を4つ並べていてスマートフォンでは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; 
}
}

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

affinger
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

WordPressで画像配置の基本と横並びにする方法”に48件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. シン

    しげぞう様

    返信ありがとうございます。

    なんとか解決できそうです。

  2. しげぞう 投稿作成者

    シン様

    コメントありがとうございます。基本的にこの記事の方法で横並びになると思いますが、コンテンツ部分の横幅が680pxの中に350pxの画像のリンクを2つ並べる事はできません。なのでまずは横幅を広げるか(余白も考えて710px以上)、もしくは画像の横幅のサイズを350pxではなく、余白も考えて330px以下にするかどちらかをやっておく必要があると思います。

    1.コンテンツの幅を広げる場合

    コンテンツ部分(記事本文の部分)の幅を広げる場合には画像が350pxなので、350×2つ分=700px。それに横並びの画像2つの間の余白を10pxとしても710px以上にする必要があります。

    2.画像のサイズを変更する場合

    コンテンツ部分の横幅680pxを変更せずに画像のサイズを変更する場合は画像横幅サイズを330pxとかにして、330×2つ分=660pxで画像の間の余白を20pxにするみたいな感じで計算し、コンテンツの幅に画像2つと余白が収まるようにしないと、縦並びになるかと思います。

    もし幅を変更、もしくは画像のサイズを変更しても上手く横並びにならない場合にはブログのURLを教えて下さい。原因をチェックしてみますね。URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。

  3. シン

    しげぞうさん!いつも質問に答えてくださって有難うございます。とても助かってます!

    それでまた、質問なのですが今、サイトで画像を横並びにしたいと思って色々とやっていたのですが、僕の画像の横幅が350pxでサイトの横幅の上限が680pxでしたので普通に貼ってしまうと横並びにできませんでした。

    そこで、このサイトの
    http://affiliate150.com/wordpress-media-side

    のページを参考やろうと思ったのですが僕が貼ろうとしているのはリンク付きの画像で

    <a href=〝http://XXX〟><img src=〝画像のURL〟></a>

    みたいな形になってます。

    この場合、どのようにして画像を横並びにすれば良いでしょうか?

    なんとかして画像は横並びにしたいです。

    どうかお願いいたします。

  4. 乃風

    しげぞうさん、手順としては、下記の通りの[1]から[4]までだと分かりました。ただ、[3]の「class-wp-image-editor-imagick.php」というファイルが、私の場合、同じのが3個もあったんです。どのファイルを開けばいいのでしょうか? お返事は急いでおりません。記事はとりあえず、画像なしでアップしました。後をよろしくお願いします。

    [1]ロリポップ!ユーザー専用ページにログインする。

    [2]〔WEBツール〕>〔ロリポップ!FTP〕をクリックする。

    [3]ロリポップ!FTPにログインしたら、
      WordPressのデータが入っているフォルダを開き、
      「wp-includes」フォルダ内にあるファイル
      「class-wp-image-editor-imagick.php」をクリックする。

    [4]記述を修正して〔保存する〕をクリックする。
    ———————————————————-

  5. 乃風

    しげぞうさん、あれからすぐに再びサーバーへ行き、ファイルの書き換えをすれば、なんとか直りそうだと分かり、ちょっと安心しました。その後、自分なりに色々と見たのですが、どのPHPファイルなのか、あれだけの情報では分からないので、こういう時は無理せずに、しげぞうさんが明日記事をアップしてくれるのを待つことにしました。どうぞよろしくお願いします。

  6. 乃風

    え? その対象法が? わぁ、すごい! すごい! でも、私、気づきませんでした。じゃ、私、これからもう一度ちょっと見に行ってきます。しげぞうさんが、それを記事にしてくれるのですね。うひゃ! もっとうれしいです。外出、お気をつけて。

  7. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。ロリポップのインフォメーションで同じエラーの対処方法が書いてありました。ユーザー専用ページのインフォメーションの部分に対処方法が書いてあります。詳しく記事にしたいのですが、今からちょっと用事で出かけるため明日以降になりそうです。すみません。また返信します。