Bloggerで全ラベルの記事リストをメニュー表示する①

ガジェットを追加で「フィード」を追加して自身のブログのフィードURLを指定してやれば、最大５件の記事のリンクが作成されます。

この表示では満足できず、全てのラベル名のリンクをラベルのサマリーページへのリンクとし、ラベルに該当する記事のタイトルを当該記事ページへのリンクとしたツリー形式のメニューがガジェットとしてないものかと探してみました。

表示イメージ

「ブログ アーカイブ」や「RecentPosts」等、便利なガジェットがあるにはあるのですが、当サイトで表示したいメニューのイメージとは異なる表示結果しか得られません。

ページナビゲーション作成時に習得したフィード取得パラメータとJASOP＆Javascriptを駆使して、全ラベルの該当記事へのリンクをツリー形式のリンクリスト（ul,liタグの階層構造）として作成しました。

今後の課題

1. ラベルなしの記事は表示されない。
2. ラベル名でのソート機能がない。（記事タイトルのソートは組込済み）
3. 関連記事のリスト作成機能も内包したい。
4. グローバル変数を排除してオブジェクト化したい。（変数・関数名重複での不具合対処）
5. カレント処理（固定ページ・個別記事表示時を除くカテゴリーサマリー表示の時）

サイドバーへ表示するメニュー

同じスクリプトで、サイドバーのArticlesメニューとアーカイブページのサイトマップの表示をCSSを多少修正するだけで適用できました。
※　アーカイブページでは、サイドバーは表示させていないので問題なし。

アーカイブページのSitemap表示

ソースコードは、次の記事でアップします。

機能追加・・・2010/04/02

デフォルトで閉じた状態とし、ラベル内の記事数を表示。
マウスをラベル名に乗せるとオープン、フォルダIconをクリックでOpen/Closeを繰り返す動作とし、各記事のアイコンも付加しました。

機能追加・・・2010/04/04

カテゴリー（Label）表示時に、カレントカテゴリーのメニューをデフォルトで展開しておけるようにクラス名をcurrentMenuCategoryへと修正したので、スタイルシート側でデフォルトの状態を決められます。

 【スタイル記載例】

.carentMenuCategory{
 display:block;
}
.MenuCategory{
 display: none;
}

機能追加・・・2010/04/05

カテゴリー（Label）名でソートに対応

この記事へのリンク記事を自身のBloggerへ作成する

関連記事

Blogger

SEO対策

Sitemap