アジアンビートカンケリキッズ

アジアの子供はほとんど裸足だ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

ポップアップメニュー

[custom] ポップアップメニュー

ポップアップメニューを設置する方法です。HTMLやCSSの知識がなくても手探りで設置することはできますが、思い通りに完成させるためには多少の知識が必要です。また、失敗に備えて予備のテンプレートを用意しておいてください。

jsを写す

HTMLの<head>から</head>の間に以下を挿入します(折りたたみメニューと同じなので既にあれば無視)。

ポップアップのHTMLを挿入

まず、ポップアップリンクを設置します。プラグインのフリーエリア、またはHTML内の任意の位置(初心者にはお奨めできません)に以下のようなリストのソースを挿入します。もしリンクテキストを横に並べたい場合は、<ul><ul id="poplink">としてください。リンクを増やす場合は太字部分の数字を増やしていくとわかりやすいと思います。

<ul>
<li><a href="javascript:void(0)"
 onclick="dd('pop1')" onkeypress="dd('pop1')">
ポップアップ1</a></li>
<li><a href="javascript:void(0)"
 onclick="dd('pop2')" onkeypress="dd('pop2')">
ポップアップ2</a></li>
<li><a href="javascript:void(0)"
 onclick="dd('pop3')" onkeypress="dd('pop3')">
ポップアップ3</a></li>
<li><a href="javascript:void(0)"
 onclick="dd('pop4')" onkeypress="dd('pop4')">
ポップアップ4</a></li>
</ul>

次に、ポップアップするもの(ポップアップボックス)のHTMLを挿入します。太字は上記のポップアップリンクの番号と連動しています。

<div id="pop1" class="popbox"
 style="display:none">ポップアップ1</div>
<div id="pop2" class="popbox"
 style="display:none">ポップアップ2</div>
<div id="pop3" class="popbox"
 style="display:none">ポップアップ3</div>
<div id="pop4" class="popbox"
 style="display:none">ポップアップ4</div>

挿入する位置は、プラグインにリストを挿入した場合にはその直下がわかりやすいかと思います。HTML内にリストを挿入した場合には、ポップアップさせる大体の位置にあるdivやtable等のボックス(親ボックス)内に挿入することをお奨めします(親ボックスの左上が基準となる)。テンプレートが左右どちらかに寄っている場合は</body>の直前でも構いません。

CSSを編集

CSSの任意の位置に以下を挿入します。

/* ポップアップ */
#親ボックス { position:relative; } /* id="○○"の場合 */
.親ボックス { position:relative; } /* class="○○"の場合 */
ul#poplink li { display:inline; }
.popbox {
 position:absolute;
 background:#FFF;
 border:2px solid #999;
}
#pop1 { top:-20px; left:-100px;
 width:80px; z-index:100; }
#pop2 { top:40px; left:0px;
 width:80px; z-index:200; }
#pop3 { top:20px; left:100px;
 width:90px; z-index:300; }
#pop4 { top:40px; left:200px;
 width:120px; z-index:400; }

ポップアップボックスのソースを挿入したdivやtable等のボックス(親ボックス)のidもしくはclassを調べ、上記の親ボックスの部分と書き換えます。プラグインの場合は、ポップアップボックスを挿入したプラグインカテゴリー(plugin_first,second,third)のプラグインコンテンツ(<%plugin_○○_content>)を囲む親ボックスのidやclassが該当します(以下に例)。

.popboxの部分でポップアップウィンドウのスタイルを指定しています。背景や枠線などはここで一括指定ができます。個別に変更したい場合は、その下の#pop1(2,3,4…)にて指定してください。

topは親ボックスの上辺を基準とした下への位置修正です。値を負数の-20pxにすると上に20px移動します。leftは同じく左辺から右への位置修正です。同じく負数の-100pxにすると左に100px移動します。z-indexはボックスの重なり表示の上下を指定します。数字が多いものほど重なったとき上に表示されます。これらはご自分で調節しつつプレビューで確かめて値を決めてください。

プラグインカテゴリー1のフリーエリアに挿入した場合の例

<!––plugin_first––>
<h3 class="side_title">
<%plugin_first_title></h3>
<div class="side_body">
<%plugin_first_content></div>
<!––/plugin_first––>

HTML内のプラグインが以上のようなソースであった場合、<%plugin_first_content>の部分にポップアップリンクとポップアップボックスのHTMLが挿入されています。この場合には、親ボックスは<div class="side_body">~</div>となり、CSSの親ボックスside_bodyに変更します。

備考

  • うまく動作しない理由の多くは、CSSによる表示に問題があるためです。topやleftなどの表示位置や親ボックスのid・classに問題がないか確認してください。
  • テンプレートによっては他のJavascriptやCSS内の記述によって、動作に支障をきたす場合があります。
  • ポップアップボックス内に閉じるボタンを設置する場合は、そのボックスを開くポップアップリンクと同じHTML(<a href>~</a>まで)を挿入します。
  • ポップアップボックスのソース挿入位置、親ボックスのid・classについては、使用テンプレート名を明記した上で質問してくだされば対応することもできなくはありません。
  • リンクやボックスのスタイル指定についての質問には対応しかねます。
  • このカスタマイズを施したテンプレートを共有として公開することは禁止はしませんが、推奨はしていません。
スポンサーサイト
  1. 2006/06/22(木) 21:07:15|
  2. custom
  3. | コメント:0

コメント

<%template_post\comment>


管理者にだけ表示を許可する

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。