外部サイトをWordPressブログの記事内に埋め込んでみよう

wordpressでブログを作ろう

2025.07.25

この記事は約4分で読めます。

　GoogleマップやYouTubeはブログの埋め込みコードを用意しているが、埋め込みコードを用意していないサイトを自分のブログやHPに埋め込むことってできるんだろうか？

　「iframe」というHTMLタグを使って、外部サイトを投稿記事の中に埋め込んでみたよ。

外部サイトを埋め込むためのHTMLタグ「iframe」

ｼｲちゃん

　紹介したいサイトがあるんだけど、GoogleマップやYouTubeみたいに自分のサイトに、埋め込みができないかな？

　「iframe」というHTMLタグを使えば、自分のwebページに他のサイトを埋め込むことができるみたいだよ。

　GoogleマップやYouTubeも「iframe」を使って埋め込みコードを提供してるんだって。

　「iframe」の基本の書き方から見てみよう。

<iframe id="inline-frame"
width="表示する幅(px)"
height="表示する高さ(px)"
src="埋め込むページのURL">
</iframe>

ｼｲちゃん

　実際にURLや高さ・幅を指定したコードが下のコード。

<iframe id="inline-frame" width="800" height="450" src="https://freesoft.0hs.org"> </iframe>

　上のコードを埋め込んでみた。

　下のような表示になったよ。

ｼｲちゃん

　ちゃんとスクロールしたりできるんだね。

　リンクをクリックすれば、リンク先が表示されるよ。

　「sandbox」という属性を付け加えるとscriptやformの送信等を無効にできるんだって。

ｼｲちゃん

　「sandbox」を付け加えてみようか？

　コードは下のようになるんだよね。

<iframe id="inline-frame" width="800" height="450" src="https://freesoft.0hs.org" sandbox> </iframe>

　上のHTMLコードを埋め込むと下のように表示される。

ｼｲちゃん

　送信フォームが無いから違いが良くわからないや…。

ｼｲちゃん

　色々なデバイスがあるから、デバイスに合わせて、幅を変えたいんだけど。

　CSS（スタイルシート）で指定すれば、デバイスに合わせることができるよ。

iframe {
width: 100%;
}

　実際にWordPressにHTMLコードを埋め込む場合は

1.HTMLの挿入を押す。

2.HTMLを書き込むボックスが出てくるので、ボックス内にHTMLを入力する。

HTMLの挿入-ビジュアルエディタ-WordPress

3.〔OK〕を押す。

　特定の投稿ページ内だけにCSS（スタイルシート）を適応させたい場合は

1.記事の編集画面をスクロールする。

2.カスタムCSS内に、スタイルシートを記入する。

カスタムCSS-WordPress

ｼｲちゃん

　割と簡単に外部サイトをWordPressの投稿記事内に埋め込むことができるんだね。

　うん、簡単だったね。