1 views

実現する機能

他サイトの一部を自サイトに表示するために、<iframe>〜</iframe>を使いますが、他サイトの一部を縮小して見栄え良く表示させるのは容易ではありません。今回は、CSS3のtransformプロパティを使って整形する例をご紹介します。下図は、ドスパラ今週のセール品サイトの一部を縮小表示させたものです。自サイトから今週のセール品を確認できるので便利です。アフィリエイトにも使えるのではないかと考えています。

ドスパラ今週のセール品

ドスパラ今週のセール品サイトを縮小表示しています。縮小サイト内でも画面展開などの操作は可能ですが、見辛ければここをクリックして、ドスパラ今週のセール品サイトへ移動してください。

ドスパラ今週のセール品サイトへ移動

ドスパラ今週のセール品のHTML表記

下記文字の黄色は入力するコマンド緑はコマンド内容の説明です。

<div style="width:630px;height:500px;margin:0px;overflow:hidden;"> ← <div>で
表示範囲の指定。幅(width)、高さ(height)、上左下右の余白(margin)、範囲外非表示指定
(overflow:hidden;)
<iframe width="1024px" height="900px" frameborder="0" style="margin:-320px 0px 0px -260px;
 ← <iframe>の表示設定。幅と高さで表示させたい他サイトの枠を確保し、上左下右の余白
(margin)指定で表示させたい部分を特定し、frameborderで枠線の太さを指定(0は非表示)
overflow:hidden; ← 範囲外非表示指定
-moz-transform: scale(0.76,0.76); ← Firefox(moz)で表示させる場合の幅と高さの
76%縮小表示指定(scale)
-webkit-transform: scale(0.76,0.76); ← SafariとGoogleChrome(webkit)で表示させる
場合の幅と高さの76%縮小表示指定(scale)
-o-transform: scale(0.76,0.76); ← Opera(o)で表示させる場合の幅と高さの76%縮小表
示指定(scale)
-ms-transform: scale(0.76,0.76); ← InternetExplorer(ms)で表示させる場合の幅と高さ
の76%縮小表示指定(scale)
overflow:hidden;" ← 範囲外非表示指定
 src="http://www.dospara.co.jp/5shopping/search.php?bg=4&br=141&cate=bg4&limit=20&list_type=photo2&page=2&sbr=632">
 ← 表示するサイトのURL
</iframe>
</div>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください