sixaplusoneo.net/jp - MyClipをインラインフレームで表示

先月導入したMyClipがサーバの障害（現時点では復旧）等で重くなることがあり、メインページ右側上部に表示しておくとメインページのそれ以降のデータもなかなか読み出されずに表示されないことがあった。そこでMyClipのデータは別のページに表示し、メインページを表示する際にインラインフレーム（iframe)で読み出すことにした。

よって現時点では暫定的に以下のように設定している。

単にインラインフレームで表示しようとすると横スクロールバー等が表示されてしまうのでMyClip表示用ページのリスト表示部分（myclip-mainクラス）にwidthとheightを設定してoverflow: autoでスクロールできるエリアにし、メインページの読み出し用インラインフレームはMyClip表示部分よりも大きめ（リスト下部に自動的に表示されるMyClipへのリンク部分の大きさも考慮。）に設定してスクロールバーが出るのを回避している。（念のためMyClip表示用ページのbodyタグにscroll="no"を追加。iframeへのallowtransparency="true"指定やMyClip表示用ページbodyタグへのbgcolor="transparent"指定は現時点では必要でないし、IE以外の対応状況を考えて適用していない。）

まずMyClip表示用ページを作成。

DOCTYPE宣言などのヘッダー等以外、MyClip表示用ページのbody内の内容はJavaScriptを使用したClipリスト表示用コードのみ。（念のためbodyタグにscroll="no"を追加。）

MyClip表示用ページのCSS設定は以下のとおり

@charset "UTF-8";

	html {
		margin:0px;
		padding:0px;
		border:none 0px;
		font-size:x-small;
		color:#999;
		font-family:"ＭＳ Ｐゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", arial, helvetica, verdana, sans-serif;
		}
	body{
		margin:0px;
		padding:0px;
		border:none 0px;		
		}
	A 		{ color: #009900; text-decoration: none; font-weight:normal;} 
	A:link		{ color: #009900; text-decoration: none; } 
	A:visited	{ color: #009900; text-decoration: none; } 
	A:active	{ color: #99cc99;  } 
	A:hover		{ color: #99cc99;  }

	.myclip-main {
		width:220px;
		height: 200px;
		overflow: auto;
		font-size:small;
		font-weight:normal;
  		line-height:1.5;
		color:#999;
		margin:0px;
		padding:5px;
		border-color:#ddd #eee #eee #ddd;
		border-width:1px;
		border-style:solid;
		scrollbar-3dlight-color:#ddd;
		scrollbar-arrow-color:#ffffff;
		scrollbar-base-color:#ffffff;
		scrollbar-darkshadow-color:#999;
		scrollbar-face-color:#ffffff;
		scrollbar-highlight-color:#ffffff;
		scrollbar-shadow-color:#ffffff;
		}

次にMain Indexテンプレート（メインページ）の右ペイン（links）内に以下のMyClip表示用ページ読み出し用インラインフレームを追加。

<div class="sidetitle">
MyClip
</div>

<div class="side">
<iframe src="MyClip表示用ページのURL" id="myclip_frame"></iframe>
</div>

暫定的にidをmyclip_frameにした。

MyClip表示用ページ読み出し用インラインフレームのCSS設定は以下のとおり。

@charset "UTF-8";

	#myclip_frame {
		margin:5px 0px 0px 0px;
		padding:0px;
		border:none 0px;
		width:235px;
		height:225px;
		}

ちなみに表示確認に用いたのはInternet Explorer 6、Netscape 7.1、Mozilla 1.7b、Firefox 0.8、Opera 7.23。いずれもWindows版。MacやLinux等の環境における状況は未確認である点に注意。その他、DOCTYPE宣言によって変化する各ブラウザの標準/互換モードの差も考慮すべき。