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

SiteMapポップアップ表示 初級向け導入法

前回の記事 SiteMap をポップアップ表示 する方法を紹介しましたが、非常に手順が多く、また、HTMLやスクリプトの知識、FC2独自変数の理解、などが必要で非常に難易度が高いものでした。

また、挑戦してみたが、うまくいかないというコメントもいただいています。

そこで、HTMLやスクリプトの知識がない方でも比較的簡単に導入できる方法を考えてみました。なるべく詳しく手順を追って説明しますので、興味のある方はチャレンジしてみてください。

SiteMapPopUp.jpg

追記13/05/22: FC2ブログの仕様変更で全記事一覧は1ページ100件までに制限されたようです。そのため、このカテゴリ別記事一覧も最新100件分しか表示されません。

難易度:

概要

前回の記事を書いていてこれはHTMLとFC2変数に対する相当な理解がないと難しいなと感じましたので、難易度を4としました。私自身の説明がへたのせいもあり、どうも説明不足の感がぬぐえませんでした。

で、ふと、テンプレートのプレビューを使えば、使用中のHTMLを編集することなく、しかも、コピペするだけで導入できるのでは、と思いつきました。で、やってみたらうまく動きました。さらにHTML自体がシンプルになったので以前のものより動作も軽くなるという副産物まで得られました。

やることは、スクリプトファイルをブログにアップロードすることと、SiteMap用テンプレートのHTMLとスタイルシートをコピペすることと、使用中のテンプレートのHTMLに数行のコードをコピペするだけですので簡単に導入できると思います。

SiteMap自体のデザインを変更したい場合は、SiteMap用テンプレートのスタイルシートを変更することで可能です。

スクリプトファイルのアップロード

まずは下記からZipファイルをダウンロードして解凍します。

jquery.fancybox-1.2.1.zip

解凍してできた jquery.fancybox というフォルダ内の下記の3ファイルの名前を変更します。 (ファイル名にピリオドが含まれているとFC2ブログでは拒否されるため)
jquery.fancybox-1.2.1.js(または jquery.fancybox-1.2.1.pack.js) → fancybox.js
jquery.fancybox.css → fancybox.css
jquery.easing.1.3.js → >easing.js

jquery.fancyboxフォルダ内の上記の3ファイルと画像ファイル(*.png)を、FC2ブログの管理画面の「ファイルアップロード」よりします。「複数アップロード」をクリックすると複数のファイルを一度にアップロードできますので楽できます。

アップロードが完了すると下記のようにアップロード先のパスが表示されますので、
ファイルをアップロードしました : http://blog-imgs-29.fc2.com/h/a/t/hatenachips/fancybox.js
このパスをコピーしてメモ帳などのテキストエディタに貼り付けておきます。(上記は当ブログの場合の例です。)

SiteMap用テンプレートの作成

FC2ブログの管理画面より、[環境設定]-[テンプレートの設定]で「テンプレート管理」画面に移動して、現在適用中のテンプレートの[複製]をクリックして、テンプレートの複製を作成します。複製したテンプレートの[編集]をクリックして、そこの HTML と スタイルシート の内容をすべて削除します。

「テンプレート名変更」で名前を SiteMap に変更します。

「HTML編集」に下記のHTMLコードをコピーして貼り付けます。

2010/03/31追記: 上記コードにバグがあり、カテゴリの折りたたみが動作してませんでしたので、修正しました。jQueryの参照も最新(1.4.2)のものに変更しました。

「スタイルシート編集」に下記のCSSコードをコピーして貼り付けます。

[更新]ボタンをクリックします。プラウザのアドレス欄に、
ブログのURL?template=sitemap&all
と記述して、サイトマップ(カテゴリ別タイトル一覧)が表示されて、折りたたみが正常に動作することを確認してください。

スタイルシートは当ブログのダーク系のデザインに合わせたものになってますので、背景色や文字色等はご自分のブログのデザインに合わせて変更して利用してください。

テンプレートHTMLにスクリプトを導入

現在使用中のテンプレートの[編集]をクリックして、<head> ~ </head> 内に下記のコードを挿入します。

2010/03/31追記: 上記コードにバグがあり、ポップアップが動作してませんでしたので、修正しました。

2010/04/02追記: すみません。まだ、コードミスがありました。iframe の前の.(ドット)が抜けてました。動かずに無用な手間を取られせてしまった方に深くお詫びします。

*********はファイルアップロード時に控えておいたパスにしてください。なお、jQueryファイルは GoogleAPIs に直接リンクする方法をとっていますので変更する必要はありません。

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

全記事一覧(SiteMap)へのリンクに下記のように クラス属性に"iframe"、id属性に"sitemap"を与えます。url は、SiteMapテンプレートのプレビューにします。

テンプレートのプレビューで上で設定したリンクをクリックして、SiteMapがポップアップするか確認してください。確認できたらこのテンプレートを更新すれば完成です。

