![iframeとは?埋め込み方に注意しよう!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/c19f14d6a92c46a594ef716db0ac3253/Group%20452%20(1).png?w=1200&fm=webp)
SEO
更新日: 2023/12/12
iframeとは?埋め込み方に注意しよう!
![character_balloon](/media/character/purple_normal_left.png)
ブルーちゃん教えてもらえないかしら?
パープルちゃんどうしたのー?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/purple_normal_left.png)
iframeってなにかしら?
あーiframeだねー
![character_balloon](/media/character/blue_normal_right.png)
じゃぁ今日はiframeについて説明するよー
![character_balloon](/media/character/blue_normal_right.png)
iframeとは?
![iframeとは?埋め込み方に注意しよう!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/4935167f7c054ab79fec57f4ecbdecfb/iframe1.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
iframeとは、Webページ内に他のページの内容を埋め込んで表示させるためのHTMLタグだよ
![character_balloon](/media/character/blue_normal_left.png)
src属性で埋め込みたいWebページのURLを指定するんだ
![character_balloon](/media/character/blue_normal_left.png)
実際に例を挙げると、、、
![character_balloon](/media/character/blue_normal_left.png)
このコードをHTMLのbody内に入れると、
![character_balloon](/media/character/blue_normal_left.png)
っていうように、Youtubeが埋め込まれて表示されるよ!
![character_balloon](/media/character/blue_normal_left.png)
ここでは、srcに「Youtubeテーマソング」のURLを入れているから、それがWebサイトに埋め込まれて表示されるんだ!
iframeへCSSを適用することはできるの?
![character_balloon](/media/character/blue_normal_left.png)
iframeにCSSを適用させる方法は3つあるよ!
![character_balloon](/media/character/blue_normal_left.png)
読み込む側で調整するか、読み込まれる側で調整するかって感じだね
iframeへのCSS適用方法1.iframeタグ内に属性を指定
![iframeとは?埋め込み方に注意しよう!の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/40158600aff34247870a441fd3b8a899/iframe2.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
1つ目は、iframeタグ内にstyle属性やclass属性を指定して、cssをあてる方法だよ
![character_balloon](/media/character/blue_normal_left.png)
読み込む側で直接指定できるから、Webサイトのデザインに合わせて調整できるよね
![character_balloon](/media/character/blue_normal_left.png)
ただ、読み込んだWebサイトが意図しない改変をしないように気を付けようね
iframeへのCSS適用方法2.jQueryで調整
![iframeとは?埋め込み方に注意しよう!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/7683ff71e8b14623b2197cdaa60b0d4f/iframe3.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
2つ目は、読み込んだWebサイトにjQueryを仕込んでおいて表示を制御する方法だよ
![character_balloon](/media/character/blue_normal_left.png)
この方法も、iframeで埋め込むWebサイトの意図に反しないよう注意しようね
iframeへのCSS適用方法3.元のページでCSSを指定
![iframeとは?埋め込み方に注意しよう!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/15deb628a5944f5293d2b09aff33d16e/iframe4.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
3つ目は、読み込み先のCSSで調整する方法だよ
![character_balloon](/media/character/blue_normal_left.png)
大元のWebページ自体で調整されるから、理想的な形だよね
iframeの高さ自動調節ってなに?
![character_balloon](/media/character/blue_normal_left.png)
iframeを埋め込むときに高さが問題になることが多いんだ
![character_balloon](/media/character/blue_normal_left.png)
高さ問題を回避するために高さを自動調節する手法があるんだよ
iframeの高さ調節方法1.スクロールを表示しない
![iframeとは?埋め込み方に注意しよう!の画像_14枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/6f38197562044fd6b153e9b7d88129fb/iframe5.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
iframeで埋め込んだ部分にスクロールを表示しないことで、まるで埋め込んでいないように違和感なく見せることができるよ
![character_balloon](/media/character/blue_normal_left.png)
iframeで埋め込むWebページの高さを取得して表示領域を調節するんだ
![character_balloon](/media/character/blue_normal_left.png)
ユーザーは自然な見た目で情報をインプットできるよね
iframeの高さ調節方法2.スクロールを表示する
![iframeとは?埋め込み方に注意しよう!の画像_16枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/246031859c5047c7bf225c3ef285d2ea/iframe6.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
あえてスクロールを表示することで、表示領域を管理してWebページ全体の統一性を崩さないこともできるよ
![character_balloon](/media/character/blue_normal_left.png)
埋め込み先によって高さや表示ボリュームが違うと、大元のWebページのデザインが崩れてしまうこともあるよね
![character_balloon](/media/character/blue_normal_left.png)
埋め込んだ内容を表示するスペースを確保しておくことで、制御しやすくなるんだよ
![character_balloon](/media/character/blue_normal_left.png)
Webサイトに合わせて最適な埋め込み方を検討してみてね!
iframeはSEOに影響はあるの?
![character_balloon](/media/character/blue_normal_left.png)
iframeを利用することによるSEO効果は期待できないんだよ
![character_balloon](/media/character/blue_normal_left.png)
iframeで読み込まれたコンテンツは、Webサイトのコンテンツとしては評価されないからだね
![character_balloon](/media/character/blue_normal_left.png)
埋め込む位置を間違えると逆にSEOに悪影響な場合もあるよ
![character_balloon](/media/character/blue_normal_left.png)
特にheadタグ内にiframeを埋め込まないように気を付けようね
![character_balloon](/media/character/blue_normal_left.png)
SEOを考慮するなら、iframeで埋め込むよりも、テキストや画像でコンテンツとして組み込むことができないかを検討する方が理想的だよ!
![character_balloon](/media/character/blue_normal_left.png)
iframeについて最後にまとめておくね
まとめ
◆iframeとはWebページ内に他のページの内容を埋め込んで表示させるためのHTMLタグ
◆制御方法を工夫することで理想の見せ方を実現できる
◆SEOには逆効果なこともあるので注意が必要
iframeを使うときは埋め込み方や制御に注意が必要なのね
![character_balloon](/media/character/purple_normal_right.png)
ありがとうブルーちゃん助かったわ
![character_balloon](/media/character/purple_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
便利な機能だけど気を付けて使ってねー!
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。