概要
ブログを書いている方は…
複数のプラットフォームで…
公開しているケースが殆どでしょ
メインのプラットフォームは決めていても…
当然ながら…他の運営サイトに…
リンクを貼ったりする訳ですが…
インラインフレーム「iframe」で
他の運営サイトを読み込む…という選択肢は…
あまりポピュラーではありません…インラインフレーム「iframe」は…
概ね…動画の貼り付け程度でしか使っていないイメージですね…
過去記事で…読み込むサイトが記事領域に収まる場合の「Tips」は書きましたが…
Bloggerにインラインフレーム「iframe」を使って掲示板「BBS」を設置する
通常のサイトは…とてもじゃありませんが記事領域には収まりませんし…
又…収まるようでは…改行後に同じ行を読んでしまったり…と…横方向の目の動きが
多くなり…読み辛いサイトになっている可能性もあり…それはそれで問題です
別途…「CSS」を作成して条件式でサイドバーを非表示にする…
…なんてのも…メインのサイトならいざ知らず…
サブのサイトを読み込むには非現実的ですから…サブのサイトを紹介するだけなら…
単なるリンクよりインパクトもあり他サイトと差別化も出来る…
インラインフレーム「iframe」という選択肢もアリでしょう…
外部サイト全体を「500px」程度の記事領域に収めようとすると…
縮小しなければなりませんが…例えば…
Internet Explorer の独自拡張「zoom」プロパティでは…
一昔前ならいざ知らず…現在では問題外なのは自明です…
「CSS3」の時代ですから…「transform」プロパティを使いましょう…
【余白無し】インラインフレーム「iframe」の設定
単に縮小しただけでは上下左右に余白が生じますので…
かなり…間抜けな感じになりますから
表示位置を指定して尚且つ余白も無くしてやる必要かあります…
インラインフレーム「iframe」の HTML
「外部サイトの URL」部分を差し替えて…
縮小サイズは…「0.5,0.5」の部分を適宜変更して調整して下さい…
「width="198%" height="2600"」で…2倍の領域サイズを指定して…
「scale(0.5,0.5)」で読み込むサイトを半分のサイズに縮小していますので…
「transform-origin」で表示位置を調整して…
下部の余白を…「-1300px」というネガティブマージンで消しています…
まぁ…マイスターの方々には…だからどうした…的な記事なんですが…
そういった方々は懇切丁寧に書いてはくれませんし…以前にハマった事もあり…
ニッチな需要はあるかと思い…敢えて記事にしてみました…
この記事を書くためだけに「Tumblr」でミニブログを作成しましたので…
ヘッダーのナビゲーションの「External」から…
インラインフレーム「iframe」で読み込んだ状態を確認出来ます…
暗号化接続に未対応なので「jQuery」を読み込んでいます…
「BBS」にしろ「Tumblr」にしろ…記事説明用ですから…
予告無く削除する場合がありますのでご了承を
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