広告をバナーに収める
Xrea では、広告表示の義務があり、自動挿入されるわけですが、
大体の場合、見栄えがあまり良くないのではないでしょうか。
Xrea では、広告表示の義務があり、自動挿入されるわけですが、
大体の場合、見栄えがあまり良くないのではないでしょうか。
MovadleType のテンプレートはいろいろなサイトで配布されていますが、
私は、折角だから、StyleCatcher を利用してみました。
デフォルトの2カラム・右サイドバーでもいいですが、サイドバーに貼り付けるアイテムが増えてくると、左右に分けたくなってきませんか。
と言うわけで、3カラム化に挑戦してみました。
IE7になって、フラッシュ・コンテンツは、一度画面をクリックして「activate」させてから操作するようになりました。
私はフラッシュカレンダーを使っているので、この仕様は不便に感じてしまいます。
ということで、trick7.com blogを参考に、ジャバスクリプト化してみました。
なんか、普通のことと言えば普通のことですけど、
無料レンタルサーバーであるXREA では、トップディレクトリに index.html(php) を作らなければなりません。
しかし、MovableType をインストールする時、ブログの為に専用のディレクトリを作りませんでしたか。
まして、複数のブログを作った場合はブログごとのディレクトリを作るでしょう。
すると、別に index.html (php)を作る必要があります。
そんなの、何でもいいやん。と言われれば、その通りですけど(-_-;)
一応私が取った方法を書きます。
以前、追記の折りたたみについて書きましたが、今回はコメントです。
追記の折りたたみは小粋空間さんを参考にしましたが、もともとコメントの折りたたみも含んだスクリプトをコメント部分については削除されてるようです。
ですから、もともとのスクリプト(Scriptygoddessさんのサイト)を利用しました。
ただ、追記の折りたたみの表示部分はそのまま使えるように少し変更しました。
ブログに例えばBBSを表示しようとしてインラインフレームを利用する場合、高さが固定であると不便です。
読み込むページによって高さが変わる方法を書き残します。
最近の流れで言うとAjaxを利用するのがトレンドかもしれませんが、BBSなどのCGIは文字コードがShift_JISの場合がほとんどで、UTF-8へ変換する作業や、リンクの問題とかあってあきらめました。^_^;
私が使っているBBS のCGI はBBSNOTE です。
<iframe>タグの代わりに<object>タグが使えるそうです。
参考:IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法
XHTMLではiframeタグは禁止される方向なのでValidにしたい場合はこっちを使ったほうがよいらしいです。ということだそうです。
ただ、先日書いた IFRAMEの高さ可変 のようにOBJECTタグでも読み込むページによって高さを変えることが出来るかどうか試してみました。実験的エントリーです。
参考:JavaScript クロスブラウザに関するメモ
先ず、IFRAMEの高さ可変で使ったJavaScriptが使えるかどうか。
予想外ですが、Netscape7とFirefox1.5及び2でそのまま使うことが出来ました。
Opera7とOpera9(一応)はparent.frames[ ]の部分を、
document.getElementById( ).contentDocumentに変更することで動作しました。
しかし、Netscape系は何故かcontentDocumentを認識するものの動作しませんでした。
で、肝心のIE系ですが、私のスキルでは解決出来ませんでした。だからお終いでは進展がないので、ここまでのことを記録しておきます。
追記:Safariではうまく動作しませんでした。以下青字の部分はsafari用の修正です。
JavaScriptの部分 (iframe:object共通)
<script type="text/javascript">
<!--
function GetHeight(ID,NAME)
{
var gEBI = document.getElementById(ID) ;
if (navigator.userAgent.indexOf('Safari') != -1)
{
// SafariのIFRAME用:OBJECTは動作せず(Windows版Safariでは動作しました。)
gEBI.style.height = parent.frames[NAME].document.body.scrollHeight + 20 +"px" ;
}
else if (gEBI.contentDocument)
{
if (document.height)
{
// Netscape及びFirefox
gEBI.style.height = parent.frames[NAME].document.height +20 + "px" ;
}
else
{
// Opera及びSafari(未確認)
gEBI.style.height = gEBI.contentDocument.document.body.scrollHeight +20 +"px" ;
}
}
else
{
// IEのIFRAME用:OBJECTでは動作せず
gEBI.style.height = gEBI.contentWindow.document.body.scrollHeight +20 +"px";
}
}
//-->
</script>
次に、サンプルです。Opera9では、サイズ縮小しません。(もしかするとSafariも?未確認)Safari419も縮小しません。
先ず、その1:IFRAME
問題 解答
ソース
<iframe src="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id="frameid01" name="framename01">
</iframe>
その2:OBJECTのサンプル IE系では動作しません。Opera9も例のごとく縮小しません。Safariは動作しません? 保留
問題 解答
ソース
<object data="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id="objectid01" name="objectname01" type="text/html">
</object>
その3:IFRAMEとOBJECTの選択式サンプル Safariは保留中
問題 解答
ソース
<!--[if IE]>
<iframe src="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id="IOid01" name="IOname01" >
</iframe>
<![endif]-->
<!--[if !IE]> <-->
<object data="<$MTBlogURL$>20070623/20070623.html" width="100%" height="100" onload="GetHeight(this.id,this.name)" id=IOid01" name="IOname01" type="text/html">
</object>
<!--> <![endif]-->
実際問題として、IEで動作しない2番目は使用できないでしょう。
1番か3番となるのですが、どうせIFRAMEを使うのなら、無難な1番ということでしょうか。
Safariでも動作しない?ので、IFRAMEで良いかと思います。その場合は、IFRAMEの高さ可変 で書いたJavaScript が良いと思います。
IEでの方法がわかる方、コメントかトラックバックして下さい。
よろしくお願いします。
ブログ「メモ帳」のカテゴリ「カスタマイズ」に投稿されたすべてのエントリーのアーカイブのページです。過去のものから新しいものへ順番に並んでいます。
前のカテゴリはエンコード・デコードです。
次のカテゴリはセットアップです。