他のWebサイトをブログに埋め込む方法

★画像アップ先の不調により、過去のエントリーで画像が見られないものが多数あります。もし画像の見たいものがありましたらご連絡いただければ復活するようにします。

初期バージョンにあたる「萌え電卓」HTML版登場!でブログ内にWeb版「萌え電卓」を以下のように埋め込んだんですが、そのやり方をメモがてらご紹介します。

*イラストはジュエルセイバーFREEを利用しています。
これは「iframe」を使うことで実現していますが、そのやり方は外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法が参考になりました。以下が上記埋め込んだ「iframe」の内容になります。



わたし自身きちんと理解しているわけではないのですが、CSS3の「transformプロパティ」というのを使っている縮小表示をしています。

「width="780" height="500"」が元のサイトの表示したい範囲になります。

「-moz-transform:scale(0.7)」の「(0.7)」を変えることで表示される(縮小)サイズが変わります。

*他の「(0.7)」は変えてもサイズに影響はありませんでした。よくわかりませんが、参考にしたサイトに習って一応同じ数値に揃えました。

ちなみに上記埋め込んだ「萌え電卓」の表示下から「続きを読む」のところまでちょっとスペースが開きすぎているのですが、「height="500"」が影響している(?)ようで、意図したものではありません。どこか調整すれば詰められるのかな~?
関連記事

テーマ : Linux
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

TOY

Author:TOY
萌え萌えmoebuntu
ようこそ!
moebuntuサイト
moebuntu wiki
お気軽にコメントください。

Auto-Translate
最新記事
最新コメント
tweet
萌え萌えAD




月別アーカイブ
07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01 
カテゴリークラウド
RSSリンクの表示
リンク
QRコード
QRコード
最新トラックバック