▼ 以下は古い記事です CSS3 support in Internet Explorer 6, 7, and 8 より ie-css3.htc をダウンロードして、WEB 上のどこかに設置して、その同一ドメイン下で、HTML を作成してブログで IFRAME で読み込みます。 セキュリティの仕様の為、同一ドメインでしか動作しないので、ブログではファイルがアップロード可能な Seesaa、忍者ブログ、FC2、ココログを使っておれば、レンタルのWEB スペースは必要無いですが、変更が面倒なので FTPでアップロードできる WEB スペースは持っていたほうが便利です。 ※ ココログはユーザースペースがサブドメインでは無く、ディレクトリなので、そのまま設置可能
他の CSS3 効果 DIV 角丸(画像の角を丸く) テキストのドロップシャドウ YouTube の埋め込みにドロップシャドウ
fonts は見栄えをサンプルと同じにする為に必要です。サンプルでは、body 要素にyui-skin-sam クラスが設定されていましたが、親要素に設定します。
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
require: ['menu','fonts'],
onSuccess: function() {
YAHOO.util.Event.onContentReady("basicmenu", function () {
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
document.getElementById("basicmenu").style.display = '';
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
}
}).insert();
</script>
</head>
<body>
<input type='button' value="メニュー表示" id="menutoggle">
<div class="yui-skin-sam" >
<div id="basicmenu" class="yuimenu" style='display:none'>
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://winofsql.jp">SQLの窓</a></li>
<li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://www.google.co.jp/">Google</a></li>
<li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://developer.yahoo.com/yui/yuiloader/">YUI Loader</a></li>
<li class="yuimenuitem"><a target="_blank" class="yuimenuitemlabel" href="http://twitter.com/">Twitter</a></li>
</ul>
</div>
</div>
</div>
▼ 以下は古い記事です
window.open だけで言えば、開いた元のウインドウの click イベントで、window.open で開いたウインドウにフォーカスを移せないです。IE、Firefox、Chrome では正常に動きます。
そもそも、Opera だけが showModalDialog に対応しておらず、その代替え策としてのコードを書いてテストしたら見事に裏切られました。
実行したのは以下のようなコードで、window.open されたほうから opener に半透明な div で使用不可能にして、その div をクリックしたら、フォーカス移動しています。
var win = window.opener;
// ページ全体を覆う DIV の作成
win.ds = win.document.createElement('div');
win.ds.setAttribute('id','ds')
win.ds.style.position='absolute';
win.ds.style.width='100%';
win.ds.style.height=win.document.getElementsByTagName("HTML")[0].scrollHeight+200+'px';
win.ds.style.left='0px';
win.ds.style.top='0px';
// IE8 までは、opacity プロパティが使えないようです
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
win.ds.style.display = 'none';
win.ds.style.backgroundColor = '#000000';
win.ds.style.filter='alpha(opacity=50)';
}
else {
win.ds.style.backgroundColor = '#000000';
win.ds.style.opacity=.5;
}
// ページの最後に追加
win.document.body.appendChild(win.ds);
// IEのみ後表示
if (userAgent.indexOf("msie") > -1) {
win.ds.style.display = '';
}
win.ds.onclick= function(){try{window.focus();}catch(e){}}
しかし、問題はそれだけでは無く、Opera で window.open したほうのwindow を先に閉じると、開かれたウインドウが最後のウインドウになってしまって、次からそのウインドウでしか Opera が開きません。そうすると、一般ユーザではどうにもできない状態になってしまうわけで・・・ 正しい修復方法はそもそも解りませんが、operaprefs.ini を保存しておいて、Opera を終了させているあいだに operaprefs.ini を削除してやると、次の起動で Opera は初期化されます。 で、既存の保存していた設定を再び operaprefs.ini に上書きすると元に戻ります
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
