search

HIROKO-M / Test_002

0 stars 0 forks source link

各投稿記事内の関連記事にアイキャッチ画像を表示させたい #166

Open HIROKO-M opened 3 weeks ago

HIROKO-M commented 3 weeks ago

要件

各投稿記事内の「関連記事」に表示される記事にアイキャッチ画像を追加し表示させたい

例）https://sensitive-skin.real-cosme.net/?p=53814

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

実装方法

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

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

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

HIROKO-M commented 3 weeks ago

@松田 寛子 お疲れ様です。本日の進捗報告です。 null_biz002_child_kadai12という名前で子テーマを作成しました。

関連記事に関するループ処理に関して現在検討中です。

HIROKO-M commented 3 weeks ago

@松田 寛子 お疲れ様です。本日の業務報告です。 サムネイル画像はloop-content.phpを修正することで出力できました。 しかしグリッドレイアウトに関して、.p-archive__link に display: grid; を設定しているのですが、「親要素がblockである」とデベロッパーツールで表示され上手く反映させることができません。 次回親要素のディスプレイの変更方法を検討します。

HIROKO-M commented 3 weeks ago

@松田 寛子 お疲れ様です。 子テーマnull_biz002_child_kadai12にて実装が完了しました。

修正ファイル ・style.css グリッドレイアウトの修正を行いました。

・function.php 子テーマの設定を行いました。

・template-parts/loop-content.php 「関連記事」にてアイキャッチ画像が表示されるように修正を行いました。

現在テーマは親テーマを有効化しています。 お手すきの際にご確認お願いいたします。

HIROKO-M commented 3 weeks ago

@旭野絵里 お疲れ様です。 上記ご対応ありがとうございます。 以下の子テーマ確認しました。

themes/null_biz002_child_kadai12/

添付画面のように、表示される画面サイズが統一されていないようです。

なので、 .image-related で width: 6.7em; と指定してみていただけますか？

また、一点質問です。

・template-parts/loop-content.php 「関連記事」にてアイキャッチ画像が表示されるように修正を行いました。

子テーマ内に template-parts フォルダが用意され、その中には loop-content.php 以外のファイル も含まれていますがこれらファイルも修正したという事ですか？

修正しましたら、お手数ですが、devブランチへPushをお願いします。

どうぞよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

![image][206133.jpg] ![image][206134.jpg]

HIROKO-M commented 3 weeks ago

@松田 寛子 お疲れ様です。ご確認ありがとうございます。 画像幅の修正、pushが完了いたしましたのでご確認お願いいたします。

rev(REAL_COSME/real-cosme:a8cc1395f7)

子テーマ内に template-parts フォルダが用意され、その中には loop-content.php 以外のファイル も含まれていますがこれらファイルも修正したという事ですか？

フォルダごと親テーマからダウンロードしておりました。 今回はloop-content.php　のみ修正いたしましたので、他のファイルは削除いたしました。

どうぞよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

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

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

HIROKO-M commented 3 weeks ago

@松田 寛子 お疲れ様です。

dev環境で確認し、画像のサイズ含め問題ございません。 ご対応ありがとうございました。

本番環境にて引き続きよろしくお願いいたします。

HIROKO-M commented 3 weeks ago

コメントなし

HIROKO-M commented 3 weeks ago

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

HIROKO-M commented 3 weeks ago

コメントなし