はてなブログでYouTubeや記事リンクを紹介する際、通常は「埋め込み」機能や、MarkdownでURL末尾に :embed を付ける方法（ブログカード）を使います。
しかし、「リンクカードではなく、Webサイトそのものを記事内に表示させたい」という場合はどうすれば良いでしょうか？
この記事では、iframeタグを使ってWebページを丸ごと埋め込む手順を解説します。
目次:
結論：iframeタグを直接記述すればOK
結論から言うと、HTMLの <iframe> タグをそのまま記述することで埋め込みが可能です。
はてなブログはMarkdownモードであってもHTMLタグを認識するため、以下のコードをコピペしてURLを書き換えるだけで実装できます。 見たままモードを使ってる場合は、「HTML編集」タブを使えば大丈夫です。
▼埋め込み用コード
<iframe src="https://埋め込みたいURL" width="100%" height="500"> </iframe>
- src: 埋め込みたいページのURL（https〜）
- width=”100%”: 幅を100%に指定（スマホで見ても画面からはみ出しません）
- height=”500″: 高さ（表示したいサイズに合わせて数値を調整してください）
注意点：埋め込めないサイトもある
コードが正しいのに「接続が拒否されました」と表示される場合は、埋め込み先のサイトがiframeでの表示を許可していない（ブロックしている）可能性があります（Yahoo!やGoogle検索など）。
その場合はiframeでの表示を諦め、通常のテキストリンクや :embed を使用してください。
コメントを残す