2010.12

jQueryでモーダルウィンドウを作成。

2010.12.23 / Labs

(追記/2011.12.02)ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。

 

jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。
サンプルはこちら

jQueryを使ってリストのリンクをクリックで「href」のアドレスを参照し、「div#modal div.container」に対してコンテンツを読み込み、表示します。

 

CSSでは、モーダルウィンドウの背景を黒(#000000)の透明度75%としています。

 

リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。

 

WordPressのページ機能を活用。

2010.12.19 / Notes

WordPressには通常の投稿以外に、固定ページを作成するためのページ機能があります。
通常の利用では投稿した記事ページとあまり差がないようですが、テンプレートを切り替えることで、ページ機能の使い道の幅が広がります。

 

ページ機能で作成したページすべてに利用するためのテンプレートは「page.php」となりますが、各ページ個別にテンプレートを切り替えるには、ページスラッグを後に続けて「page-one.php」「page-two.php」となります。
WordPress
ページ機能テンプレートの本来の使い方は、WordPressの投稿フォームで入力した内容を自由なデザインで表示するためのものですが、WordPressでの入力内容を全く利用せずに、純粋なPHPページを表示するという使い方もあります。
WordPressで用意されているテンプレートタグ「the_title()」「the_content()」を使わないで、直接ページ機能テンプレートに内容を記述していきます。

 

例えば全画面フラッシュのページなど、投稿フォームでは作成が難しい場合や、他のプログラム用にXML出力ページに有効です。
もちろんページ機能テンプレート内ではWordPressのテンプレートタグも使えるので、より柔軟な静的サイトの作成に応用できます。