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

日本語 ディスカッション 技術的なQ＆A
2

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

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

1 Like