dポイントプレゼントキャンペーン実施中!

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

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

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

HTMLの文法(ソース)でできないものでしょうか?

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

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

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

質問者からの補足コメント

  • つらい・・・

    ありがとうございます。

    <また、各画像は同じサイズ(=横幅)と考えても良いのでしょうか?
    違うこともあります

    教えていただいたコードで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

A 回答 (5件)

No3です。



>私はプラグインを使いたくないので
>>HTMLの文法(ソース)でできないものでしょうか?
>と書いたんです
だから、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>
    • good
    • 0
この回答へのお礼

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

感謝いたします

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

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

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

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



https://www.conoha.jp/lets-wp/wp-image/#section0 …
    • good
    • 0
この回答へのお礼

ありがとうございます。

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

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

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

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

No2です



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

>HTMLの文法(ソース)でできないものでしょうか?
というご質問なのですから、HTMLとCSSはわかっているんですよね?
    • good
    • 0
この回答へのお礼

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

<HTMLとCSSはわかっているんですよね?

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

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

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

>HTMLの文法(ソース)でできないものでしょうか?

と書いたんです

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

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

No1です。



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

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

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

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

こんばんは



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

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

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

※ 列数を「--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>
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!