FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

縦メニューの設置

以前横メニューバーを設置する方法を紹介しましたが、今回は縦メニューの設置方法を紹介します。

縦メニューを表示したい箇所（テンプレートHTML、またはプラグインHTML）に、以下のタグを加えてください。

<div id="menu_length">
<ul>
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>
</ul>
</div>

そしてスタイルシートの末尾に以下を加えてください。

/* ▼ 縦メニュー ▼ */

#menu_length ul {
margin:0;
padding:0;
}

#menu_length li {
list-style: none;
margin:0;
padding:0;
}

#menu_length li a {
display:block;
text-align:left;
padding-left: 20px;
text-decoration:none;
width:150px; /* 幅 */
line-height:30px; /* 高さ */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
border-left:10px solid #c0c0c0; /* 左飾り線 */
border-bottom:1px solid #333333; /* 下線 */
}

/* ▽マウスが乗ったとき▽ */
#menu_length li a:hover{
background-color:#222222; /* メニューボタンの背景 */
border-left:10px solid #ff0000; /* 左飾り線 */
}
/* △マウスが乗ったとき△ */

/* ▲ 縦メニュー ▲ */

幅、高さ、色等の各パラメータはお好きな様に設定してください。

関連記事

[ 2009/12/04 23:53 ] カスタマイズ共通カスタマイズ | TB(0) | CM(25)

≪ 縦メニューの階層化 | HOME | IEで改行タグ<br>を連続しても改行されないバグについて ≫

[ 7283 ] おはようございます

早速記事にしていただきありがとうございます。
なんか、いつになくクールですてきです。
当然、縦メニューがですが…

これから、階層化とか、右にぐりっと出したりしてみます。
ちなみに実験用のブログで…

[ 2009/12/05 08:42 ] [ 編集 ]

[ 7290 ]

これかっこいいですね。使わせていただきます！
これで、カテゴリがかっこよく見せられます！

[ 2009/12/05 16:54 ] [ 編集 ]

[ 7294 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/12/05 21:22 ] [ 編集 ]

[ 7297 ]

http://pspthemes86.blog72.fc2.com/

↑のブログみたいにカーソルを画像の上にのせると色が変わるようにするにはどうしたらいいんでしょうか？

[ 2009/12/05 21:49 ] [ 編集 ]

[ 7304 ] 四苦八苦です

階層化すると崩れてしまうのですが、何が原因でしょうか？
/* ▼メニューバー（ドロップダウン）▼ */
以下を加えると駄目なようです。

[ 7297 ] さんへ。
スタイルシートの
#menu_bar li a:hover
の項目に目的の画像ファイル名を書き加えるとできます。

[ 2009/12/05 23:12 ] [ 編集 ]

[ 7305 ] > さくらいさん、tipslabさん、7297の名無しさん

> さくらいさん
縦メニューの階層化は、横メニューの階層化とはまたちょっと変わってきます。
後日記事にするのでもう少しお待ちください。
コメントをフォローしてくれてありがとうございます＾＾

> tipslabさん
見事にカテゴリ表示に応用されましたね＾＾

> 7297の名無しさん
さくらいさんが教えてくれたようにスタイルシートを編集してください。

[ 2009/12/05 23:30 ] [ 編集 ]

[ 7307 ] わくわく

そうですよね。良かった。
ここに来るようになって少し解ったつもりですが、まだまだですね

ワクワクしながら待ってます。

[ 2009/12/06 07:10 ] [ 編集 ]

[ 7311 ] > さくらいさん

記事に掲載したのでこちらを参考にしてください。

縦メニューの階層化
http://10plate.blog44.fc2.com/blog-entry-334.html

[ 2009/12/06 23:20 ] [ 編集 ]

[ 8002 ]

このブログを参考にテンプレートを改造中です。
縦メニューをヘッダー枠内の右側に設置したいのですが、何か方法はありますか？

[ 2010/01/23 12:14 ] [ 編集 ]

[ 8004 ] > にちゃえるさん

ヘッダー枠に縦メニューを入れるのはちょっと難しいです。
お役に立てず申しわけありません。

[ 2010/01/23 23:42 ] [ 編集 ]

