Livedoor ニュース 横スライド式カテゴリ一覧

Livedoor ニュース風味 横スライド式カテゴリ記事一覧を作ってみたい。

Livedoor ニュースのスマホ版はデザインが好みで、テンプレートカスタマイズのヒントとアイディアがたくさん詰まっているのでよく見ます。

ずっと気になっていたのが、記事の下の方に出てくる「カテゴリー別の記事タイトル一覧」。横にスライドしてカテゴリ毎の記事タイトルが一瞥できれば多分、ページビューが伸びるんじゃないかなと。

Seesaa ブログに導入するならどうやるかなと考えてたんですけど、カテゴリページ (page_name eq 'category') 以外でもカテゴリを取得してカテゴリ記事一覧を表示できたので、この横スライドもやってみることに。

Sponsored Link

Seesaa ブログのカテゴリページ以外でカテゴリ毎の記事タイトル一覧を作る

すみません。この投稿記事は横スライドメニューが「こうやって出来ました」という結果を書いたものではありません。たぶん、「こうやればできるんじゃないかな」という想定の話です。タイトルでちょっと釣ってしまってごめんなさい。

まずカテゴリの記事タイトル一覧はカテゴリごとに Yahoo! Pipes で無理やりひとつずつ RSS を作ります。FC2 ブログだとカテゴリ別の RSS がデフォルトで取れるけど、 Seesaa はそれができないので面倒くさい。仕方ないから Yahoo! Pipes で作る。それを JavaScript で記事中に書き出せばカテゴリページ以外でもカテゴリの記事一覧が表示できる。(← 今ここ)

そのやり方で Seesaa ブログのサイトマップ(sitemap.xml ではなく記事一覧のサイトマップ)を作りました。
» とある秘密ブログの更新うぇぶろぐサイトマップ


縦に並んでいるサイトマップのカテゴリを div でブロックにして横に並べて、画面幅にひとつのカテゴリだけ表示させておけば横スライドできる。かもしれない。

タブのデザインはググれば出てきそうだし、easing.js でちょこっとお洒落な動作を追加してあげれば Livedoor ニュース風味になる。かもしれない。

カテゴリに記事数がたくさんあっても、Yahoo! Pipes のほうで件数は決められるし、ソートして新しい記事だけ10件とか、それは出来る。問題はカテゴリ自体の数がページの横幅に収まらないくらいある場合、どういうレイアウトにするか。

そうか、タブごとスライドさせちゃえばいいのか。

さほど優先順位は高くないし、とある秘密ブログの更新が疎かになっているので、時期をみてやってみようと思います。


とても参考になりそうなサイト
» jQueryを使ったタブメニューの実装サンプルまとめ
» jQuery Easing Pluginを使って横スクロールWebサイトを作る方法

Sponsored Link

この記事へのコメント

0件
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link