最新記事をタブ表示 | 質問掲示板 | 独学!未経験からWebデザイナーになる!!

Web制作や付随することを何でも質問できるコーナーです。

未経験からWebデザイナーになる!! > 質問掲示板 > カテゴリ: JavaScript > 最新記事をタブ表示

最新記事をタブ表示

当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
また質問させていただきます。

ライブドアブログでヤフーなどのポータルサイトのトップページようにブログの最新記事をカテゴリ別にタブ表示したものを設置したいのですが出来ないでしょうか?

あとその端に記事の画像のサムネイル表示もしたいのですがもし方法をご存知でしたらよろしくお願いします。
タカハシさん、こんにちは。

今回のタブ機能の実装は、簡単なようで、複数の工程があります。

まずは内容を分解しますね。

[1]. カテゴリ別に最新記事を取得する

[2]. [1]で取得した情報を使用して、タブ用のHTML/JavaScriptを書く

[3]. [2]で作られたタブの見た目をCSSで調整する。


[1]に関しては、ライブドアブログの仕様に準じるため、こちらは私も使用したことが無く、(画像のサムネイル表示含め)残念ながら方法が分かりません。

さくっと検索してみたところ、ライブドアブログの公式で、カテゴリ別に最新記事をRSSで取得できるとありました。

ブログのカテゴリ別に最新記事を表示するRSSを公開しました

初級より上のJavaScriptの知識が要りますが、これをJavaScriptで読み込んでデータを取得することもできそうです。(ただ、ページを表示するごとにカテゴリ数×RSS取得するので、いまいちクールではない気もします。jQueryなどを使うと楽です)

繰り返しますが、私はライブドアブログを使ったことが無いので、オフィシャルで簡単に取得できる方法があれば、それが一番です。画像のサムネイル表示も含め、まずはライブドアブログの公式マニュアルを参照されることをお勧めします。




[2][3]に関しては、タブはポピュラーなものですから、すでにWeb上のいたるところで解説されていますし、ソースも落ちています。

タカハシさんもWebを学習中でしょうから、まずはご自身でチャレンジしてみてください。丸々コードを教えてもらうよりも、その方が後々役立ちますので。(学習の役に立てていただくのが当サイトの趣旨です)。

下記のキーワードで検索すれば、たくさん出てくると思います。
JavaScript タブ
CSS タブ


一度チャレンジした上で、ご不明点がありましたら、下記からお気軽にご返信いただければと思います。
分かりました。ありがとうございました!