[ 8437 ]

http://vistanamidame.blog53.fc2.com/
このブログのように、タイトル部分に縦メニューを設置するにはどうすればいいんでしょうか？

[ 2010/02/17 02:53 ] [ 編集 ]

[ 8438 ] [ 8437 ]哀さんへ

とりあえず、ソースを見て、CSSを見ると見当が付くと思いますが。

[ 2010/02/17 12:16 ] [ 編集 ]

[ 8441 ]

>>8437

タイトル左横には


<tr><td id="header">

のすぐ下に。

右横にはタイトル画像の後に記入すれば可能です。
このときタイトル画像は以下のように記述します。

<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img style="float:left; margin-right:10px;" src="画像URL" border="0" /></a></h1>

[ 2010/02/17 19:10 ] [ 編集 ]

[ 8443 ]

回答ありがとうございます！！

早速やってみたのですが、縦メニューがタイトル画像に重ならず、画像のすぐ下に配置される結果になってしまいました・・・。

画像にメニューが重なるようにしたいのですが・・・。

もし分かりましたら、回答お願いします。

[ 2010/02/18 03:18 ] [ 編集 ]

[ 8444 ] [ 8443 ]哀さんへ

哀さんのブログのアドレスが解らないので入れるべきタグがわからいのですが、哀さんが紹介されたブログですと、の上に縦メニューがあって、あとは、右左別々のcss（floatで）で振り分けてるようです。

[ 2010/02/18 07:35 ] [ 編集 ]

[ 8462 ] 行間の設定

「トップページ」、「サイトマップ」などのタイトル？が長い場合下に表示されるのですが、その行間を狭くしたいのですが可能でしょうか？
可能なら設定方法をご教授お願いします。

[ 2010/02/18 23:27 ] [ 編集 ]

[ 8465 ]

>>はつさん
該当箇所に加えてください。数字はおこのみで。
line-height: 1.5;

[ 2010/02/18 23:53 ] [ 編集 ]

[ 8468 ]

＞tskillさん
ご回答ありがとうございます。

タイトルの長いものは行間が狭くなり良かったのですが、1行のものは狭くなりすぎ見にくくなってしまいました。

少し説明しにくいのですが、幅はそのままで行間だけ狭くすることは可能でしょうか？

[ 2010/02/19 00:20 ] [ 編集 ]

[ 8469 ]

すみません。補足です。

ブロックごとの幅はそのままで文字の行間だけ狭くすることは可能でしょうか？

[ 2010/02/19 00:24 ] [ 編集 ]

[ 8470 ] [ 8469 ]はつさんへ

<div id="menu_length">
<ul>
<li><a href="<%url>">トップページ</a></li>
<li><span style="line-height:0.8;">menu1</span></li>
<li><span style="line-height:1.2;">menu2</span></li>
</ul>
</div>
とHTMLに直接書き込む手もありそうですが。
<div> <span> <p> どれが良いのかは良くわかりません。

[ 2010/02/19 07:21 ] [ 編集 ]

[ 8482 ]

＞sakuraiさん
ご回答ありがとうございます。

いろいろ考え直したのですが、プラグイン1に2つの縦メニューバーを設置しているのですが、それぞれを独立させれば一方は幅を狭くもう一方は広くできると思うのですが、可能でしょうか？

[ 2010/02/20 00:55 ] [ 編集 ]

[ 8502 ] [ 8482 ]はつさんへ

可能です。今までの<div id="menu_length">はそのままで、二つ目の縦メニューバーを<div id="menu_length1">とかして、cssで別の設定をしてやれば出来るはずです。

[ 2010/02/20 23:40 ] [ 編集 ]

[ 8505 ]

＞sakuraiさん
ご回答ありがとうございます。

CSSで別の設定とはどのようにすればいいでしょうか？

2つ目の縦メニューバーを<div id="menu_length1">にしてCSSでも「#menu_length1」と設定したのですが、2つ目の縦メニューバーが表示されません。

[ 2010/02/21 07:47 ] [ 編集 ]

[ 8506 ]

先程更新したらキチンと設定出来ました！！
うまく更新されていなかったみたいです。

sakuraiさんご回答ありがとうございました。