検索結果一覧の画面において、アイキャッチ画像を表示させたい

[HIROKO-M]

要件

検索結果一覧の画面で表示される各記事にアイキャッチ画像を追加・表示させたい 例）https://sensitive-skin.real-cosme.net/?s=%E3%82%A8%E3%83%AA%E3%82%AF%E3%82%B7%E3%83%BC%E3%83%AB

![image][sensitive-skin.real-cosme.net__p=53814 (3).png]

5/24 追加要件

各記事を関連記事と同じの形式（＝アイキャッチ＋カテゴリ＋日付＋タイトル）で表示させてほしい

![image][検索一覧.png]

実装方法

・子テーマで実現する ・.p-archive__link に display: grid; を追加し、アイキャッチ画像を表示するスペースを作り、各投稿のアイキャッチを表示させることで実現できるのではと思います。 ・課題 REAL_COSME-12 と同様

[HIROKO-M]

コメントなし

[HIROKO-M]

@松田 寛子 内容確認いたしました。 よろしくお願いします。

[HIROKO-M]

コメントなし

[HIROKO-M]

コメントなし

[HIROKO-M]

@松田 寛子 お疲れ様です。課題12同様、子テーマを用いて修正を行いましたのでご確認お願いいたします。

rev(REAL_COSME/real-cosme:9b53fc093a)

themes/null_biz002_child_kadai12/search.php 検索結果用のレイアウトを使用するためにクラス名を追加しました。

themes/null_biz002_child_kadai12/style.css 検索結果一覧の画像を表示させるよう修正を行いました。

ご確認お願いいたします。

[HIROKO-M]

@旭野絵里 お疲れ様です。 上記修正およびPushありがとうございます！

@肥田麻乃 上記の通り修正いただきましたので、画面の確認をお願いいたします。

[HIROKO-M]

@松田 寛子 ご対応ありがとうございます。

こちらdev環境にて問題なく修正が確認できました。 引き続きよろしくお願いいたします。

[HIROKO-M]

@旭野絵里 cc @肥田麻乃 お疲れ様です。 実装いただいた内容で、埋め込んだ画像の位置が統一されていなかったので一点修正を加えました。

rev(REAL_COSME/real-cosme:0431086893)

続いて、肥田さんに画面をご確認いただきまして、追加で要件をいただきました。 ※上記要件の内容も合わせて修正いたします。

追加要件

各記事を関連記事と同じの形式（＝アイキャッチ＋カテゴリ＋日付＋タイトル）で表示させてほしい

![image][検索一覧.png]

上記ご対応をお願いいたします。

[HIROKO-M]

コメントなし

[HIROKO-M]

@松田 寛子 お疲れ様です。修正ありがとうございます。

修正が完了しましたのでご確認お願いいたします。

rev(REAL_COSME/real-cosme:3b21f1bbc9)

ファイル themes/null_biz002_child_kadai12/search.php カテゴリーと日付を表示させるように修正を行いました。 またタイトルのクラス名を一部変更し、関連記事同様タイトルが複数行にわたって表示されるように修正を行いました。

themes/null_biz002_child_kadai12/style.css 上記の修正によってタイトルの行間がかなり詰まってしまうため、行間を調整しました。

ご確認お願いいたします。

[HIROKO-M]

@旭野絵里 お疲れ様です。 コードと画面を確認しました。 期待する要素が表示できていると思います！

@肥田麻乃 上記の通り、実装が完了しました。 dev環境で表示をご確認お願いいたします。 https://dev-sensitive-skin.real-cosme.net/?paged=2&s=%E3%82%A8%E3%83%AA%E3%82%AF%E3%82%B7%E3%83%BC%E3%83%AB

[HIROKO-M]

@松田 寛子 お疲れ様です。 ご対応ありがとうございます！

内容確認させていただきました。

一点ご相談です。 表示内容としては依頼させていただいたものと相違ありません。 各記事の上下左右の余白やフォントサイズなど全体のデザインを 課題12の「関連記事」と合わせていただくことは可能でしょうか？ （※「〜の検索結果」見出し部分除く）

「関連記事」に比べて、 一画面内に表示される記事数が少なくなってしまうこと、 左右の余白が広く、フォントサイズが小さいことが気になっています。

ご確認の程よろしくお願いいたします。

（添付画像2枚あり）

![image][検索結果20230529.png] ![image][関連記事20230529.png]

[HIROKO-M]

@肥田麻乃 ご確認ありがとうございます。 上記承知しました。

@旭野絵里 上記ご要望の通り、余白とフォントサイズの修正をお願いします。

[HIROKO-M]

@松田 寛子 お疲れ様です。 修正を行いましたのでご確認お願いいたします。

rev(REAL_COSME/real-cosme:2f20b20ade)

ファイル themes/null_biz002_child_kadai12/search.php 関連記事と同じレイアウトにするために、同じクラス名を使用しました。

themes/null_biz002_child_kadai12/style.css 検索結果一覧用のレイアウトの指定が不要になったため、削除しました。 （行間の削除を忘れていたため、こちらで再度修正しました。#rev(REAL_COSME/real-cosme:b9aa8a28a8)）

ご確認お願いいたします。

[HIROKO-M]

REAL_COSME/real-cosme#2 dev を関連プルリクエストに追加しました

[HIROKO-M]

REAL_COSME/real-cosme#2 dev をマージしました

[HIROKO-M]

@旭野絵里 お疲れ様です。 本件は本番環境まで反映しましたのでクローズさせていただきます。 ご対応ありがとうございました！