2019-01-24に投稿

GatsbyJSでiframeタグを使う

GatsbyJSでiframeタグを使う

ちょっと書評の仕事が来たのでこのブログを書いた。
その時、Amazonリンクを書評だから貼ってしまおう!と言うことで実装した。

gatsby-remark-responsive-iframeを使う

こういうiframeタグを使う場合は、gatsby-remark-responsive-iframeを使う。

gatsby-remark-responsive-iframeをインストール

npm install --save gatsby-remark-responsive-iframe

gatsby-config.jsmの設定

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [`gatsby-remark-responsive-iframe`],
    },
  },
]

実際の動作確認

それではAmazonリンクをiframeで入れてみよう。
widthとheightを入れないと動かないので注意が必要。
017-1.jpg

出来た!

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第14回 GatsbyJSでフォントを変更する
第15回 GatsbyJSでMarkdownで画像を表示する
第16回 GatsbyJSでiframeタグを使う
第17回 GatsbyJSでMrakdown内でコンポーネントを使う
第18回 GatsbyJSでカテゴリー機能を実装する

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント