WordPressを利用していると画像を使う事が多いですよね。今回はWordPressでの画像の配置方法についてちょっと解説していこうと思います。コメントでもリクエストがあったので。
さて、WordPressで画像を利用する場合の配置についてですが、まずは基本的な部分のおさらいをしておきます。
画像のサイズと配置
まず最初に確認しておくのは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;
}
}
実際にスマートフォン画面で確認しながら調整してみるといいと思います。
コメント
しげぞう様コメントありがとうございます。
ビジュアルエディタでの方法はやめて、テキストエディタの方でsingle.php時のCSSファイルを利用すれば記事内で直接反映できるのを忘れていました。(ビジュアルエディタの方ではレイアウト変化は無理でしたので・・・見出しや文字列などの装飾には便利ですけど)
メディア追加時にclass名は基本的に”配置なし”でCSSの記述はしないで、テキストエディタ内に”タグ挿入クイックタグボタン”をfunction.phpの方で追加する方法で階層形式にするように独自タグを追加していく方法を試してみようと思っています。(class名の追加もできそうなので)
WordPressで困った際には貴サイト内のヒントなども利用していこうと思います。
サイト運営がんばってください。
あしべ様
コメントありがとうございます。本文中のソースコードは基本テキストエディタになります。あしべ様の言われるように面倒な部分はかんたんにできるように考えて行ったら良いと思います。メディア追加時のclass名をそのまま使うというのも良いと思いますが、他の部分（記事中以外）でも影響がないか？デバイスを切り替えたときに影響がないか？という部分まで確認しておいたほうが良いと思います。あとから全部修正になると大変なので。
それから面倒なら「AddQuicktag」にソースコードを入れて使いまわすと楽です。
初めまして、”WordPress 複数画像 css”の検索でたどり着きました。
記事を拝見いたしましたが、
“メディアを追加”からの流れで
画像1
画像2
↑のコードでは、”ビジュアルエディタ”から”テキストエディタ”に変えたときのものでいいのですか？
あと、自作テーマでCSSを利用する場合は、”メディアを追加”時の”配置”を指定するとタグのclass内に”alignleft”などが追加されますが、それを”子テーマ”じゃないほうの本体のCSSファイルのほうに追加してカスタマイズすればいいのかな？と思いました。
以下をCSSファイル内に記述してプロパティを追加すればいいんですよね？
/* 画像配置 左 */
img.alignleft {
}
/* 画像配置 中央 */
img.aligncenter {
}
/* 画像配置 右 */
img.alignright {
}
どうもビジュアルエディタの方でCSSを適応させて投稿を楽にしたいという欲があり、テキストエディタで打つのを躊躇してしまう自分・・・
WordPress初心者です。
プラグインで貼っている記事下のランキングバナーを横並びにしたい・・・と検索してこちらにたどり着きました。
紹介されている＜li＞で並べる方法で、一発でうまくいきました！
ありがとうございました！
しげぞう様
返信ありがとうございます。
なんとか解決できそうです。
シン様
コメントありがとうございます。基本的にこの記事の方法で横並びになると思いますが、コンテンツ部分の横幅が680pxの中に350pxの画像のリンクを２つ並べる事はできません。なのでまずは横幅を広げるか（余白も考えて710px以上）、もしくは画像の横幅のサイズを350pxではなく、余白も考えて330px以下にするかどちらかをやっておく必要があると思います。
１．コンテンツの幅を広げる場合
コンテンツ部分（記事本文の部分）の幅を広げる場合には画像が350pxなので、350×2つ分＝700px。それに横並びの画像２つの間の余白を10pxとしても710px以上にする必要があります。
２．画像のサイズを変更する場合
コンテンツ部分の横幅680pxを変更せずに画像のサイズを変更する場合は画像横幅サイズを330pxとかにして、330×2つ分＝660pxで画像の間の余白を20pxにするみたいな感じで計算し、コンテンツの幅に画像２つと余白が収まるようにしないと、縦並びになるかと思います。
もし幅を変更、もしくは画像のサイズを変更しても上手く横並びにならない場合にはブログのURLを教えて下さい。原因をチェックしてみますね。URLはコメント公開時には削除しますので、どうぞよろしくお願い致します。
しげぞうさん！いつも質問に答えてくださって有難うございます。とても助かってます！
それでまた、質問なのですが今、サイトで画像を横並びにしたいと思って色々とやっていたのですが、僕の画像の横幅が350pxでサイトの横幅の上限が680pxでしたので普通に貼ってしまうと横並びにできませんでした。
そこで、このサイトの
https://affiliate150.com/wordpress-media-side
のページを参考やろうと思ったのですが僕が貼ろうとしているのはリンク付きの画像で
＜a href=〝http://XXX〟＞＜img src=〝画像のURL〟＞＜/a＞
みたいな形になってます。
この場合、どのようにして画像を横並びにすれば良いでしょうか？
なんとかして画像は横並びにしたいです。
どうかお願いいたします。
乃風様
画像がアップロードできないエラーへの対処方法を図解で記事にしてみたので、こちらで一度対応してみて下さい。
⇒WordPress4.5で画像メディアがアップロードできない場合の対処方法
しげぞうさん・・・、アイキャッチ画像をWPに取り込むと、「HTTPエラー」と表示されてしまい、上手くいきません。文中に入れる画像「メディアを追加」でも、画像を取り込めなくなりました。こういうことは初めてです。今回、WPのバージョンアップでバックアップを取らなかったからなのでしょうか？ どうしたらいいでしょうか。よろしくお願いします。
乃風様
コメントありがとうございます。画像の配置に関してはスマホのデバイスにもよる部分があるかと思いますので、私の場合は配置「なし」にする場合がほとんどなので回り込みに関してはあまり詳しくはありません。文字の回り込みってデバイスによって違うのでちょっと難しいですよね、画像の横に隙間があればそこに文字が入ってきます。
なので、画像の横に文字が回りこむのが嫌というのであれば配置を「なし」にするか「中央」になるかなと思います。
こんにちは、しげぞうさん。いつもお世話になっております。２つ分からないことがあります。
１）文中に幅３００ｐｘの画像を入れる場合、その設置場所を、「左端」「中央」「右端」の三か所のいずれかを選んでも、スマフォでの反映のされ方には問題ないのでしょうか？ パソコン上では、「左端」にそのサイズの画像を設置すると、その右側に文字が入ります。「右端」なら、その反対に文字が入ります。「中央」だと文字は改行になってしまい、文字は入らないです。
２）あのトエンティートエルブを子テーマで使ったWPのバージョンアップのお知らせが５つ来たのですが、これは全てバージョンアップしておく必要があるのでしょうか？
いつもありがとうございます。よろしくお願いします。待っております。
乃風様
画像の左に文字が回り込み、画像の部分が終われば画像の下に文字が並んでいきますので、全ての文字が画像の右に回りこむという事ではないですよ(^^)
乃風様
返信ありがとうございます。横幅を300pxにする場合には縦の長さはあまり考えなくても横幅と高さの比率は同じになります。なので、横幅だけ考えておけばOKと思います。
乃風様
返信ありがとうございます。スマホでの画像は端末にもよりますが、320pxくらいかと思います。横幅が150pxの画像であれば画面の半分くらいが画像になります。そのため、文章の部分の改行がPCよりも多くなりますね。この1箇所だけというのであればこのままでも良いかもしれませんが、もしこのような画像サイズを文中で多用するのであればサイズを再度考えておくことをおすすめします。
乃風様
返信ありがとうございます。やはり横幅150pxではスマホで見た時に左画像で右に文字という感じですね。画像のサイズを300px以上にするかこのまま使うかという選択になるかと思います。
乃風様
いつもありがとうございます。横幅640pxの画像であればPCでは問題はないと思いますが、スマホでの横幅は300pxくらいがおすすめです。おそらく640pxの画像も縮小されて表示されますが、ちょっと画像が歪む感じになるかもしれませんね。
もし画像が歪む場合にはPCとスマホという条件分岐をしてPCとスマホで別々の画像を表示させたい所ですが、文中で使うという場合には通常条件分岐タグは入れる事ができないと思います。記事投稿画面でPHPを使えるようにするプラグインなどが必要になるかもしれません。
とりあえず画像がPCとスマホでどのように表示されるのか一度設置してみて再度コメント頂けると助かります。どうぞよろしくお願い致します。
ご無沙汰しております、しげぞうさん。
画像の配置の事で、ちょっと分からないので教えていただけないでしょうか。記事タイトルの直ぐ下に大きな画像を毎回「横」に１枚配置しております。サイズは６４０PX（横）×４２４PX（縦）です。このサイズのまま、記事タイトルの直ぐ下ではなく、「文中に」しかも「縦」に１枚配置した場合、スマフォやタブレットでは問題なく反映されるのでしょうか？ つまり、スタイルシートとかに事前に何らかの設定か、分岐する必要があるのでしょうか？
「縦」画像ですごくいいのがあったので、それを使えたらいいなぁ～・・・って思いました。よろしくお願いします。
お蔭さまで、コンテンツは１００ページを超えました。
乃風様
画像を２つ並べる場合にはできればサイズを揃えておいた方がいいのですが、サイズの違う画像を並べる時に上手くはまらない場合があるため、2種類のコードを書いてます。「同じサイズの画像を並べる場合」と「違う高さの画像を並べる場合」でそれぞれコードを書いてますので、どちらか１つ選んで追加しておけばOKです。
ただ、並べる時に横幅は十分ないと横に並びませんので、画像のサイズとコンテンツの横幅を考えて設置してみてください。
いつもお世話になっております。
ちょっと分かりづらいので教えてください。
①「画像を横並びにする方法」のところで、「という訳でCSSで何とかしてみましょう。基本的には記事中でこのように書いておきます。
画像1
画像2
」
と書いてありましたが、このコードは、「新規投稿を追加」という画面で、「テキスト」で、その都度記入していけばいいということなのでしょうか？
② 下記のコードを全て子テーマの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;
}
このコードの後に、子テーマのCSS上で、下記のコードも全部コピーぺするということなのでしょうか？
.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;
}
よろしくお願いします。
＞hana様
コメントありがとうございます。私も最近Xサーバーに移転したので記事を追加することができました。参考になるなら嬉しい事です。私の場合ですが、WordPressのバージョンアップ（更新）は少し待ってからやってます。ネットで探すと色々情報が出てくるのでそれを読んで安心できてからやってます。
それと更新のないテーマはちょっと不安ですよね、WordPressの仕様が変更になると若干変更しないといけない点とかも出てきそうな感じなのである程度知識は必要かと思います。
それで思い出したのですが、以前私の利用している「Twenty Twelve」でバージョンアップがあったのですが、この更新で「header.php」が若干変更になってました。この変更のために私ブログでスマートフォンの「メニューボタン」が機能しなくなりました（子テーマは作成した時点のTwenty Twelveなので）。
つまり、Twenty Twelveで重要な変更（更新）があったけど、子テーマは以前のバージョンの複製なのでこれに対応できていなかったのが原因でした。そのため、新たに更新した「Twenty Twelve」の「header.php」から変更された部分だけを子テーマでも書きなおして対処しました。これに気がつくのに1週間程度かかりました（笑）。
こんな事例もあるので、テーマの更新には気をつける必要があると思います。ただ、あまり詳しくない方とかには難しいと思うので、その辺が難しい部分ですね。
草々にありがとうございます！
ちょっと やらかしてしまいまして、全部初めからやり直しています。
この場面にたどり着くまで、まだちょっとかかりますが、この連休で何とか頑張りたいです。
やっぱり、Xサーバーがいいかな？などとも思ったり。
Xサーバーへの初回トライは、敗退しました→子テーマというかファイルの場所が分からず、
入れませんでした。
このサイトで、それについてのご説明があったので、次は成功しそうです。
今後とも、どうぞよろしくお願いいたします。
まだまだ、知りたいこと、たくさんあります。
カスタマイズの技術的なことはもちろん、
いつ、WordPressのバージョンアップをしたらいいのか？などのタイミングについてや、
更新のないテーマを使い続けてもよいのか？なども。
今後とも、どうぞよろしくお願い申し上げます。