Harukiya Archives

2005/05/15

category / diary

ページの状態、カテゴリID、エントリIDが<body>生成直後で取り出せるってことは、それらが混在したナビゲーションも比較的簡単に作れるはずなんだけど･･･
（ある青年の苦悩と疑惑にみちたつぶやき）

と、まあコレを考えてみるわけだが、夕方~~呑みに出かける~~ 御会食があるので意識がしっかりしているうち（私にだってあるのだ、年に数時間は）に基底になる部分だけでもやっつけとく。

イメージとしては
- トップページ
  （アドレスは固定だが内容が不定のページ）
- 過去ログ（へのリンク）一覧
  （各ページに出力されている内部アンカー）
- 管理人が特にオススメしたいカテゴリ（笑
  （アドレスは固定だが内容が蓄積されていく。その最新ページ）
- サイト情報
  （個別エントリのひとつ。アドレス固定で内容も固定）
のように属性が違うリンクをまとめてメニューを作り、ついでに現在位置もわかるようなナビゲートの役割も持たせる。
とりあえず上の方（めっさアバウト）にリスト書きしておく。脳内シミュレーションできっちりできるってのは、想像力だともいえるんだけど、現状を客観的に把握してるかどうかって問題なんだよね。（何についてもいえる話し）ああしたらこうなる、そんでもってこうすると･･･そう来るかー！ってなっちゃうのは自分の状況・位置がわからないからなんです。（14:45）
書いたHTMLソース。id=topとかid=logって早いうちに使用済みになってるので、後からうまい名前を考えるのが面倒。
1. <ul id="tab">
2. <li id="m_top"><a href="./" accesskey="t">最新の記事</a></li>
3. <li id="m_log"><a href="#menu">過去ログ</a></li>
4. <li id="m_selcategory"><a href="./blog-category-10.html">ギャラリー</a></li>
5. <li id="m_about"><a href="./blog-entry-6.html" accesskey="h">このBLOGについて</a></li>
6. </ul>
これでいちおうHTMLは確定で、あとはCSSでなんとかする。あっさりしすぎな感じもするが･･･
秋田こまっち。さんやてんぽさんのところで触れられてますが、<div>って便利だからついつい使いすぎちゃうんだよね。たまに見かけるけど、
1. <div class="hogelist">
2. <ul>
3. <li><a href="./hoge1">wake</a></li>
4. <li><a href="./hoge2">waka</a></li>
5. <li><a href="./hoge3">ran</a></li>
6. </ul>
7. </div>
とこれはやりすぎだろう？って思うのは僕だけですか。
前出のおふたりのサイトは内容もさることながら、構成がストロングスタイルなのでテンプレ職人にはためになるサイトです。リンクしていただいてるから言うのではありませぬ。むしろ並列されると萎縮します（笑。あと、うちリンクコーナーないけど記事の中に書くから許してね。（15:40）
リストといえばcss.maxdesign.com.auがサンプルの宝庫です。Listamatic: Copongcopong's Under Tabsのタブメニューがカッチョエー（影に魅かれた）ので、こうゆう風にしたい。ということでid="tab"に変更（どこが「これでHTMLは確定」か！）
と思ったが、ソース見るといきなり<div>で囲まれてるし。余計なことを書いたせいで自分の首をしめるのはよくあること。しかたないので<div>で表現している背景色は<ul>でごまかす。あとフォントサイズ可変はお約束。以下CSS書きかけ。
1. #tab {
2. height: 2em;
3. line-height: 1;
4. font-size: .9em;
5. background: #eee;
6. margin-bottom: 1em;
7. padding-right: 1em;
8. border-top: 2px solid #aaa;
9. border-bottom: 1px solid #999;
10. }
11. #tab li{
12. list-style: none;
13. float: right;
14. width: auto;
15. }
16. #tab a {
17. display: block;
18. padding: .5em .7em;
19. }
20. #tab a:hover {
21. background: transparent;
22. }
では、出かける時間です。雨が降ってきた･･･(17:00)

writeback

お名前：　パス：
ご意見・ネタ・苦情など

< よめみるようにIdしたい | おいしゅうございます > | 表紙へ戻る | 探す | 案内

ホームページアフィリエイトレンタルサーバー FC2ブログ キャッシング

Harukiya Archives

2008/08/30

category /

2005/05/15

category / diary