第5回 サイドメニューの作成

サイトリニューアルやってたお陰で、すっかり放置状態でした・・・

今回は右側のメニューです。

この右側メニュー、実に簡単です。

What's newよりも簡単ですね。順番逆にすればよかった・・・

やりたいことは、
・コンテンツページへのリンク
これだけです。

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

では、XSLの説明から。

今回追加したのは、menu,m_title,m_itemの3つのテンプレート。

menuは、メニューをただ囲む為のDivでしかないし、m_titleもタイトル用の表示にしてるだけ。
m_itemは前回のexpと同じ、「href」で設定されたアドレスを、更新内容のリンクとして貼る
処理を行ってます。

以上がXSL。
本当にたいした事してません。

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

ここで追加したのは、div.menuのみです。
右側に寄せる設定(float:right)以外、特に変わったことはしてません。

次はスタイルシートその２(default01側)。
ここでは先頭に「m_」の付いたものを追加してます。
ここも特に変わったものはありませんね。
タイトルと、リンク用の設定を行っているだけです。

以上がスタイルシート。

最後はXML。

うーん、ここも特に変わったところは無いですね。
menuタグで始まり、m_titleでメニュータイトルをくくって、後は各コンテンツへ
のメニューをm_itemに設定するだけ。

以上です。

出来上がりは、今までと同じ様に、上のXMLファイルのリンクをクリックすると
見れます。

これでmenuまで完成。説明することもないくらい簡単です。

さて次回は、メイン部分の作成を説明します。
メイン部分の中身どうしようか、実はまだ考えてないですが。

どうしようかなぁ。

Diaryを表示するようにするかな。

そんな感じのメインにします。

今しばらくお待ちを。