拍手する

12 Comments

Genzo says..."お世話になりました。ありがとうございました。"

今回、SiteMapポップアップ表示 初級向け導入法を
利用させてもらうに当たり、大変お世話になりました。

まったくの無知の自分の質問に丁寧に対応していただき
とても感謝しております。

これから少しずつ自分のブログをカスタマイズしていくに
あたり、また参考にさせていただきます。

このたびは、本当にありがとうございました。

2010.04.02 00:57 | URL | #x9UxyK2Y [edit]
hide says..."参考になりました"

ためになる記事をありがとうございます。

ひとつ気になったのですが、なぜかIE8でサイトマップ表示すると、ポップアップ内の表示領域が極端に狭くなります。

ただ、どこを調整すれば良いのか分からなかったので、IE8用に通常の全記事一覧ページへのリンクも貼っていますw

お時間があるときにご確認頂ければと思います。

2010.06.18 15:19 | URL | #JalddpaA [edit]
名無し says..."すいません"

記事を555作成したのですが

こちらのサイトマップで表示したさい、500件以上は古い記事から順に表示されなくなっていくというエラーが起こりました。
解決する方法はありますか?

2010.07.13 20:59 | URL | #- [edit]
hatena says..."Re: すいません"

> こちらのサイトマップで表示したさい、500件以上は古い記事から順に表示されなくなっていくというエラーが起こりました。
> 解決する方法はありますか?

FC2のサイトマップの仕様ですので、いかんともしがたいです。

FC2へ、500件の制限を外してもらうよう要望を出すか、あきらめるかしてください。

2010.11.16 18:00 | URL | #5uE6dEgY [edit]
名無し says..."画像の縁"

はじめまして。
今回、SiteMapポップアップ表示を導入させて頂きました。他にもいろいろと・・・大変お世話になっております。

SiteMapですが、枠下に表示される「全ての記事のカテゴリ別表示」部分の画像が、うまく表示出来ません。縁が表示されているのでしょうか?
img#fancy_img で、border:0; 指定しているので、縁は表示しないように思いますが・・・?

何かアドバイスを頂けれると助かります。
宜しくお願い致します。

2011.02.24 16:40 | URL | #- [edit]
hatena says..."Re: 画像の縁"

ブログ、見ました。症状、確認しました。
うーん、原因は検討付かないです。
とりあえず、Fancybox の最新版で出ていますので、そちらに差し替えてみてはどうでしょうか。

jQuery FancyBox の最新版が出ていた
http://hatenachips.blog34.fc2.com/blog-entry-275.html

2011.02.26 03:05 | URL | #5uE6dEgY [edit]
名無し says..."Re: 画像の縁"

Fancyboxのバージョンをアップしたら、みごとに直りました。

ありがとうございました。

2011.02.28 10:33 | URL | #- [edit]
名無し says...""

失礼します。
エントリ数が多く、表示が重くなってしまったで、カテゴリのみを読み込ませ、表示させたいのですが、可能でしょうか。

2011.07.05 05:38 | URL | #- [edit]
hatena says..."カテゴリのみの表示"

htmlの適当な箇所に下記のコードを記述すれば
カテゴリのみ表示されます。

<!--category-->
<b><!--category_parent-->■ <!--/category_parent-->
<!--category_nosub-->■ <!--/category_nosub-->
<!--category_sub_hasnext-->  ┣ <!--/category_sub_hasnext-->
<!--category_sub_end-->  ┗ <!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></b><br>
<!--/category-->

2011.07.05 14:07 | URL | #5uE6dEgY [edit]
名無し says...""

ありがとうございます!早速試してみます。

2011.07.05 15:03 | URL | #- [edit]
haru says..."はじめまして"

こんにちわ。
こちらのポップアップ表示、記事を参考に導入させていただいてます。
初心者の私にも分かりやすく、とても感謝してます!

現在、自分のブログで導入させていただいているのですが、ちょっと問題が……。
ポップアップ自体は表示されましたし、SiteMapの表示も個体で見るとちゃんと表示されます。しかし、いざブログから表示しようとすると、ポップアップの中身が空っぽの状態で表示されてします。


何かアドバイスを頂けれると助かります。
宜しくお願い致します。

2013.05.03 09:25 | URL | #- [edit]
hatena says..."re:はじめまして"

FC2ブログの仕様が変わったようでうまく表示されないですね。
自分のブログも同様なので、しかたがないので、現在は、サイトマップのHTMLをアップロードして表示させるようにしています。
面倒なんですが、新規投稿のたびに、すでにあるHTMLに1行追加してアップロードするだけです。
実際は、これらを自動でするプログラムを作成してそれを利用してますが。

2013.05.03 12:38 | URL | #5uE6dEgY [edit]

Leave a reply






Trackbacks

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