『Seesaa』ブログでカテゴリの一覧を『メニューバー』のように表示させてみた

【カテゴリ：パソコン　ブログカスタマイズの記録】

このブログのサイドバーに表示していた『カテゴリ』の一覧ですが、『メニューバー』のような表示に変えてみました。

以下は、変更後の表示箇所をキャプチャした画像です。



今回参考にさせていただいたのは、以下のブログです。

Seesaaブログのカテゴリーを上部横並びに表示するカスタマイズ 無料ブログパーツナビ Blogparts-NAVI:
http://blog-parts-navi.seesaa.net/article/235867847.html

以下は、今回自分が変更した際の手順です。

スポンサーリンク

(1) 通常の背景画像とマウスを載せたときに表示させる背景の画像（＝計２種類）を用意し、それらの画像ファイルを『ブログの管理メニュー』⇒『ファイルマネージャ』からアップロードします。



自分の場合、アップロードした２つの画像ファイルのURLは以下のようになりました。
（以下のURLをクリックすれば画像を見ることができます。）

https://kingpcfx.up.seesaa.net/image/cat_menu_base.png
https://kingpcfx.up.seesaa.net/image/cat_menu_hover.png

(2) 『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面を表示し、『コンテンツ』をクリックします。



(3) 『カテゴリ』のコンテンツをクリックします。



以下のような画面が表示されます。



(4) 右上の『コンテンツHTML編集』をクリックします。



以下のような編集画面が表示されます。



(5) 表示されているHTMLのソースコードを置き換えます。

以下のコードは自分の場合の例です。

<div class="sidetitle"><% content.title %></div>
<div class="side" style="padding:5px 5px 5px 5px">

<ul class="category-menu">
<% content.header -%>
<% loop:list_category -%>
<li><a href="<% category.page_url %>" title="<% category.name | tag_break %>"><% category.name | tag_break %>(<% category.article_count | __or__ | echo("0") %>)</a></li>
<% /loop -%>
<% content.footer -%>
</ul>

</div>

参考にさせていただいたサイトではクラス名は『top-menu』でしたが、自分は『category-menu』に変えています。

(6) 置き換え終わったら『保存』ボタンをクリックして保存します。



以下のように『編集を完了しました。』と表示されます。



(7) 右上の『×』マークをクリックして『カテゴリのHTML編集』画面を閉じ、更に『保存』ボタンをクリックします。（この『保存』は行わなくても反映されますが、念のためです。）



以下のように『設定を変更しました。』と表示されます。



(8) 『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『デザイン設定』をクリックします。



以下のような一覧が表示されます。



(9) 対象となるタイトルのリンクをクリックします。



以下のような CSS（＝スタイルシート）の編集画面が表示されます。



(10) 一番最後にコードを追加します。（追加する位置は任意ですが、分かりやすい箇所が良いと思います。）

以下のコードは自分の場合の例です。
（この記事を書いた2012年11月18日現在の内容であり、今後まだ調整して修正／変更するかもしれません。）
【追記】2012-11-20 09:40 コードを変更しました。　

/* 2012-11-18 サイドバーのカテゴリーメニュー */
.category-menu{
	color: ffffff;
	font-size: 12px;
	margin : 0;
	padding: 0;
	background-color: #ffffff;
	text-shadow:0px 0px 5px #ffffff;
	font-weight:bold;
	border:1px solid #ccc;
}
.category-menu li{
	display: block;
	text-align: center;
	margin : 0;
	padding: 0;
}
.category-menu li a{
	display: block;
	color: #000000;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
	padding: 2px 0px 3px 0px;
	background: transparent url(https://kingpcfx.up.seesaa.net/image/cat_menu_base.png) bottom center repeat-x;
}
.category-menu li a:hover{
	color: #ffffff;
	text-decoration: underline;
	background: transparent url(https://kingpcfx.up.seesaa.net/image/cat_menu_hover.png) bottom center repeat-x;
}

参考にさせていただいたブログにも記載されておりますとおり、横幅のサイズや文字色、背景色などは、個々のブログにあわせて調整が必要になります。

(11) 追加が終わったら『保存』ボタンをクリックします。



以下のように『設定を変更し、ＣＳＳをビルドしました。』と表示されます。



以上で完了です。

【追記】2012-11-23 17:30

『最近のコメント』や『リンク集』などのコンテンツでも利用可能となるように汎用化しようと思い、再度見直して変更しました。

2012年11月23日現在、CSS（＝スタイルシート）の内容は以下のようになっています。

.list-menu {
	color: ffffff;
	font-size: 12px;
	margin : 0;
	padding: 0;
	background-color: #ffffff;
	text-shadow:0px 0px 5px #ffffff;
	font-weight:bold;
	line-height:1.5;
	border:1px solid #ccc;
}
.list-menu ul {
	margin : 0;
	padding: 0;
}
.list-menu li {
	list-style-type: none;
	list-style-image:none;
	display: block;
	text-align: left;
	width:100%;
	vertical-align:bottom;
	margin : 0;
	padding: 0;
}
.list-menu li a {
	display: block;
	color: #000000;
	font-size: 12px;
	text-decoration: none;
	text-align: left;
	padding: 2px 5px 3px 5px;
	background: transparent url(https://kingpcfx.up.seesaa.net/image/menu_base_gray.png) bottom center repeat-x;
}
.list-menu li a:hover {
	color: #ffffff;
	text-decoration: underline;
	background: transparent url(https://kingpcfx.up.seesaa.net/image/menu_hover_green.png) bottom center repeat-x;
}

クラス名は『list-menu』に変更しました。

スポンサーリンク