【カスタマイズ】頂いた質問にお答えするコーナー その４

【カスタマイズ】頂いた質問にお答えするコーナーその４

　　頂いたカスタマイズの質問にお答えするコーナー、
　　第４回目です。

　　前回までで、基本的なカスタマイズの解説はしているので、
　　今回は質問の回答から始めます。

【前回記事】【ゼロから始める】頂いた質問にお答えするコーナーその３【カスタマイズ】

shittaka さんよりのご質問

　上部のINDEXはどのようにして作成しているの？

　タイトル下にある、これのことですね。
　ここでは、INDEXという言葉で統一しましょう。

このカスタマイズは後日纏める予定だったので、先出しして書いちゃいますね。
ちょっと順不同になってしまいますが、一息ついたところでカスタマイズ記事全般を
見直す予定でいます。

　　左サイドバーにある謎のアイコンからも解るかもしれませんが、
　　カスタマイズ特設サイトとして、再構築します。
　　なので、今はガシガシ思うまま書いていきますね。

【何気に関連している記事】　【ざわっ…】私がネタ物を作る理由【ざわっ…】

１．機能説明

　まずはこのINDEXの機能説明をします。

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

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

　

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

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

　・「つぶやき」のカテゴリーにいる場合は、「つぶやき」を反転させる

２．実装方法

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

Home
つぶやき
ダイエット

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

 

 Home 
 つぶやき 
 ダイエット

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

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

　これは人にもよるのですが、私の場合、可読性を高めたいという思いが強いので、
　コードは出来るだけシンプルにするように心掛けています。
　なので、前回紹介したインラインCSSはあまり好きではないのです。

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

 
/* INDEX設定 */
#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
つぶやき
ダイエット

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

Home
つぶやき
ダイエット

　と、なるのです。

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

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

　　