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

[SHOKO06]

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

[NIIGAKI_HYUGA · Accepted solution]

@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タグを挿入
      }
    });
  });

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

[SHOKO06]

ありがとうございます！

早速試してみます。

[SHOKO06]

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