HOME > 内部対策
内部対策
iframe(インラインフレーム)とは~CSS適用とHTML5での使い方・高さ自動調整について
2016/12/09内部対策
このエントリーをはてなブックマークに追加

iframe(インラインフレーム)を適切に使い、HTMLやCSS上で高さ等調整しながら、コンテンツ作成することが可能です。

今回は、iframeのCSS適用、iframeのHTML5での使い方、iframeの高さ自動調整について中心に解説したいと思います。

iframe(インラインフレーム)とは~CSS適用とHTML5での使い方・高さ自動調整について

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

目次

iframeとは
iframeのCSS適用方法
iframeのHTML5での使い方
iframeの高さ自動調整について
iframeのsrc属性について
iframeのスクロールバーについて
jquery・javascriptでiframeを操作する方法
iframeのtarget属性について
facebookのiframeについて
iframeのサンプルについて
iframeとSEO効果について
まとめ

iframeとは

iframeとは、src属性で指定したURL(リンク先ページの内容)をインラインフレーム表示できるHTMLタグの一つです。

iframeは、Inline Frameの略称で、「インラインフレーム」「アイフレーム」といった呼び名があります。

<iframe>~</iframe>タグの間には、iframeに対応してないブラウザ用に「この部分はインラインフレームを使用してます。」といったテキストを記述することが可能です。

iframeのCSS適用方法

iframeをCSS適用する場合、以下のような方法があります。

・iframeの枠デザインを調整
iframeタグにstyle属性やclass属性、id属性を指定し、枠のタイプや大きさ等をCSSで調整する方法

・iframe内のコンテンツを調整
src属性で指定したリンク先ページが読み込んでるCSSファイルを修正し、iframe内のコンテンツを調整する方法
または、jQueryを活用し、iframeを設置してるページ(親ページ)から、iframe内のコンテンツを調整する方法

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

iframeのHTML5での使い方

iframeのHTML5での使い方は、基本以下のようになります。
※参考:<iframe>-HTML5タグリファレンス

記述例:
<iframe src=”sample.html” width=”500″ height=”100″>
この部分はインラインフレームを使用してます。
</iframe>

上記のよう、src属性でリンク先を指定し、iframe内に表示したいコンテンツを読み込ませます。
widthでiframeの横幅、heightでiframeの高さを指定しておきましょう。

また、HTML4.01からHTML5へ移行により、廃止・追加された属性もあるようです。

iframeの高さ自動調整について

iframeの高さを自動調整する方法として、以下のようなサイトで紹介されてます。

iframeの高さを自動調整する | 0から目指すWebマスター
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。

iframeで埋め込んだページの幅・高さを取得する – リズムのじかん
CSSやjavascriptでスクロールを表示せず、埋め込んでない風に(いかにもページの一部ですよ風に)iframeを表示する。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

iframeタグのsrc属性について

iframeタグは、src属性を使いインラインフレーム内にコンテンツを読み込ませる方法が一般的です。

そのため、iframeタグを使用する際は、読み込ませたいコンテンツのリンク先を指定するsrc属性を合わせて記述する必要があると認識しておいた方がよいでしょう。

iframeのスクロールバーについて

iframeのスクロールバーを調整するには、以下のような方法があります。

・scrolling属性を使う
scrolling属性により、iframeのスクロールバーの表示・非表示を調整できますが、HTML4.01からHTML5へ移行により廃止されたタグとされてます。
※参考:波乱のiframe – BaraのWebサイト

記述例:
<iframe src=”sample.html” width=”500″ height=”100″ scrolling=”no”>
この部分はインラインフレームを使用してます。
</iframe>

しかし、Googleクロムブラウザでscrolling属性が効かないため、src属性で指定したリンク先ページのCSSに以下のような記述をするとiframeのスクロールバーを非表示にすることが出来るようです。
※参考:iframeの右スクロールバーを消す方法

記述例:
html {
overflow-y: hidden;
}

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

jquery・javascriptでiframeを操作する方法

JavaScript用のライブラリ「jquery」でiframeを操作する方法が、以下のようなサイトで紹介されてます。

jQuery で iframe 内の要素にアクセス : iframe 内を書き換え – 実験室 – ぐたり
jqueryを活用して、iframe内の要素が切り替わるデモや、実際のソースコードを紹介してるのでとてもわかりやすいです。

