fdj
動作デモ
以下で紹介されている場所と同じ場所に設定していますので、ダブルクリックしてご確認下さい。
ダウンロード
設定方法
「メインの目次」、「個別のアイテム」などスキン編集により、mod_loginform.incは<%parsedinclude(mod_login.inc)%>として<body>直下に読み込みます。
loginbox.cssとloginbox.jsはヘッダ内でリンクします。
隠しログインフォームの設定
Nucleusのブログでは管理領域へのログインフォームを常に表示している場合も多いのですが、企業サイトなどではログインフォームを常に表示する必要性はありません。
不要なものを隠すことによって、サイトナビゲーションなどユーザビリティも向上し、少しばかりのセキュリティアップへもつながります。
ページ上に表示されているログインフォームは、通常サイドバーにスキン変数<%loginform%>として記述されていますのでこの記述を削除すれば簡単に表示を消すことは可能です。しかしこの記述を削除した場合、ログインは/nucleusディレクトリにアクセスする必要が発生し、若干手間のかかるログイン方法となります。また、ページ面から該当記事を直接編集するといった便利さも失われてしまいます。
そこで「Company」ではDreamweaverのビヘイビアに用意されている「エレメントの表示-非表示」を利用することによって、通常はログインフォームを隠しながら、隠しエリアをダブルクリックすることによって表示させる方法をとります。
設定は他のスキンや将来的にも再利用可能なように読込ファイルとして作成します。
ログインフォームの表示と非表示の構造
- ログインのためのフォームが配置されているloginboxは不可視設定し、callLoginBox領域をダブルクリックすることによって表示される。
- loginbox内でダブルクリックしたらloginboxは閉じる。
設定の手順
以下はDreamweaverによる設定の手順を参考までに紹介しています。興味のある方はご覧下さい。
1)
HTMLの構造は以下のとおりです。このHTMLを<body>タグの直下に配置します。
<div id="callLoginBox"></div>
<div id="loginbox">
<dl>
<dt>Login</dt>
<dd><%loginform%></dd>
</dl>
</div>
2)
CSSによりcallLoginBoxを設定します。最終的には非表示にしますが、設定中は場所や大きさを把握するために背景色を与えています。場所はposition: absolute;で絶対指定します。
Dreamweaverであればマウスドラッグによる場所の移動も可能ですので、自分には覚え易く他の人には推測し難い場所を設定して下さい。
左に赤く見えるのが#callLoginBoxの設定です。
プロパティインスペクタの設定
設定したCSS
#callLoginBox {
position: absolute;
width: 20px;
height: 20px;
left: 0px;
top: 120px;
background-color: #CC0000; /*見えるように色付けしています。最終的には削除します*/
}
3)
CSSによりloginboxを設定します。場所はposition: absolute;で絶対指定しますが、z-indexは2を与え、表示された場合はcallLoginBoxよりも手前に配置されるように設定して初期値で非表示に設定します。
#loginboxの設定
プロパティインスペクタの設定
設定したCSS
position: absolute;
z-index: 2;
overflow: auto;
visibility: hidden;
top: 69px;
left: -3px;
border: 3px dotted #000000;
padding: 15px;
background-color: #33CC66;
}
4)
callLoginBoxに対するビヘイビアの設定
HTMLソースからcallLoginBoxを選択し、ビヘイビアの「+」アイコンを押してドロップダウンリストから「エレメントの表示-非表示」を選びます。
ドロップダウンリスト
ダイアログボックスのエレメントにloginboxを選び、設定を「表示」にしてOKボタンを押します。
エレメントの表示-非表示ポップアップ
ビヘイビアパレットのイベントはonDblClickに変更します。これでcallLoginBoxをダブルクリックするとloginboxが表示されます。
ビヘイビアパレット
5)
loginboxに対するビヘイビアの設定
HTMLソースからloginboxを選択し、ビヘイビアの「+」アイコンを押してドロップダウンリストから「エレメントの表示-非表示」を選びます。
ドロップダウンリスト
ダイアログボックスのエレメントにloginboxを選び設定を「非表示」にしてOKボタンを押します。
エレメントの表示-非表示ポップアップ
ビヘイビアパレットのイベントはonDblClickに変更します。これでloginboxをダブルクリックするとloginboxが非表示になります。
ビヘイビアパレット
※callLoginBox、loginbox共イベントにダブルクリックを指定しているのは不用意なクリックによってフォームの表示/非表示が発生しないためです。
※Dreamweaverのバージョンなどによって手順や生成されるスクリプトに違いがあるかも知れませんのでご注意下さい。
完成した隠しログインフォームのモジュール化
Dreamweaverのビヘイビアによって書き込まれた部分を切り出してmod_loginform.incとして保存します。また、動作に必要なjavascriptは<head>タグ内に記述されていますので、こちらも外部ファイルとして保存し、リンク使用します。
ビヘイビア設定後のHTMLコード
<div id="callLoginBox" ondblclick="MM_showHideLayers('loginbox','','show')"></div>
<div id="loginbox" ondblclick="MM_showHideLayers('loginbox','','hide')">
<dl>
<dt>Login</dt>
<dd><%loginform%></dd>
</dl>
</div>
記述されたJavascript
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
mod_loginform.incは<%parsedinclude(mod_login.inc)%>として<body>直下に読み込みます。
loginbox.cssはヘッダ内でリンクします。
Javascriptはloginbox.jsとして保存し、こちらもヘッダ内でリンクします。
「メニュー」> 「挿入」> 「HTML」> 「スクリプトオブジェクト」> 「スクリプト」でJavascriptのリンクでリンク設定が可能です。
不可視の領域をダブルクリックすることによってログインフォームが現れます