サイトのレイアウトできたよー。ここ数日で一気に決まったです。
動作確認は、SafariとFirefoxのみです。閲覧推奨ブラウザはこの２つです。IEは判りません（特にIE６）ってか、自分で見られないものー。なるべく重なったりしないレイアウトにしたつもりですが、重なってたらごめんよ。左寄せとかにはなるかもです。
そしてそしてWordPressのblogの方のテーマはこれからだ〜。
や〜、WordPressのテーマをあれこれインストールして見ていたんだけども、肝心の親サイトの方のレイアウトが決まらないから、どのテンプレートにするかが決まらなくてねぇ。
それでいつまでもこれでは…！ってことで、試作でヘッダーの上のヤツを作り、次いで下のも作り、ページごとの色分けまでやってから下に付ける方に決まりました。
飾り気のない素っ気ないデザインですけど、まぁ私が作るのなんてそんなものですね。凝ると飽きるしなぁ。
この時には失敗したけど、さっきやったらあっさりできた。
参考にした本にはbodyにidを振れって書いてあったんだけど、そうやったらこの間うまくいかなかったんだよ、なんでかなー？
今日やったやり方は、bodyの下をdiv id=”~”でくくって、さらにナビゲーションのリストにclass指定をする。これだけで、ページごとにbodyの id が違うからナビだけじゃなくbodyの背景やフッターとかリンクカラーとかを全部違う色にすることができる〜。
簡単じゃんかー。この間なんでできなかったのかっていうとCSSの記述がまずかったようで、やたらセレクタとか並べてたんだけど。いや、参考にした本の記述方法に沿うようにしたんだけどね。うまくいかないってなんでよ（笑）
で、今日はidとclassだけにして他にくっつけてたものを消してみたらできた。
さて、結局、1）の訪問中のページがどこかナビで判るようにできた。
2）訪問済みのページはa:visitedで判るようにできる。
3）は、まぁ全体のデザイン次第だよね〜。
……という次第であります。
ちょっと前進、しかし歩みはのろいなぁ。
決まりませーん、サイトデザイン。そしてブログデザイン。
前にも書いたけど、Webサイトとブログに表示させるグローバルナビゲーションをページ上部に置きたいから、今のWebサイトのレイアウトデザインが使えないってことで新たに考えてます、でもこんなの！ってのが浮かばない。全体像が見えて来ない。なんとなく今のWebサイトの雰囲気を継承したような感じにはしたいんだけどなー。
今のWebサイトって型で言うと２カラムの左サイドバーなんで、ナビを左に配置。Webサイトはこれでもいいけど、デザイン統一にするならブログはこれじゃ困る。ブログはブログでサイドバーに表示するべき項目があるのでね。そうすると右にもう一つサイドバーを足して３カラムにすれば解決かっていうと解決しない（笑）
Webサイトの方は３カラムの必要がないもの。
だから、ナビゲーションはページ上部に配置予定なのだ。
なんかねー、こんな風な感じで一つ作ってみようじゃないかってイメージが出て来ない。
難産の予感（笑）
グローバルナビゲーションをつけたい…..んですよ。横並びので、場所はヘッダーの直ぐ下。で、本家サイトで横並びのナビゲーションをやったことがあるから、その時のCSSとhtmlファイルを探すのに手間取った。適当に外付けHDDに放り込んじゃだめですね。
前にやったナビゲーションは、、、。
1）ナビの背景に画像を使い、a:link、a:visited、a:hover、a:activeの時に画像が切り替わる＆文字色も変わるやり方。
2）a:hover、a:activeの時にリンク文字が下へ下がるやり方。
、、、、というものでした。
作りたいナビの動きは。
1）今訪問しているページがここよ！ってナビで判るようにしたい。
↓
ナビリスト１つ１つに違う色のボーダーかなにかで区別する…みたいな。あるいは文字を下げる？
2）また別のページに移動したら、既に見たページがどれか判るようにしたい。できれば、訪問中のページとは表示が同じにならないように。
↓
背景色変えるか、リンク文字（a:visited）で区別？
3）できるだけ画像を使わないでやりたい。
こんな風なのでCSSはたいへん細かい記述になりそうです〜。さっきちょろっとやってみたらa:linkとかの指定の仕方がまずくて失敗。前のCSSの指定の仕方だけじゃだめだったって先ほど気がついた。今の本家サイトでやってるみたいに細かくナビの中の１つ１つに名前付けてそれぞれa:linkとか指定しないとだめだー。ちゃんと望むような表示になるCSSが書けるか不安ですがっ。時間かかりそうだなー。画像使えばたぶん楽？あ、そうでもないかな？うん、まぁなんとかなるでしょう。今までなんとかできたしね。