・iframeの親から子、子から親の操作をする
親ページ内からiframe内を操作したり、逆にiframe内から親ページを操作する方法を、実際のソースとデモで操作体験することができます。

iframeとtarget属性について

target属性・name属性・id属性の属性値を一致させ、aタグで指定したリンク先の内容にiframe内を変更することが可能です。
※参考:HTMLタグ/フレームタグ/インラインフレームを使用した時のリンクの設定方法 – TAG index

記述例:
<a href=”sample01.html” target=”demo01″>デモ01のコンテンツ</a>
<a href=”sample02.html” target=”demo01″>デモ02のコンテンツ</a>

<iframe src=”sample01.html” name=”demo01″ id=”demo01″>上記アンカーテキストをクリックすることで、このiframe内がデモ01もしくはデモ02のコンテンツに切り替わります</iframe>

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

facebookとiframeについて

iframeで検索すると、Facebookという複合キーワードで良く検索されてることがわかります。

検索結果を見ると、「iframe対応するためのfacebookページの作り方」「iframe版のLikebox」「iframe対応したfacebookページのスクロールバーを消す方法」といったコンテンツが多くみられます。

これらのコンテンツを参考に、facebookとiframeについての悩みを解決できる糸口が見るかるかもしれません。

iframeのサンプルについて

iframeのサンプルが、以下のようなサイトで紹介されてます。

ほんっとにはじめてのHTML5とCSS3:[63] インライン・フレームで 他のHTMLファイルを組み込もう <iframe>
HTMLソースと動作を確認できるわかりやすいiframeのサンプルサイトです。

インラインフレーム作成ツール
インラインフレームの大きさや枠線、スクロールバー、余白、フレーム名などを設定し、サンプルを見ながら、実際のソースコードまで取得できる便利なツールです。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

iframeのSEO効果について

iframeのSEO効果はほぼ期待できないでしょう。
※参考:iframeで表示したページはコンテンツの一部になるのか

有名なSEO情報サイトでは、「iframeで読み込まれたコンテンツ」は、コンテンツの一部として評価されないことが言及されてます。

まとめ

iframeで読み込む前に、テキストや画像で直接コンテンツとして組み込めないか検討しましょう。

評価されやすいコンテンツにし、SEO対策しながら、順位上昇を目指すことが重要です。

あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒

PR
内部対策
emタグとは~HTMLでの使い方とSEO効果・CSSで使うサイズ単位「em」との違い
2016/12/05内部対策
このエントリーをはてなブックマークに追加

emタグを適切に使い、テキスト文章にメリハリをつけながら、ユーザビリティを高めることが可能です。 今回は、emタグのHTMLでの使い方、emタグとstrongタグの違い、emタグのSEO効果について中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・emタグとは ・emタグのHTMLでの使い方 ・emタグのSEO効果について ・emタグとstrongタグの違い ・emタグの非推奨につい...続きを読む >>

内部対策
strongタグとは~HTML「bタグ」との違い・SEO効果について
2016/12/02内部対策
このエントリーをはてなブックマークに追加

strongタグで重要なテキストを示し、HTMLソースを最適化しながら、サイトパフォーマンスを高めることが可能です。 今回は、strongタグとHTML「bタグ」の違い、strongタグのSEO効果、HTML5のstrongタグについて中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・strongタグとは ・strongタグとHTML「bタグ」の違い ・strongタグのSEO効果 ・...続きを読む >>

内部対策
ドメイン年齢とは~チェック方法とSEO効果について
2016/11/25内部対策
このエントリーをはてなブックマークに追加

ドメイン年齢をチェックし、サイト運営期間が長ければ、SEO効果が期待できます。 今回は、ドメイン年齢のチェック方法、ドメイン年齢のSEO効果、サブドメインのドメイン年齢について中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・ドメイン年齢とは ・ドメイン年齢のチェック方法(調べる・調査・調べ方・検索方法) ・ドメイン年齢のSEO効果 ・サブドメインのドメイン年齢について ・ドメイン年...続きを読む >>

内部対策
インデックス削除とは~原因・確認・復活方法とGoogleへのURL削除申請依頼について
2016/11/22内部対策
このエントリーをはてなブックマークに追加

