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

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

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


表示イメージ

ブログ アーカイブ」や「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)名でソートに対応

コメント(0)

コメントを投稿

関連記事
Blogger
SEO対策
Sitemap