【ブログ】他サイトを画像のように埋め込み表示する方法【カスタマイズ】

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

色々なサイトを巡回していると、他のサイトを画像付きで紹介しているページがたくさんあります。
どうやるのかなーと思い調べてみたら、どうやらiframeタグを使うことで他サイトを画像のように埋め込んで表示しているらしいということがわかりました!

さっそくiframeタグの使い方を調べたので備忘録として記します。

iframeタグの記述

<iframe width="300" height="200" src="http://..." ></iframe>

HTMLの詳細は以下のとおりです。

src=""     表示するHPのURL
width=""    フレームの横幅
height=""   フレームの高さ

クリックを無効にする

フレーム内がクリックできないようにstyle="pointer-events : none" を設定します。

<iframe width="300" height="200" src="http://..." style="pointer-events : none" ></iframe>

スクロールを無効にする

フレーム内がスクロールしないようにscrolling=""  yes/no/autoを設定します。

<iframe width="300" height="200" scrolling="no" src="http://..." style="pointer-events : none" ></iframe>

完成

http://stnavi.info/

言語聴覚士リハビリ情報サイト:STナビさん例にして表示させてみましたw

参考にしたサイト
Asial BLOG
マンモスと歩く夢を見た

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

-スポンサーリンク-

コメントを残す

*

CAPTCHA