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

色々なサイトを巡回していると、他のサイトを画像付きで紹介しているページがたくさんあります。
どうやるのかなーと思い調べてみたら、どうやら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
マンモスと歩く夢を見た

ブログカスタマイズ
スポンサーリンク
みやのひろをフォローする
プロフィール
_20161004_124319s

Author:みやのひろ
言語聴覚士。休日はさすらいの手話落語家(予定)。ポケカにガチハマり中。最近は自転車や山登りなどアウトドアにも興味が出てきたメタボリックな30代。

GO!GO!ST-言語聴覚士兼アマチュア落語家のブログ-

コメント

タイトルとURLをコピーしました