外部リンクをカード形式で表示する(はてなブログカード編)
Gatsbyで外部リンクを記事に入れる際に、カード形式で表示する方法を試してみました。
一番簡単にできそうなはてなブログのブログカード機能を使ってみました。
はてなブログカード
<iframe title="GMailSend Address Checker - 誤送信防止 -" src="https://hatenablog-parts.com/embed?url=https://gmsck.seya.work/" style="width:100%;height:150px; max-width:600px; margin-left:auto; margin-right:auto;" frameborder="0" scrolling="no" loading="lazy"></iframe>
<iframe title="The Fastest Frontend for the Headless Web | Gatsby" src="https://hatenablog-parts.com/embed?url=https://www.gatsbyjs.com/" style="width:100%;height:150px; max-width:600px; margin-left:auto; margin-right:auto;" frameborder="0" scrolling="no" loading="lazy"></iframe>上記のようなコードを埋め込むことで、以下のように表示できます。
コードの説明
基本は以下のようになります。
<iframe src="https://hatenablog-parts.com/embed?url=【ページのURL】"></iframe>サイズ等は、styleで指定します。
style="width:100%;height:150px; max-width:600px; margin-left:auto; margin-right:auto;"width:100%;横幅100%height:150px;縦150ピクセルmax-width:600px;横幅は最大でも600pxmargin-left:auto; margin-right:auto;真ん中に表示
Chrome拡張機能「Create Link」で簡単にコード作成
Chrome拡張機能「Create Link」を使うことで、簡単に上記のコードを生成しコピーすることが可能です。
Create Linkの設定画面で、以下のフォーマットを追加します。
<iframe title="%text%" src="https://hatenablog-parts.com/embed?url=%url%" style="width:100%;height:150px; max-width:600px; margin-left:auto; margin-right:auto;" frameborder="0" scrolling="no" loading="lazy"></iframe>使い方は、
- リンクしたいページを開く
- CreateLinkのアイコンを押す
- 上記で追加したフォーマットを選ぶ(これではてなブログカードの埋め込みコードがコピーされます)
- ブログに張り付ける
Gatsbyjs以外でも使えます
この方法は、Gatbyjsでなくてもiframeを埋め込めるブログやWEBページで利用できます。
参考にしたサイト
他の方法
Gatsbyjsらしくプラグインやコンポーネントでブログカードを作成できる方法もあるようです。
機会があれば試してみたいと思います。