前回のトップページ調整に引き続き、今回は＜nav＞エリアの構成を考えます。以前の試作品モックアップでは、作業中の音楽全般にアクセスするための「Music」、メール代わりの「twitter」、管理人自己紹介の「about」、そしてロゴ、以上４項目にしたのだけれど、今回改めてぼんやり眺めていると、色々思うところが出てきました。
　まず、読者の存在を強く想定しない点で「about」って必要なのかと。もちろんネットに公開する以上、全く読者からのアクセスを考えないことは有り得なくて、あくまで自分から積極的な働きかけは抑えるという程度なのですが、aboutページってもう固定ページを用意する必要すらなくて（当サイトではコチラになります）、＜footer＞エリアに慎ましく記述するくらいで十分なんじゃなかろうか。そうだ、そうしよう。

リストは使いたくない → divとboxで（でも忘却の彼方に）

　というわけで、＜nav＞に載せる項目は「Music」「twitter」「FLFLロゴ」の３つとなりました。これらをページ頭の横長エリア内に並べるのですが、どういうわけか昔からこういうメニューの類を作るのがすごく嫌で。理由は分からないんだけれど、まずどの参考資料にも載っている「リスト＜li＞を横に並べる」というのがイヤ。
　そこで、感覚的に分かり易いdivとboxで構成する…と決めたのですが。

boxの仕様を全く覚えていない。

　数年前にCSSで「box」が使えるようになって、ワケの分からない旧来の段組TIPSから解き放たれ、当サイトでもメニュー欄に使っているのですが、そのルールや組み方をすっかり忘れている自分が居ました。そしてまたいつものように、ネットに散らばっているノウハウを巡る旅。いくつか記憶発掘のトリガーになりそうな記事を見つけました。

ナビゲーション・メニューをチマチマ組み立てる

　あまりに初歩的すぎて、他人には全く意味無いだろうが、構成等すぐ忘れてしまうので、自分自身の為に組み立て工程を一つずつメモ。まずページ先頭に置いている＜header＞内に配置した＜nav＞の大枠を赤色の枠線で表示。ところで、boxのベンダープレフィックス（-webkit-とか）ですが、付加せずに試してみたら動作しなかったので、ひとまず今回は付けておくことにしました。

<header>
<!-- ナビゲーションバー　-->
	<nav>
	</nav>
</header>

header {
	height: 42px;
	background-color: #dadada;
	border: solid 0px #222222;
}

nav {
	display: -webkit-box;
	width: 940px;
	height: 38px;
	margin: 0px auto 0px auto;
	-webkit-box-align: center;
	border: 2px solid red;
	background-color: transparent;
}

　次に＜nav＞メニュー内へ３項目の＜div＞（実際には余白スペーサー分を入れて４項目）を挿入し、緑色の枠線で示します。ところで、引っ越し先サイトのメインコンテンツである制作途中の楽曲記事リストへのアクセスは「Music」だと意味が曖昧なので（別に完成しているわけでもないし）、「SWIP」というパッと見で全く意味不明なものにしてみます。念のために書いておくと「Sound Works in Progress」の略ですが、向こうで何かの隠語に登録済みでなければいいが…と思っています。

<header>
<!-- ナビゲーションバー　-->
	<nav>
		<div id="SWIP">SWIP</div>
		<div id="TWITTER"> TWITTER </div>
		<div id="SPACE"></div>
		<div id="LOGO">FLFL</div>
	</nav>
</header>

div#SWIP {
	width: 140px;
	height: auto;
	border: 1px solid green;
}

div#TWITTER {
	width: 100px;
	height: auto;
	border: 1px solid green;
}

div#SPACE {
	width: 630px;
	height: auto;
	border: 1px solid green;
}

div#LOGO {
	width: 70px;
	height: auto;
	border: 1px solid green;
}

　以上で３項目を＜nav＞エリア内に配置しました。box内の各要素は中央揃えになっていますね。

そうだ検索フォームを置こう

　当サイト（flipflipflip.com）のように写真とか映画感想とか雑文コーナーとか、余分なカテゴリーは増やさず、できるだけ制作メモに限定していくと、＜nav＞ってスカスカになりますな…。しかもtwitterはテキストよりヒバリのアイコンの方が分かり易いから、それに置き換えると１文字分で済んでしまいます。

　なので、余白スペーサー部分へ「Serchフォーム」を置くというのはどうでしょう。バランス的にもほど良い感じがします。そうだ、そうしよう。しかし検索フォームの設置方法等については全く分からない事だらけなので、後回し。つづく。

　●＜nav＞エリアの項目には何が必要か。
　●今度は是非、検索フォームを導入したい。
　●タグも導入したい。
　●アイキャッチ画像の使い回しについて再考したい。
　●＜footer＞エリアの項目には何が必要か。

2014-06-22 ＞ VPS＆WordPress引っ越しメモ