第4回 What's Newの作成

すぐ書くとか言ってて既に1ヶ月も経ってるし・・・orz

まぁそんなことは気にせず。

今回はWhat's Newです。

最近、What's New(更新履歴)が書いてあるサイトが、減ってきたような気がしますが。

そんなことは気にせず。

というより、他にも色々使えそうなので、説明しときます。

やりたいこととしては、
・更新日付と更新内容の表示
・更新内容は更新したページへのリンクが可能
・What's Newはどんどん増えていくので、最新の数件のみ表示させる
以上３点です。

・・・と実は、以前このサイトでもWhat's Newを使ってて、それをそのまま説明する
つもりだったんですが、それだと「更新日付と更新内容の表示」しかできないもの
だったので、急遽新たに作りました。
なので、ちょっと時間掛かってしまったのですが・・・

そんなことはおいといて。

まずそれぞれのファイルをダウンロードしてください。
XMLファイル
XSL
layout01.css
default01.css
前回と同様、右クリックのファイル保存で、落としてください。

では、XSLの説明から。

今回のメインはこのXSL部分ですね。
といっても、旧XMLの方で説明した方法しか使ってないんですけどね。(進歩無し...)

追加したのは、main,whatsnew,w_items,expの4つのテンプレート。

mainは、このWhat's Newを含む、メイン部分となるものは、div.main内に纏めた
かったので、このdivだけ書いたテンプレートになってます。

次に、whatsnewテンプレートですが、今回ここが一番ややこしくなってる個所です。
やってることは、w_itemsタグが続く限りループさせ、dateでソートし、w_itemsを9個表示させる
といったところです。
それぞれの説明は、旧XMLの方を参照してください。

w_itemsは・・・特に変わったことはしてませんのでスルー。

expですが、ここではexpのサブアイテムとして「href」が設定してあれば、「href」で
設定されたアドレスを、更新内容のリンクとして貼る・・・といった処理を行ってます。

以上がXSL。

次にスタイルシートその１(layout01側)。

ここで追加したのは、さっき出てきたdiv.mainと、div.whatsnewです。
特に変わったことはしてません。

次はスタイルシートその２(default01側)。
ここでは先頭に「w_」の付いたものを追加してます。
ここも特に変わったものはありませんね。
タイトルや、日付、更新内容の表示色や、サイズの指定をしてるだけです。

・・・と。

ここまで書いて、divの構成がややこしくなってきたのに気付いたので
確認の為に(主に管理人自身が確認する為・・・)一度整理しときます。
現在このような状態となってます。


以上がスタイルシート。

最後はXML。

ここでは、mainタグとwhatsnew関係ですね。
whatsnew内の各タグは
・w_items:date,expを纏めたもの
・date:更新日付
・exp:更新内容。サブアイテムに「href="........"」とアドレスを指定すれば
　そこへのリンクは貼られる。

以上です。

出来上がりは・・・上のXMLファイルのリンクをクリックすると見れます。

これでWhat's Newまで完成。予想以上に難航中。

まぁ正直、仕事終わった後だと、なかなか書く気力が・・・ね。
休日に書けばいいんだけどね・・・まぁ休日は休日で、なかなか書く気力が・・・ね。
とか言ってる割には、別のものに手を入れてみたり・・・アンケートとか、ブログとか。

まぁ自由にやってますヽ(´ー｀)ノ

次回は、サイドメニューの作成を説明します。

・・・今度こそ次は早めに書くように・・・しないとな。