インデックス削除から復活させるために、Googleペナルティの原因を確認しながら、SEO対策を進めることが大切です。 今回は、インデックス削除の原因、インデックス削除の確認方法、インデック削除からの復活方法、GoogleへのURL削除申請依頼でインデックス削除する方法中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・インデックス削除とは ・インデックス削除の原因 ・インデックス削除の確認方法...続きを読む >>

内部対策
隠しリンク/隠しテキストとは~HTMLソース・CSSの探し方(見つけ方)とSEOペナルティについて
2016/11/18内部対策
このエントリーをはてなブックマークに追加

隠しリンクや隠しテキストは止め、Googleガイドラインに準拠しながら、SEO対策を進めることが大切です。 今回は、隠しリンクと隠しテキストの意味、隠しリンクと隠しテキストのHTMLソース・CSSでの探し方(見つけ方)、隠しリンクと隠しテキストのSEOペナルティについて中心に解説したいと思います。 あなたのサイトの順位大丈夫ですか?順位・リンク・内部を調べ、上昇に必要な対策教えます(無料)⇒ 目次 ・隠しリンク/隠しテキストとは ・「隠しリンクと隠しテキスト」のHTMLソース・...続きを読む >>

内部対策
サジェストとは~Googleサジェストキーワード取得ツールを使ったSEO方法
2016/11/08内部対策
このエントリーをはてなブックマークに追加

サジェスト機能を活用し、抽出した関連キーワードでコンテンツを作りながら、SEO対策に生かすことが大切です。 今回は、おすすめのGoogleサジェストキーワード取得ツール、Googleサジェストの仕組み、Googleサジェストキーワード取得ツールを使ったSEO方法中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・Googleサジェストとは ・おすすめのGoogleサジェストキーワード取得ツール ...続きを読む >>

内部対策
meta(メタタグ)とは~HTML記述法とSEO効果
2016/10/06内部対策
このエントリーをはてなブックマークに追加

meta(メタタグ)要素を正しく記述し、HTMLソースを最適化しながら、SEO対策を進めることが大切です。 今回は、meta(メタタグ)の意味、meta(メタタグ)のHTML・HTML5記述法、meta(メタタグ)のSEO効果中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・meta(メタタグ)とは ・meta(メタタグ)のHTML記述法 ・meta(メタタグ)のSEO効果 ・Google...続きを読む >>

内部対策
HTMLアンカーリンク(a hrefタグ)とは~使い方と別ページ(target blank)について
2016/09/13内部対策
このエントリーをはてなブックマークに追加

HTML(HTML5)のアンカーリンク(a hrefタグ)を適切に使い、テキストや画像のリンクを最適化することが大切です。 今回は、アンカーリンク(a hrefタグ)の使い方、アンカーリンク(a hrefタグ)と別ページ(target)、アンカーリンク(a hrefタグ)とSEOについて中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・アンカーリンク(aタグ)とは ・アンカーリンク(aタグ)の...続きを読む >>

内部対策
ヘッダーとフッターのHTML固定方法とデザインまとめ
2016/09/12内部対策
このエントリーをはてなブックマークに追加

ヘッダーやフッターを固定し、ユーザービリティを高めながら、サイト構築する方法があります。 今回は、ヘッダー・フッターのHTML(HTML5)固定方法、ヘッダー・フッターのデザイン、ヘッダー・フッターとSEOについて中心に解説したいと思います。 あなたのサイトの順位は大丈夫ですか?順位・リンク・内部を調べ、必要な対策をご案内します(無料)⇒ 目次 ・ヘッダー(header)とは ・フッター(footer)とは ・ヘッダー・フッターのHTML(HTML5)固定方法 ・ヘッ...続きを読む >>

この記事が役に立つと思ったら、ぜひ『フォロー』して下さい。

この記事が役に立つと思ったら、ぜひ『いいね!』して下さい。

1 / 1312345..10..13
この記事が役に立つと思ったら、ぜひ『フォロー』して下さい。
新着実験
人気実験BEST10
カテゴリー
このブログが役に立つと思ったら、ぜひ『フォロー』して下さい。
このブログが役に立つと思ったら、ぜひ『いいね!』して下さい。