blockquoteでimgタグを囲い、複数の写真を引用に表示させたい

Question

Teratailへの質問は初投稿です。
よろしくお願いします。

現在の課題

現在、WordPressにてブログを作成しているのですが、
imgタグで表示する写真をblockquoteタグで複数囲むと、
下記のように表示されてしまいます。

該当箇所のコード

コード自体もimgタグをblockquoteで囲むだけの簡単なものです

<blockquote>
<a href="http://***.com/wp-content/uploads/2018/02/DSC08340.jpg"><img class="alignleft size-medium wp-image-351" src="http://***.com/wp-content/uploads/2018/02/DSC08340-400x267.jpg" alt="" width="400" height="267" /></a>

<a href="http://***.com/wp-content/uploads/2018/02/DSC08331.jpg"><img class="alignleft size-medium wp-image-350" src="http://***.com/wp-content/uploads/2018/02/DSC08331-400x267.jpg" alt="" width="400" height="267" /></a>

<a href="http://***.com/wp-content/uploads/2018/02/DSC08323.jpg"><img class="alignleft size-medium wp-image-349" src="http://***.com/wp-content/uploads/2018/02/DSC08323-400x267.jpg" alt="" width="400" height="267" /></a>

<a href="http://***.com/wp-content/uploads/2018/02/DSC08304.jpg"><img class="alignleft size-medium wp-image-348" src="http://***.com/wp-content/uploads/2018/02/DSC08304-400x267.jpg" alt="" width="400" height="267" /></a>
</blockquote>

実現したいこと

imgタグが１つであれば、写真は引用の「“ ”」で囲まれている部分に収まるのですが、
今回は複数の写真を「“ ”」で囲まれている引用内に表示させるような操作を行いたいです。

使用しているテーマ

テーマは「Simplicity2」を使用しています。
Simplicity2のダウンロードページ

皆様のお知恵を拝借したく、よろしくお願いします。

Comments

[x_x]

グレーの部分とはどこのことでしょうか？

[kogure]

こんにちは。現状のcssファイルおよび引用として使用しているグレー部分のコードなどあわせて記載した方が回答しやすいです。もし、何らかのテーマを使用しているのならそのテーマ名など。

[Panda_Program]

x_x様 「グレーの部分」は「“ ”」で囲まれている部分です。本文の文言をそのように修正しました

[kei344]

使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。

[Panda_Program]

kogure様 テーマは「Simplicity2」を使用しています。https://wp-simplicity.com/downloads/downloads2/　また、blockquote, imgタグ共にcssには当方からは何も追加していない状態です

[Panda_Program]

kei344様 本文にご指摘いただいたようにリンクを追加いたしました

Answer 1

下記CSSをスタイルに追加すれば解決できると思います。（原因は画像にfloatが指定されているためなので）

blockquote {
    overflow: hidden;
}

Comments

[Panda_Program]

CSSを追加したところ、ちゃんと表示されました。
ありがとうございました！

Answer 2

直接的な回答：cssの設定を修正し、blockquoteにheight属性を追加して適切に高さを設定すれば多分いける。
~~間接的な回答:「引用テキスト」でないもの（写真）をblockuquoteで囲っているのがそもそもおかしい。htmlの構造を再検討すべき。~~コメントを受け修正。お騒がせしました。

Comments

[x_x]

質問者はしっかり「引用」と認識していて、これが引用でないかどうかはこれだけでは判断できないと思いますが、いかがでしょうか？

[KojiDoi]

写真が引用「テキスト」になることはあり得ません。

[x_x]

blockquoteにはテキストを含めなければいけないということでしょうか？ どこの仕様でしょう？

[KojiDoi]

https://momdo.github.io/html/grouping-content.html#the-blockquote-element
これをみて、どう読めば写真をblockquoteできると解釈できるのか教えていただきたい。

[x_x]

フローコンテンツにはimgが含まれています。わたしにはまったく問題ないようにしか思えません。

[dit.]

>KojiDoiさん
質問者さんがどのような意図でblockquoteを使ったかわかりませんが、「自分が撮った写真、自分が作成したものではない画像を参考として掲載する場合、「引用」の使用は問題ないと思いますがいかがでしょうか。
x_xさんも指摘されていますが「テキストでなければいけない理由」があるのでしょうか。
画像も著作物です。

[KojiDoi]

なるほど、個人的には釈然としないものがありますが、確かにテキスト以外を除外する根拠は見当たらないようです。回答は修正しておきます。