FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

ブログ記事の画像キャプションを表示したい

解決済

ブログ記事の画像キャプションを表示したい

SHOKO06
遊覧客
23 0 2

 

ブログ記事詳細(【 {{ article.content }} 】 で出力される内容)の画像キャプションを表示させたいです。

1 件の受理された解決策

NIIGAKI_HYUGA
Shopify Partner
54 24 16

成功

@SHOKO06 様

初めまして。新垣です。

 

下記コードを{{ article.content }}が存在するファイル、または、そのファイルが取り込んでいるJSファイルに記述してください。

document.addEventListener('DOMContentLoaded', function() { // ページ読み込み時
    const images = document.querySelectorAll('img[alt]'); // alt属性を持つすべての画像を取得

    images.forEach(image => {
      const altText = image.getAttribute('alt');
      if (altText) { // alt属性が存在する場合
        const p = document.createElement('p');
        p.textContent = altText; // pタグにalt属性のテキストを挿入
                p.className = 'article-img_alt'; // classを追加
        image.insertAdjacentElement('afterend', p); // 画像の直後にpタグを挿入
      }
    });
  });

 

以上、ご参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください

元の投稿で解決策を見る

3件の返信3

NIIGAKI_HYUGA
Shopify Partner
54 24 16

成功

@SHOKO06 様

初めまして。新垣です。

 

下記コードを{{ article.content }}が存在するファイル、または、そのファイルが取り込んでいるJSファイルに記述してください。

document.addEventListener('DOMContentLoaded', function() { // ページ読み込み時
    const images = document.querySelectorAll('img[alt]'); // alt属性を持つすべての画像を取得

    images.forEach(image => {
      const altText = image.getAttribute('alt');
      if (altText) { // alt属性が存在する場合
        const p = document.createElement('p');
        p.textContent = altText; // pタグにalt属性のテキストを挿入
                p.className = 'article-img_alt'; // classを追加
        image.insertAdjacentElement('afterend', p); // 画像の直後にpタグを挿入
      }
    });
  });

 

以上、ご参考になりましたら幸いです。

Freelance Solution Engineer | 新垣
JavaScript Liquid Theme, React Remix App
投稿は参考になりましたか?「いいね!」でお教えください。
解決しない場合、個別に対応も可能ですのでプロフィールからお気軽にメッセージください
SHOKO06
遊覧客
23 0 2

ありがとうございます!

早速試してみます。

SHOKO06
遊覧客
23 0 2

無事、こちらで実装できました!ありがとうございました。