MS Access Tips/Sample and VBA and Blog customize etc...

SiteMap をポップアップ表示

当ブログのタイトル下のナビゲーションバーの SiteMap をクリックしてみてください(ページの読み込みが終わるのを待ってからしてくださいね。)。タイトル別前記事一覧がポップアップ表示しましたね。

jQuery Fancybox を導入してみた でFancyBox を当ブログに導入したのですが、実は、全記事一覧(SiteMap)をポップアップ表示したいというのも導入の一つの目的でした。そのためWEBページも読み込めるFancyBoxにしたわけです。

今回は、この全記事一覧(SiteMap)をポップアップ表示する方法を紹介します。

難易度:

FancyBox の導入

jQuery Fancybox を導入してみた を参考にして、jQuery と FancyBox をブログに導入します。

ポップアップ用SiteMapの作成

まず、全記事一覧表示のページを作成しておく必要があります。カテゴリ別全記事一覧ページを作る を参考に作成してください。さらに、カテゴリの折りたたみもしたい場合は、カテゴリ別全記事一覧も jQueryで折りたたむ を参考にしてください。

このままでは、全記事一覧以外に、タイトルやサイドメニューなども表示されますが、ポップアップさせるときはこれらは不必要になります。

そこで、テンプレートのHTMLで不必要な部分はFC2変数の
<!--not_titlelist_area--> ~ <!--/not_titlelist_area-->
で囲みます。

上のような感じで囲みますが、HTMLタグの開始と終了の対応を崩さないようにする必要がありますので、HTMLの構造をしっかり把握した上で挿入してください。また、必ずテンプレートの複製を作成して、そちらで編集してプレビューで正常に表示されるのを確認してください。複製のテンプレートで全記事一覧をプレビューさせるには、http://ブログのURL/?template=テンプレート名&all で表示させることができます。ただし、テンプレートは更新しておく必要があります。

複製テンプレートでサイトマップが希望通り表示されるのが確認できたら、これにチェックを入れて摘要ボタンをクリックします。

SiteMapポップアップスクリプト

テンプレートHTMLの headブロック内に下記のようにスクリプトを記述します。

上記は、ポップアップウィンドウの幅を 670px、高さを表示されているクライアントの高さより 80px小さく設定する例です。お好みで修正してください。

全記事一覧へのリンクに下記のように "iframe" クラス属性を与えます。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/197-f7c10020
該当の記事は見つかりませんでした。