<< 手ブロ新デザイン : あたらしいテーマをカスタマイズしました(詳細… | TOP | 手ブロ新デザイン : 簡単な個別コンテンツの追加 >>

手ブロ新デザイン : あとからカテゴリタブを追加する方法

新しいテーマが追加されて、カテゴリタブが使えるようになったのですが、
元々のデフォルト新デザインにはそのようなものはありません。

そこで、以下のタグを <div class="ContentsList"> の下に入れます

<!-- ブログカテゴリ -->
<div id="CategoryTab">
	$categoryList
</div>
<!-- ブログカテゴリ -->


次に CSS の最後でいいですが、以下の CSS 記述を追加します

		#CategoryTab {
			float: left;
			width: 100%;
			height: 40px;
			border: 0px solid #000;
		}
		#CategoryTab .Category {
			float: left;
			text-align: center;
			margin: 0 6px 0 0;
			overflow: hidden;
			white-space: nowrap;
		}
		#CategoryTab .Category a {
			display: block;
			width: 100px;
			height: 32px;
			text-decoration: none;
			font-size: 11px;
			color: #fff;
			padding: 8px 0 0 0;
			background-image:url('$user.image010');
		}
		#CategoryTab .Category a:hover {
			text-decoration: underline;
			color: #567;
			font-weight: bold;
			background-image:url('$user.image006');
		}
		#CategoryTab .Category #Category$categoryId {
			background-image:url('$user.image006');
			font-weight: bold;
			color: #47301C;
		}


あとは、6番の画像を明るく塗って 10 番の画像を暗く塗ってできあがりです。

$user.image006 と $user.image010 を使っていて、中身を変えれない場合は
他の空いている所を使って、その番号を CSS に書くか、外部画像を使って、
その URL を CSS に書くかどちらかです。


関連する記事

手ブロ新デザイン : あたらしいテーマをカスタマイズしました
【手書きブログの最新記事】
posted by at 2011-09-23 14:29 | 手書きブログ | このブログの読者になる | 更新情報をチェックする