【カスタマイズ】ナビゲーションメニューで記事への導線を確保しよう

ブログのシステムはよくできているのですが、
ちょっと過去記事へのアクセスが面倒なんですよね。

その解決策として、ナビゲーションメニューを作って
アクセスアップを狙ってみましょう。

この記事は、以前作成した「頂いた質問にお答えするコーナーその４」で作成した内容を
加筆・見直しをしたものです。

１．ナビゲーションメニューって何？

　まずはこのナビゲーションメニューの機能説明をします。
　どんなものかというと、TOP下に設置しているメニューのことです。

　各メニューの項目にマウスカーソルを当てると、色が反転しどの項目を選んでいるか
　解るようになっています。

　そして、項目をクリックすると設定したカテゴリーに移動します。
　項目全体にリンク設定されているので、文字だけなく余白部分をクリックしても
　該当ページに移動するようにしています。

　

　本当は、こんな感じで今いるカテゴリーが解るようにしたかったのですが、
　面倒くさそう

だったのでやってません。

　・「カスタマイズ」のカテゴリーにいる場合は、「カスタマイズ」を反転させる

２．どのようなメニューを設定するか？

　現在このブログでは、TOP下のナビゲーションメニューに各カテゴリーを設定しています。
　一度ここにカスタマイズ記事のカテゴリーを入れようと思ったのですが、
　それ以外の雑談系の記事も多いので、ブログのカテゴリーを設定することにしました。

　別にカテゴリーにこだわる必要はありません。
　特定の記事でも、プロフィールでも、別サイトへのリンクでも自分が訪問してほしい、
　または読んでもらう上での利便性を考えて設定すれば良いと思います。

　ただ、どうしてもブログの場合は、過去に書いた記事が埋もれてしまいがちなので、
　それを補完するようなメニューが良いかもしれませんね。

　また、横方向にこだわる必要はありません。
　このように、縦方向のメニューにして、サイドバーに設置するのも一つの方法だと思います。

　いろいろ見せ方を工夫したりして、試してみてくださいね。

３．ナビゲーションメニューを設置してみよう

　実はこれ、そんなに難しいことはしていません。
　箇条書きのタグを使って、少しアレンジを加えているだけです。

Home
カスタマイズ
facebook

　基本はこれです。ここに各項目へのリンクを設定しています。
　では、まず該当箇所のHTMLコードを見てみましょう。

 

  Home 
 カスタマイズ 
 facebook

　"class = "selected""で項目を反転させるCSSを設定しています。
　初期設定は「Home」にしてます。

　これだけです。シンプルですよね。
　つまり、アレンジは全てスタイルシート側で定義しているということです。

　これは人にもよるのですが、私の場合、可読性を高めたいという思いが強いので、
　コードは出来るだけシンプルにするように心掛けています。
　ただ、最近スタイルシートがまさかの文字数規制にひかかってしまったので、
　その限りではありませんが(´；ω；｀)

　次にスタイルシートを見てみましょう。
　ポイントとなる箇所に、コメントで解説を入れていきますね。

 
/* メニュー設定 */
#nav {
	bottom:-80px;		
	position:absolute;	/* 絶対位置指定 */
	margin: 0px;
	left: 0px;
	padding: 0px;
}
 
	/* 箇条書きの設定 */
	#nav li {
		float:left;					/* 箇条書きを横向きに */
		font:14px verdana, sans-serif;
		list-style:none;			/* 箇条書きの先頭記号を消す */
		left:0;
		margin: 0px;
	}
 
	/* リンク設定 */
	#nav li a {
		display:block;			/* ブロック化してブロック全体にリンク設定 */
		text-decoration:none;	/* リンクの下線を消す */
	}
 
	#nav li a:link, #nav li a:visited {
		background-color:#545046;
		border-top:1px solid #817762;
		color:#fff;
		margin-right:1px;
		padding:9px 30px;
	}
 
	/* マウスオーバー時、及びデフォルト選択項目の設定 */
	#nav li a:hover, #nav li.selected a {
		background-color:#C5C0B3;
		border-top-color:#eceae3;
		color:#4a4638;
	}
 
	/* 選択している項目の文字を太字に */
	.selected, .selected a {
		font-weight:bold;
	}

　ポイントは、１２行目「float:left;」と１４行目「list-style:none;」です。
　ここで、箇条書きを横向きに設定し、先頭の「・」を削除しています。

Home
カスタマイズ
facebook

　これが、上記２つの設定をすることにより、

Home
カスタマイズ
facebook

　と、なるのです。

　１．で書いた余白クリック云々のリンク設定は、２１行目の「display:block;」です。
　この設定をすることで、リンク自体をブロック化（ブロックレベル要素化）しています。
　これで、リンク項目内全体に背景色を塗ったり、項目内全体をクリック可能に
　することができます。

　後はこれに位置調整と色の設定をするだけです。
　簡単なイメージはこんな感じです。

　　