IFRAMEタグを使ったリンク方法のいくつかのソースサンプル

MNNに寄せられる新鮮な情報をできるだけ早くあなたのページにも提供します。

例１
<IFRAME src="http://moto-news.net/frame.html" width=300 height=200 frameborder=0 scrolling="no"><A href="http://moto-news.net/" target="_top"><IMG src="http://moto-news.net/mnn.gif" width=128 height=128 border=0 alt="Motoharu News Network"></A></IFRAME>
例２
<IFRAME src="http://moto-news.net/frame.html" width=200 height=100 frameborder=0 scrolling="no"><A href="http://moto-news.net/" target="_top"><IMG src="http://moto-news.net/mnn.gif" width=128 height=128 border=0 alt="Motoharu News Network"></A></IFRAME>
例３
<IFRAME src="http://moto-news.net/frame.html" width=400 height=100 frameborder=0 scrolling="no"><A href="http://moto-news.net/" target="_top"><IMG src="http://moto-news.net/mnn.gif" width=128 height=128 border=0 alt="Motoharu News Network"></A></IFRAME>
例４
<IFRAME src="http://moto-news.net/frame.html" width=200 height=300 frameborder=0 scrolling="no"><A href="http://moto-news.net/" target="_top"><IMG src="http://moto-news.net/mnn.gif" width=128 height=128 border=0 alt="Motoharu News Network"></A></IFRAME>
例５
<IFRAME src="http://moto-news.net/frame.html" width=200 height=200 frameborder=0 scrolling="no"><A href="http://moto-news.net/" target="_top"><IMG src="http://moto-news.net/mnn.gif" width=128 height=128 border=0 alt="Motoharu News Network"></A></IFRAME>

各サンプルは横幅(width)と縦(height)の数値が違うだけで全て同じファイルから構成されています。 枠の底から24ピクセル（緑地の部分）はジャンプ用に確保されています。

IFRAMEの開始タグと終了タグの間にはIFRAMEをサポートしないブラウザのためにインライン・イメージによる代替バナーをリンクアンカーにして仕込んでいます。

「Netscape Navigator 4.xx」などのIFRAME非対応WWWブラウザに表示される代替バナー（128×128）
Motoharu News Network

もし違う大きさ・デザインのものが必要であればオリジナルのバナーを自作していただいても構いません。 イメージではなくテキストだけでも構いませんし、IFRAME非対応のWWWブラウザでは何も表示させないという選択肢もあります。 また、上のイメージをご自身のサーバ上に複製してIFRAMEタグを取り払った一般的なバナーとしてご利用いただいても結構です。 リンクを貼るページのレイアウトに合わせてご自由に改造してください。

リンク用バナーのサンプル（88×31）
Motoharu News Network
<A href="http://moto-news.net/" target="_top"><IMG src="http://moto-news.net/mnn_banner.gif" width=88 height=31 border=0 alt="Motoharu News Network"></A>
その他バナー（MNNマスコット猫）
Motoharu News Network Motoharu News Network

佐野元春ニュース β版 (ver.0.8.5)

バージョンアップ情報！ (2007.05.26) オブジェクトに今日と明日の予定を追加。 オプションです。

デフォルト

 デフォルトのまま使う場合はこちら↓
<iframe src="http://moto-news.net/news.cgi" width=150 height=250 frameborder=0 scrolling="no" style="border:1px solid #047;"></iframe>
カスタマイズ
全体 オブジェクトの選択
  • フレームの幅(px)：
    デフォルトは「150」
  • フレームの高さ(px)：
    デフォルトは「250」
  • スクロールバーの有無：
    デフォルトは「no」
  • 枠線の太さ：
    デフォルトは「1px」
  • 枠線の色： ※
    デフォルトは「#047」
  • 文字の大きさ：
    デフォルトは「10px」
  • 文字の色：
    デフォルトは「black」
  • 背景の色：
    デフォルトは「white」

　

※ もし、隣接する他のブログパーツと密着してしまったり部分的に重なってしまう場合はマージン（余白）を設定してみてください。

  • 上側のマージン(px)：
  • 下側のマージン(px)：
  • 左側のマージン(px)：
  • 右側のマージン(px)：
 MWS最新ニュース
Facebook佐野元春(official)
MNN新着記事

※選択が無い場合は全部選択と同じになります。


オプション
今日と明日の予定を上に表示する（予定が無ければ何も表示しません）
今日と明日の予定を下に表示する（予定が無ければ何も表示しません）
今日と明日の予定は表示しない

「今日の予定」の「今日」の部分の文字の色

デフォルトは「red」
「明日の予定」の「明日」の部分の文字の色

デフォルトは「red」

※午前4時に「今日の予定」が消えて、「明日の予定」が「今日の予定」になります。
「佐野元春ﾆｭｰｽ Powered by MNN」部分 更新のお知らせ
  • 前半部分文字の大きさ：
    デフォルトは「12px」
  • Powered by MNNの部分の文字の大きさ：
    デフォルトは「前半部分と同じ」
  • 文字の色：
    指定無しのときは全体の背景の色と同じ
  • 背景の色：
    指定無しのときは全体の枠線の色と同じ
  • 文字列の選択：
    デフォルトは「佐野元春ﾆｭｰｽ powered by MNN」

※ 文字を小さくして文字色と背景色を同じにしたら「Powered by MNN」は見えなくすることもできると思います。 MNN的にはそういう使われ方もまったく問題ありません。
  • 「Update」の文字の色：
    デフォルトは「red」
※「Update」の文字は各オブジェクトの更新日から約2日間表示されます。
リンクの挙動 作成
  • リンクの下線：
    デフォルトは「無し」
  • マウスカーソルが乗ったときに出現する枠線の太さ：
    デフォルトは「2px」
  • マウスカーソルが乗ったときに出現する枠線の色：
    指定無しのときは全体の枠線の色と同じ
  • マウスカーソルが乗ったときの文字の色：
    指定無しのときは変化無し
  • マウスカーソルが乗ったときの背景の色：
    指定無しのときは変化無し
配色の確認のためにあなたのページの背景色かそれに近い色をここで指定してください。（直接指定のほうがラジオボタンよりも優先）

直接指定： （#RRGGBB形式）

　　 　　 　　 　　 　　 　　

　　 　　 　　 　　 　　 　　

※未入力の部分はデフォルト値になります。

※色の値はCSSの指定方法すべてが利用できます。
青色の指定例）#00F　#0000FF　rgb(0,0,255)　rgb(0%,0%,100%)　blue

※ 枠線の色を変えるだけで雰囲気がガラッと変わります。 ぜひいろいろ試してみてください。

Adobe Color CC ←配色の参考に

ベータテスト中であることをご了承の上ご自由にご利用ください。 バグ報告・ご意見ご要望もお待ちしています。

データはMNNが一定周期で巡回してキャッシュしたものを利用しています。 表示のたびにMWSやFacebookのサーバにアクセスして情報を取るというものではありません。 また、キャッシュであるためにいくらかのタイムラグがあります。 巡回は通常は一定間隔ですが、イレギュラーで更新間隔が短くなる場合があります。 毎日何時何分とかの特定の更新時刻はありません。

Back to information