「SBMに追加」ボタンは、自分の記事ブックマークしてもらえたかなぁ？どんなコメント付いたかなぁ？というチェックをするのに一番手っ取り早く見れる気がするので付けてるかな。後は、SBMの存在をチョットだけ意識してもらうとか？
さて、1ページもののサンプルやらテンプレートはいっぱい有るけど、実際のサイトで1ページしかないサイトはごく一部だと思う。
なので、複数ページが詰まったサンプルを作ってみました。
yuga.js 0.6.0がリリースされたのもあり、次はもうちょっとしっかりしたデザインで、yugaを使ってより実際のサイトに近いのでも作れたらいいなーとか妄想中です。
そんな訳で、取りあえず今回のサンプルのご説明みたいなことをば。
サンプルサイトとサンプルのダウンロード
ベースにしたサンプル
ベースに使っているのは、以前に公開したクリーンな水平分割が出来そうな2カラムサンプルで、コレにグローバルナビゲーションらしきものをつけて複数ページにしてます。
何気に、サンプルとかささっと作るのに活躍してます。
とても余談ですが、各index.htmlにリンクをはる時、index.htmlまで書かない方がいいです。
一応例で示すと、
http://css-happylife.com/template/pages/support/
って書くか、
http://css-happylife.com/template/pages/support/index.html
って書くかの違いです。
なんでかっていうと、色々理由はありますが、ボクの理由はかっこ悪いから。
コレで十分すぎる理由になってる。
すみません、適当過ぎました。URLが二つ存在しちゃうことになるのでいけてないんです。
で、こうしちゃうとローカルで見るのにとても不便ですが、我慢するか、AN HTTPみたいな、HTTP サーバ（Webサーバ）を入れればSSIやCGIをローカルでテストすることができちゃうのでとても便利です。
サンプルのご説明
実際にサンプルを見てもらうと、HTMLはほぼ同じでレイアウトなどが違うのが確認できると思います。
このレイアウトの違いを実現するのにボクが使っている方法は、body要素にclassを指定して振り分けてます。
こんな感じで↓
<body id="yourDomainName" class="businessBody">
CSSは以下のように。
/* トップページ */
.indexBody #main {
float: right;
}
.indexBody #main p.photo {
text-align: center;
}
/* 事業内容 */
.businessBody #main p.photo {
float: left;
margin-right: 10px;
}
/* サポート */
.supportBody #main p {
margin-right: 250px;
}
Movable Typeとかいじってるとbody要素にclass指定って当たり前っぽい部分もあるけど、意外とこういう方法で振り分けず、#mainとか指定が変わる要素あたりにdiv要素追加したりするってケースが多いような気がする。
もし、#main内の指定だけ変えたいなら、#mainにclassを追加するのがいいかな。
div id="main" class="supportDetail" みたいな感じで。
これを組み合わせると、body要素で各メニューごとの指定が出来るけど、更に階層が深いページでレイアウトが変わる場合（サポートのトップがあってサポートの詳細ページがあるみたいな）は、
body要素には、supportBodyってclassがあり、div id="main" class="supportDetail" と詳細ページにだけつければ、.supportBody #contents .supportDetail と指定することでサポートの詳細ページ用に出来ます。
他に、ナビゲーション部分とかをSSI使うために別ファイルにした時などにbody要素で分けてると楽です。
別ファイル化してしまうと、そのファイルは全てのページで同一のソースになってしまう。
これだと、例えば事業内容ページを見てるときに、グローバルナビゲーションがオンの状態にならず、ちょっと親切じゃなくなってしまう。
そこで、グローバルナビゲーションの各li要素に下記のようにclassを追加して、body要素とli要素のclassでオンの状態にすることで対応できます。
<ul id="navi"> <li class="homeNavi"><a href="../">ホーム</a></li> <li class="businessNavi"><a href="../business/">事業内容</a></li> <li class="supportNavi"><a href="../support/">サポート</a></li> <li class="companyNavi"><a href="../company/">会社概要</a></li> <li class="inquiryNavi"><a href="../inquiry/">お問い合わせ</a></li> </ul>
CSSは以下のように。
.inquiryBody #navi li.inquiryNavi a,
.supportBody #navi li.supportNavi a,
.businessBody #navi li.businessNavi a,
.companyBody #navi li.companyNavi a,
.indexBody #navi li.homeNavi a,
#navi li a:hover {
background: #000;
color: #FFF;
}
色んな方法があるので、あくまでも一例という感じですが、この方法なら比較的div要素の追加も少ないですし、色違いのサイトとかを作るのはとても楽でっせ。