SQLの窓

2010年12月20日


CSS3 の角丸を IE8以前でも使うには( ブログで使うには )

▼ 以下は古い記事です


CSS3 support in Internet Explorer 6, 7, and 8 より ie-css3.htc
をダウンロードして、WEB 上のどこかに設置して、その同一ドメイン下で、HTML を作成してブログで IFRAME で読み込みます。

セキュリティの仕様の為、同一ドメインでしか動作しないので、ブログではファイルがアップロード可能な Seesaa、忍者ブログ、FC2、ココログを使っておれば、レンタルのWEB スペースは必要無いですが、変更が面倒なので FTPでアップロードできる WEB スペースは持っていたほうが便利です。

※ ココログはユーザースペースがサブドメインでは無く、ディレクトリなので、そのまま設置可能
他の CSS3 効果

DIV 角丸(画像の角を丸く)
テキストのドロップシャドウ
YouTube の埋め込みにドロップシャドウ




タグ:CSS3
posted by lightbox at 2010-12-20 13:34 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2010年12月16日


google.load で Yahoo UI のメニューを使う

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>



タグ:YUI google
posted by lightbox at 2010-12-16 17:24 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2010年12月14日


Opera の window.open のバグ

▼ 以下は古い記事です


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 が開きません。

Opera_x

そうすると、一般ユーザではどうにもできない状態になってしまうわけで・・・

正しい修復方法はそもそも解りませんが、operaprefs.ini を保存しておいて、Opera を終了させているあいだに operaprefs.ini を削除してやると、次の起動で Opera は初期化されます。

で、既存の保存していた設定を再び operaprefs.ini に上書きすると元に戻ります



タグ:Opera バグ
posted by lightbox at 2010-12-14 12:23 | WEBブラウザ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり