Dawn13.0.0を使用中です。
ブログ記事のセクションで、
添付
のような記事一覧になるようコード編集をしたのですが、
欲を言えば日付・タイトルの横にサムネイルが表示されるような一覧にしたいです。
おすすめのカスタマイズ方法などありましたら、ご教示いただきたいです。
お願い致します。
Hoosel1328様
ご質問拝見いたしました。
記事のサムネイル画像を表示させる場合、
を表示させたい箇所に記入いただくことで表示させることが可能です。
下記、一例ではありますが、サムネイルとタイトル、日付を横並びで表示させるコードとなります。
{%- for article in blog.articles -%}
{%- if article.image != blank -%}
{%- else -%}
{%- endif -%}
{{ article.published_at | date: '%Y.%m.%d' }}
{{ article.title }}
{%- endfor -%}
また、画像とテキストの横並びにするCSSコードを追加いただくことで、表示を横にすることが可能です。
.articleItem{
display: grid;
grid-template-columns: 200px 1fr;
gap: 20px;
}
@media screen and (max-width: 640px) {
/* SP時の画像の幅 */
.articleItem{
grid-template-columns: 100px 1fr;
}
}
一度ご確認くださいませ。
コードの修正など専門知識が必要になりますので、
解決が難しいようでしたら、コードを書ける方や制作会社、shopifyパートナー等にご相談、修正依頼等されることを推奨いたします。
ご参考までに。
私たちの励みにもなりますので、
お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。
分からない点があれば、またいつでもご連絡ください。
株式会社フルバランス
株式会社フルバランス 様
お世話になっております。
ご返答いただきありがとうございます。
ご提案いただいたコードを挿入してみたところ、
望んでいた通りの表示になり大変感動しております。
デスクトップ版でも問題なく綺麗に表示されております。
ご教示いただきありがとうございました。
一点、追加でのご相談なのですが、
上記2つのコード挿入後、ブログタイトルのリンクカラーが設定したカラーとは異なる
初期設定のような青色になってしまったのですが、こちらは修正可能でしょうか？
添付写真も合わせてご確認お願いいたします。
株式会社フルバランス 様
お世話になっております。
度々申し訳ありません。
先ほど、journalのカスタムCSSに下記コードを挿入したところ、
リンクカラーが元に戻りました。
大変お騒がせいたしました。
そして、ご協力いただきありがとうございました。
a,a:hover,a:visited{
color: inherit;
}