マジレス希望

ワードプレスで画像を何枚か横並びさせる文法を教えてください

解決済

質問者：motoentaro
質問日時：2022/03/05 18:14
回答数：5件

ワードプレスで画像をダッシュボードの
メディアから取り込んで、挿入しています

作業の中で
画像を横に2～4枚くらい並べたいのです。

色々調べるとプラグインとかサムネイル（？）とか
を使ってできるようですが

ＨＴＭＬの文法（ソース）でできないものでしょうか？

可能なら画像間の間隔も調整したいです

申し訳ございませんが教えてもらえないでしょうか

よろしくお願いいたします。

ありがとうございます。

＜また、各画像は同じサイズ（＝横幅）と考えても良いのでしょうか？
違うこともあります

教えていただいたコードで3枚並べたら
画像のサイズが通常より大きくなりました

おそらく画面いっぱいに3枚並べるのだと思います

あと、ワードプレスの場合　以下のようにキャプションで画像の説明文を
入れれるのですが　それを入れると　おかしくなりますね。。。

[caption id="attachment_1127" align="alignnone" width="179"]<img src="k112.jpg" alt="パンダ" width="179" height="254" class="size-full wp-image-1127" /> パンダ[/caption]

分かるようであれば教えていただけるとありがたいです

すいませんが　よろしくお願いいたします。

No.1の回答に寄せられた補足コメントです。補足日時：2022/03/06 11:31
通報する
ありがとうございます。

質問の仕方が悪くて申し訳ございません

＜No1の回答のCSSで、
＜.imageWrapper {
＜display: flex;
＜flex-wrap: wrap;
＞}
＜だけを、残してあとは削除すれば「適当な横並び」になるものと思います。

これだけ書いて、その下に画像のソースを書けばいいのですか？

やると　画像は縦並びになり
No1の回答のCSSで、
.imageWrapper {
display: flex;
flex-wrap: wrap;
}
これは文字として表示されました

条件は特にはありませんが
画像間の間隔はあけたいと考えています

あと、大きさは現状の画像の大きさで
表示したいですね。

すいませんが　よろしくお願いいたします。

No.2の回答に寄せられた補足コメントです。補足日時：2022/03/06 12:25
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： fujillin
回答日時：2022/03/06 18:24

No3です。

＞私はプラグインを使いたくないので
＞＞ＨＴＭＬの文法（ソース）でできないものでしょうか？
＞と書いたんです
だから、HTMLソースで回答しています。
何をしたいのかも、どのようなソースなのかも質問者様はまったく示さないので、回答者には何もわかりません。

通常は、何もしなければ、普通にマークアップするだけで適当に次の行に送られます。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div>
<img src="./img/photo01.jpg" alt="" />
<img src="./img/photo02.jpg" alt="" />
<img src="./img/photo03.jpg" alt="" />
<img src="./img/photo04.jpg" alt="" />
<img src="./img/photo05.jpg" alt="" />
<img src="./img/photo06.jpg" alt="" />
<img src="./img/photo07.jpg" alt="" />
<img src="./img/photo08.jpg" alt="" />
<img src="./img/photo09.jpg" alt="" />
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

何度もありがとうございます。

感謝いたします

いただいたソースをもとに
一旦、こちらで考えてみます

ありがとうございました。

通報する

お礼日時：2022/03/07 18:03

No.5

回答者： sukitaro
回答日時：2022/03/07 09:11

このサイトとか参考になりませんか。

https://www.conoha.jp/lets-wp/wp-image/#section0 …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

ワードプレスの画像挿入方法の説明
としてい　良いサイトだと思いました

でも、今求めているものとは少し違いますね。

ありがとうございました。

通報する

お礼日時：2022/03/07 18:05

No.3

回答者： fujillin
回答日時：2022/03/06 12:34

No2です

＞これは文字として表示されました
何をなさったのか、こちらにはまったくわかりませんけれど、「文字として表示される」ようなら、CSSになっていないことが想像されます。
まぁ、何も無くても、img要素だけならそれなりに横並びに表示されるはずですけれど・・

＞ＨＴＭＬの文法（ソース）でできないものでしょうか？
というご質問なのですから、HTMLとCSSはわかっているんですよね？

- 0
- 件

通報する

この回答へのお礼

何度もありがとうございます

＜HTMLとCSSはわかっているんですよね？

あまり、分かってないです

ワードプレスの場合、プラグインで
画像を並べたりできると思うんです

私はプラグインを使いたくないので

＞ＨＴＭＬの文法（ソース）でできないものでしょうか？

と書いたんです

分かりずらくてすいませんでした

通報する

お礼日時：2022/03/06 18:00

No.2

回答者： fujillin
回答日時：2022/03/06 11:53

No1です。

＞違うこともあります
＞教えていただいたコードで3枚並べたら
＞画像のサイズが通常より大きくなりました
後出しでいろいろ言われても、質問文にないことは勝手に想像する以外に方法がありません。

＞画像を横に2～4枚くらい並べたいのです。
通常、imgを並べれば画面幅で下に送られますから、そうではないことをお望みなのかと解釈しました。
「綺麗に横並びで揃えたい」ということと解釈して、No1の回答をしましたが、どうやら成り行きで良いということみたいなので、小細工する必要はなにもなさそうです。
そのままimgを並べれば、適当なところでブラウザが次の行に送ってくれるはずです。

No1の回答のCSSで、
.imageWrapper {
display: flex;
flex-wrap: wrap;
}
だけを、残してあとは削除すれば「適当な横並び」になるものと思います。

無理難題（＝規則性もなく、判断も曖昧）でなければ、大抵のレイアウトは実現可能なはずです。
ただし、条件があるのならきちんと伝わるようにご質問なさらない限り、適切な回答は得られないと思います。

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2022/03/05 21:57

こんばんは

ワードプレスは存じませんが、対象は画像ということで良いのでしょうか？

＞画像を横に2～4枚くらい並べたいのです。
非常に曖昧なので、どのようになさりたいのか不明ですけれど・・・
2枚ずつ、あるいは4枚ずつのように固定で良いのでしょうか？
また、各画像は同じサイズ（＝横幅）と考えても良いのでしょうか？

＞ＨＴＭＬの文法（ソース）でできないものでしょうか？
＞可能なら画像間の間隔も調整したいです
可能とは思いますが、上記が不明なので質問者様の思い通りかどうかは不明ですけれど、以下ご参考までに。

※ 列数を「--divid」に設定し、画像間の間隔を「--imgMargin」に設定しておきます。
（以下の例では、「4枚並び」で「画像のmarginを3px」にしています。）
※ 例えば、3列で画像の隙間なしにするなら、それぞれを 3、0 としてください。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
--divid: 4;
--imgMargin: 3px;
}
.imageWrapper {
display: flex;
flex-wrap: wrap;
}
.imageWrapper img {
margin: calc(var(--imgMargin));
width: calc(100% / var(--divid) - 2 * var(--imgMargin));
}
</style>
</head>
<body>
<div class="imageWrapper">
<img src="./img/photo01.jpg" />
<img src="./img/photo02.jpg" />
<img src="./img/photo03.jpg" />
<img src="./img/photo04.jpg" />
<img src="./img/photo05.jpg" />
<img src="./img/photo06.jpg" />
<img src="./img/photo07.jpg" />
<img src="./img/photo08.jpg" />
<img src="./img/photo09.jpg" />
</div>
</body>
</html>