縮小してランダムで紹介するインラインフレーム２とナビゲーションの組み合わせ例

【縮小してランダムで紹介するインラインフレーム２とナビゲーションの組み合わせ例】　[一覧に戻る]

主にページ最上段や、最下段にに収めることを目的としています。
マウスオーバーの機能を盛り込んであるので、マウスを重ねるとボタンの背景色が変わり、簡単な文章が表示されます。
ランダムでリンクページを横に二つ並べて紹介します。
インラインフレームで十六分の一に縮小表示されます(縦横各四分の一)。
右クリックで「このフレームを新規ウインドウで開く」事もできます。

DIYフリークの集い (ウェブリング)	前へ	貴方のサイト名欄	次へ

ランダムに飛ぶ

リンク一覧

参加を希望する

Q&A

ウェブリング『DIYフリークの集い』の中から、ランダムでふたつ紹介します(ここと同じサイトが偶然表示される可能性もあります)。

※右クリックで「このフレームを新規ウインドウで開く」を選択すると、原寸大の表示になります。

ソースコード：

背景が赤の「777」を七箇所、あなたのリング番号に置き換えて下さい。
リング番号は、仮登録すると自動送信される「リング参加登録確認メール」に記載されています。
背景が黄の「貴方のサイト名欄」を一箇所、あなたのサイト名に置き換えて下さい。

<table border="0" cellpadding="0" cellspacing="0">
<tbody>
    <tr>
      <td>
        <table border="1" cellpadding="5" cellspacing="1" style="text-align: center;" width="100%">
          <tbody>
            <tr>
              <th bgcolor="#e6e6ff" scope="row" style="line-height: 100%; padding: 3px;">
                <p><a href="http://www.webring.ne.jp/ring/diyfreakring/" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="DIYが好きな人や興味がある人を歓迎します。">DIYフリークの集い
                  <br />
                  <font size="-3">(ウェブリング)</font></a>
                </p>
              </th>
              <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/prev" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="前のリンクサイトを開きます">前へ</a>
              </td>
              <td bgcolor="#9ce159" title="現在開いているページのタイトルです">貴方のサイト名欄
              </td>
              <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/next" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="次のリンクサイトを開きます">次へ</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table border="1" cellpadding="5" cellspacing="1" style="text-align: center;" width="100%">
          <tbody>
            <tr>
              <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/random" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="ランダムにリンクサイトを開きます">ランダムに飛ぶ</a>
              </td>
              <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/list" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="リングに登録しているサイトを一覧表示します">リンク一覧</a>
              </td>
              <td><a href="http://www.webring.ne.jp/ring/diyfreakring/777/join" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="リングに登録したい方はこちらをクリック！">参加を希望する</a>
              </td>
              <td><a href="http://diyfreakring.mac-in.net/faq.html" onclick="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='yellow'" style="width:100%; height:100%; display:block;" target="_blank" title="よくありがちな問答集です">Q&A</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
          <tbody>
            <tr>
              <td colspan="2">
                <p>ウェブリング<strong>『DIYフリークの集い』</strong>の中から、ランダムでふたつ紹介します(ここと同じサイトが偶然表示される可能性もあります)。
                </p>
                <p>※右クリックで「このフレームを新規ウインドウで開く」を選択すると、原寸大の表示になります。
                </p>
              </td>
            </tr>
            <tr>
              <td>
                <div style="width:100%;overflow:scroll;-webkit-overflow-scrolling:touch;border:solid 1px;">
                  <iframe height="600" name="sample" src="http://www.webring.ne.jp/ring/diyfreakring/777/random" style="transform:scale(0.25);-moz-transform:scale(0.25);-webkit-transform:scale(0.25);-o-transform:scale(0.25);-ms-transform:scale(0.25);transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;border:solid 1px;margin-bottom:-450px;margin-right:-300%;width:400%;">この部分はインラインフレームを使用しています。
                  </iframe>
                </div>
              </td>
              <td>
                <div style="width:100%;overflow:scroll;-webkit-overflow-scrolling:touch;border:solid 1px;">
                  <iframe height="600" name="sample" src="http://www.webring.ne.jp/ring/diyfreakring/777/random" style="transform:scale(0.25);-moz-transform:scale(0.25);-webkit-transform:scale(0.25);-o-transform:scale(0.25);-ms-transform:scale(0.25);transform-origin:0 0;-moz-transform-origin:0 0;-webkit-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;border:solid 1px;margin-bottom:-450px;margin-right:-300%;width:400%;">この部分はインラインフレームを使用しています。
                  </iframe>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
</tbody>
</table>

　[一覧に戻る]