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

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

メニューバーのドロップダウン

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューをドロップダウンさせるカスタマイズを紹介します。

ドロップダウンは2段階(第3階層の表示)まで対応しました。

IE6以下を無視すればCSSのみでドロップダウンが可能なのですが、まだまだ無視できる数ではないため一部JavaScriptを用いています。

HTMLを編集します。
赤とオレンジの部分が新たに追加した箇所です。
第3階層まで必要ない場合はオレンジ部分を削除してください。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>

<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第1階層</a>
<ul>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第2階層</a>
<ul>
<li><a href="#">第3階層</a></li>
<li><a href="#">第3階層</a></li>
<li><a href="#">第3階層</a></li>
</ul>

</li>
</ul>
</li>


</ul>
<!--▲ メニューバー ▲-->



次にスタイルシートの末尾に以下を加えてください。
既にメニューバーを実装済みの方は赤い部分のみ追加してください。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

/* ▼メニューバー(ドロップダウン)▼ */

#menu_bar ul {
position:absolute;
margin:0;
padding:0;
}

#menu_bar li {
position:relative;
margin:0;
padding:0;
}

#menu_bar li ul li {
float:none;
}

#menu_bar li.menu ul,
#menu_bar li.menu ul li.menu ul,
#menu_bar li.menu_on ul li.menu ul {
display:none;
}

#menu_bar li.menu_on ul {
position:absolute;
display:block;
top:100%;
left:0;
}

#menu_bar li.menu_on ul li.menu_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

/* ▽IE6バグ対応▽ */
* html #menu_bar li li,
* html #menu_bar li li li {
font-size:1px;
line-height:0;
}
* html #menu_bar li li a,
* html #menu_bar li li li a {
display:block;
font-size:10pt;
line-height:25px;
}
/* △IE6バグ対応△ */

#menu_bar li li a,
#menu_bar li li li a {
border-top:1px solid #111111; /* 区切り線 */
}

/* ドロップダウンリストの透過(IE6以下未対応) */
#menu_bar > li > ul {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲メニューバー(ドロップダウン)▲ */


これでドロップダウンメニューが出来ます。
区切り線ドロップダウンリストの透過はお好きな様に設定してください。

ドロップダウンは2段階(第3階層の表示)まで対応しているので、親子カテゴリの表示に利用しても良さそうですね。


【2009/08/04 追記】
filter:alpha(opacity); を使うと、IE7,8で第3階層が表示されませんでした。スタイルシートからこれを削除してください。
申しわけございません。m(__)m
また、第2、第3階層のメニュー幅をそれぞれ設定したい場合は、スタイルシートの末尾に以下を加えてください。

/* 第2階層の幅 */
#menu_bar li li a {
width:150px;
}

/* 第3階層の幅 */
#menu_bar li li li a {
width:150px;
}


ただし第3階層の始点は、第2階層の終点より少しずれた位置になってしまうのでご了承ください。
関連記事
[ 4786 ]
有難うございます。
[ 2009/07/03 21:05 ] [ 編集 ]
[ 4787 ]
ドロップダウンさせているメニューを最後尾ではなく、左から2つ目や3つ目にもってくる方法を教えてください。
[ 2009/07/03 21:08 ] [ 編集 ]
[ 4789 ] > YONEさん、Geckoさん
> YONEさん
大変お待たせしました m(__)m

> Geckoさん

左から2番目をドロップダウンしたければ、赤い部分を

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>

の下に挿入してください。
左から3番目をドロップダウンしたければ

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>

の下に挿入してください。
[ 2009/07/03 23:59 ] [ 編集 ]
[ 4804 ] できませんでした^^;
前回、ドロップダウンなしの時には
できたんですが、一時期メニューバーを
外していたので再度やり直したんですが

メニューバーの最後に「第1階層」という
メニューボタンが出てしまうのと
ドロップダウンができなかったので
いったんタグを外した状態で
ここに書き込んでいます

貼り方がおかしかったんでしょうか?
初心者の単純ミスなんでしょうか?
忙しい時にすいません
[ 2009/07/04 18:52 ] [ 編集 ]
[ 4806 ] > ASPさん
ドロップダウンを使うことにしたんですね。

その「第1階層」とでるメニューこそがドロップダウンメニューなのですが、記事のHTML,CSSを貼付けてもドロップダウンしなかったということでしょうか?
[ 2009/07/04 19:04 ] [ 編集 ]
[ 4809 ] もう一度
そうだったんですか^^;
すいませんでした

もう一度やってみます
[ 2009/07/04 20:57 ] [ 編集 ]
[ 4813 ]
いまいちわかりません・・・
成功するとどんな感じですか?
[ 2009/07/04 22:05 ] [ 編集 ]
[ 4814 ] > YONEさん
YONEさんの環境では、メニューバーの一番右にある「第1段階」にマウスを乗せてもドロップダウンしないですか?

こちらから(FireFox,IE6)はドロップダウンするのが確認できるのですが・・・

OS,ブラウザは何ですか?
[ 2009/07/04 22:54 ] [ 編集 ]
[ 4826 ]
Fire Fox3はドロップダウンしないですか?
全部表示されてごちゃごちゃになりました

IEならできましたがFireFox派なので
とりあえずFire Foxを3.5にしたら直りました。

なぜですかねFire Fox3は未対応ですか?
[ 2009/07/05 12:29 ] [ 編集 ]
[ 4827 ] > YONEさん
私の環境だとFirefox3でもドロップダウンするのですが・・・
更新(Ctrl+F5)させても反映されなかったのでしょうか?
[ 2009/07/05 14:44 ] [ 編集 ]
[ 4868 ]
ちゃんと出来るようになったっぽいです

ありがとうございます。
[ 2009/07/08 18:48 ] [ 編集 ]
[ 5284 ]
ドロップダウンされた各メニューの幅をメニューバーの各メニューの幅より広く表示できないのでしょうか?
[ 2009/08/04 11:27 ] [ 編集 ]
[ 5289 ] > naokiさん
記事に追記したのでこちらを参考にしてください。

メニューバーのドロップダウン【2009/08/04 追記】

http://10plate.blog44.fc2.com/blog-entry-230.html#add20090804
[ 2009/08/04 20:40 ] [ 編集 ]
[ 5297 ] >いたおさん
素早い対応ありがとうございます。
無事変更することができました。
[ 2009/08/05 13:14 ] [ 編集 ]
[ 5307 ] > naokiさん
2階層目の幅が変更できましたね。良かったです^^
[ 2009/08/05 23:36 ] [ 編集 ]
[ 6495 ] おはようございます。
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>

<li><a href="#">新着記事1</a></li>
<li><a href="#">新着記事2</a></li>
<li><a href="#">新着記事3</a></li>
のように、新着記事を表示することは出来ますでしょうか?
さらに、カテゴリー別にもやりたいのですが。
どうでしょうか。
[ 2009/10/16 08:55 ] [ 編集 ]
[ 6502 ] 自力で
自力で何とか新着記事は出来ました。
これをカテゴリーでもやりたいのですがどうでしょうか?
[ 2009/10/16 18:17 ] [ 編集 ]
[ 6507 ] > さくらいさん
記事を掲載したのでこちらを参考にしてください。

メニューバーのドロップダウンにカテゴリを表示
http://10plate.blog44.fc2.com/blog-entry-318.html

どうもドロップダウンの中にリンクタイトル<a title="~">を入れると、時々うまく動作しないことがあるようなので外しました。
[ 2009/10/16 20:49 ] [ 編集 ]
[ 7105 ]
やってみたのですが、
第2階層と第3階層がかさなってしまって、
見にくいです。
第3階層を右にずらすにはどうしたらよいですか?
相互リンクのところです。
[ 2009/11/22 17:50 ] [ 編集 ]
[ 7107 ]
上の付け出しで、
IEではかさならないのですが、
Firefoxで見ると重なってしまいます。
[ 2009/11/22 18:21 ] [ 編集 ]
[ 7117 ] > masa173さん
このカスタマイズを施しているようですね。

横メニューバーを幅一杯に表示する(リキッドレイアウト)
http://10plate.blog44.fc2.com/blog-entry-186.html

このカスタマイズを元に戻してみてください。
[ 2009/11/23 13:55 ] [ 編集 ]
[ 7317 ]
いつもこのサイトにはお世話になっております。
このドロップダウンメニューを参考にさせていただき当サイトにも設置しましたが、記事のすぐ真上にあるためダウンメニューが隠れて表示されてしまいます。
最前面に表示させるためにはどうすればよろしいでしょうか?
ご教授願います。
[ 2009/12/07 16:54 ] [ 編集 ]
[ 7320 ] > ハルさん
これをスタイルシートの末尾に加えてみてください。

#menu_bar {
z-index:100;
}
[ 2009/12/08 01:35 ] [ 編集 ]
[ 7327 ]
いたおさん
ご返答ありがとうごさいました。
やってみましたがやはり隠れたままでした。
尽力ありがとうございました。
諦めます。
[ 2009/12/08 18:06 ] [ 編集 ]
[ 7333 ] > ハルさん
ダメでしたか、申しわけありません m(__)m
[ 2009/12/08 22:51 ] [ 編集 ]
[ 7473 ]
毎回素晴らしい作品感謝しています。
このドロップダウンメニューを追加してみたのですが、クリックで
第2階層や第3階層を表示、非表示は出来ないのでしょうか。
[ 2009/12/20 14:11 ] [ 編集 ]
[ 7476 ] > 山田さん
マウスオーバーでなくクリックとなると難しいです。申しわけありません m(__)m
[ 2009/12/20 23:32 ] [ 編集 ]
[ 7480 ]
ご返答ありがとうごさいます。
了解しました、これからも楽しみに見させて頂きます。
[ 2009/12/21 00:53 ] [ 編集 ]
[ 7494 ] > 山田さん
ご期待に添えず申しわけありません m(__)m
[ 2009/12/23 20:22 ] [ 編集 ]
[ 7710 ]
初めまして、何時も参考にさせて頂いております。
今回このカスタマイズに挑戦してみたんですが、
表示が崩れてしまい、どうも上手く表示されないようです。

http://blog-imgs-31.fc2.com/l/f/r/lfriendblog/blog_20100105200420.jpg

上記のような感じになってしまいます;
現在は見苦しいので別のテンプレートに変えてありますが、
改善部分はありますでしょうか。 他に必要な情報が御座いましたら
何なりとお申し付けください。

忙しいとは思いますが、宜しくお願いします。
[ 2010/01/05 20:08 ] [ 編集 ]
[ 7717 ] > 黒神さん
不具合状態を見ていないので詳しくは解りませんが、スタイルシートの設定が効いていない(正しく貼付けられていない)可能性があります。
[ 2010/01/06 00:08 ] [ 編集 ]
[ 7722 ]
>> いたお さん

ご指摘有難うございました。
無事、反映させることが出来ました。
やはり原因はスタイルシートだったようです。
感謝です。
[ 2010/01/06 01:12 ] [ 編集 ]
[ 7730 ] > 黒神さん
解決して良かったです^^
[ 2010/01/06 22:45 ] [ 編集 ]
[ 7770 ]
この「FC2ブログのテンプレート工房」のサイトのメニューバーの
カテゴリの部分のように、メニューバーにドロップダウンを導入したくて、ここに書いてあるHTMLとCCSを加えてみました。

一応表示はされるのですが、ドロップダウンさせた「第一階層」という文字が小さくなってしまいます。
どうすれば他の文字と同じ大きさにできますか?

また、ここに書かれてあるHTMLを導入すると、
「第二階層」という部分が4つ出来るのですが、
ドロップダウンさせた「第二階層」の1つ目から4つ目までの上に
マウスをのせて動かすと、4つ目の「第二階層」という文字に
マウスをのせる前に、ドロップダウンが消えてしまいます。

これを解消する方法はありますでしょうか?

この「FC2ブログのテンプレート工房」のサイトのメニューバーの
カテゴリの部分のようにしたいです。

説明が下手で申し訳ありませんが、教えていただけますか?



[ 2010/01/08 15:22 ] [ 編集 ]
[ 7782 ] > 一歩さん
現状を見なければ詳しいことは解りませんが、メニューバーのHTMLか、その前後のHTMLにタグの閉じ忘れ等がある可能性が考えられます。
[ 2010/01/08 23:07 ] [ 編集 ]
[ 8096 ]
このドロップダウンとメニューバーの画像ロールオーバーの併用は出来るのでしょうか?
第一階層だけでも画像ロールオーバーを使用したいのですが・・・
[ 2010/01/29 17:51 ] [ 編集 ]
[ 8097 ]
>>龍さん
出来ますよ。
[ 2010/01/29 22:12 ] [ 編集 ]
[ 8098 ]
>>tskill さん
是非とも教えて頂きたいのですが・・・
[ 2010/01/29 23:24 ] [ 編集 ]
[ 8106 ] > 龍さん、tskillさん
> 龍さん
tskillさんが教えてくれたとおり出来ますよ。

メニューバーのドロップダウン
http://10plate.blog44.fc2.com/blog-entry-230.html

メニューバーの画像ロールオーバー
http://10plate.blog44.fc2.com/blog-entry-231.html

順番はどちらからやっても良いです。
[ 2010/01/30 00:35 ] [ 編集 ]
[ 8108 ]
この方法で行った場合、何処を変えればいいのでしょうか?

<li class="menu02" onmouseover="this.className='menu02'" onmouseout="this.className='menu02'"><a href="#">第1階層</a>
<ul>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第2階層</a>
</li>
</ul>
</li>

画像名がmenu02 なので書き換えたところ、ドロップアウトした部分が、カーソルを合わせなくても表示されてしまうのですが・・・。
[ 2010/01/30 01:05 ] [ 編集 ]
[ 8109 ] > 龍さん
半角スペースで区切れば複数のクラスを設定することができますよ。

<li class="menu02 menu" onmouseover="this.className='menu02 menu_on'" onmouseout="this.className='menu02 menu'"><a href="#">第1階層</a>
<ul>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li><a href="#">第2階層</a></li>
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第2階層</a>
</li>
</ul>
</li>
[ 2010/01/30 01:26 ] [ 編集 ]
[ 8110 ]
ありがとうございます
無事解決しました
[ 2010/01/30 01:30 ] [ 編集 ]
[ 8123 ] > 龍さん
解決して良かったです^^
[ 2010/01/31 00:43 ] [ 編集 ]
[ 8156 ] はじめまして
始めまして。
以前からこちらのブログには、カスタマイズの際の参考にさせていただいております。
今回このメニューバーを導入したのですが、一つだけお尋ねしたい事があります。

メニューバーの高さと第2階層の高さを別々に指定する事は可能でしょうか?
例えばメニューバーをの高さを30px、第2階層の高さを25pxといった感じです。

現在は全体の高さを25pxに指定し、メニューバーに30pxの高さの画像をimgタグで配置し無理やり30pxにし、第2階層だけ25pxで見えるようにしています。
が、そうするとメニューバーの画像のロールオーバーが出来なくて困ってしまいます(方法はあるのかもしれませんが、分かりませんでした。 高さを25pxに指定しているため、このブログに書いてある背景画像を使ったロールオーバーの方法だと、25px分しか表示されない)。

高さを別々に指定するのが一番望ましいのですが、そのような方法はありますか?
よろしければ教えていただけると助かります。
[ 2010/02/01 18:45 ] [ 編集 ]
[ 8157 ]
>>Rainさん
/* 第2階層の幅 */
#menu_bar li li a {
height:25px;
}
/* 第3階層の幅 */
#menu_bar li li li a {
height:25px;
}
で、できます。
[ 2010/02/01 19:51 ] [ 編集 ]
[ 8159 ]
tskill様

お返事ありがとうございます。
上記の方法で試してみましたが、確かに高さは低く出来たのですが、メニュー同士の間に狭めた分の隙間が開いてしまうようです。
こちらのCSSの記述に何か問題があるのかもしれません。
もう少し試行錯誤してみます。

どうもありがとうございました。
[ 2010/02/01 20:21 ] [ 編集 ]
[ 8168 ] > Rainさん、tskillさん
> Rainさん
tskillさんが教えてくれたものに「line-height:25px;」を加えるとどうでしょうか。

/* 第2階層の幅 */
#menu_bar li li a {
height:25px;
line-height:25px;
}
/* 第3階層の幅 */
#menu_bar li li li a {
height:25px;
line-height:25px;
}

これで上手くいかなければ「height:25px;」を削除してみてください。

> tskillさん
たくさん助けてくれてありがとうございます^^
[ 2010/02/02 01:06 ] [ 編集 ]
[ 8172 ]
いたお様

お返事ありがとうございました。
上記の方法を試してみましたが、やはり隙間が開いてしまうようです。

ただ、

/* 第2階層の幅 */
#menu_bar li li a {
line-height:25px;
}

#menu_bar li li{
line-height:0px; /*文字のサイズより小さい数値*/
}


このようにすることで、高さの数値の指定はできませんが、文字に合わせて幅が狭くなり、隙間も開かなくなりました。

根本的な解決とは言えませんが、とりあえずこれで妥協しようと思います。
どうもお騒がせしました。
ありがとうございます。
[ 2010/02/02 03:17 ] [ 編集 ]
[ 8173 ]
申し訳ありません、訂正です。

/* 第2階層の幅 */
#menu_bar li li a {
line-height:25px;
}

この部分は

line-height:normal;

です。

申し訳ありません。
[ 2010/02/02 03:20 ] [ 編集 ]
[ 8190 ] > Rainさん
妥協案でも自己解決した方法をコメントに残してくれると皆が情報共有できるので助かります。ありがとうございます^^
[ 2010/02/02 23:59 ] [ 編集 ]
[ 8395 ] ドロップダウンメニューを全表示したい
度々の質問で恐縮です。
ドロップダウンでカテゴリや、タグ、リンクなどを表示しておりますが、
それぞれの件数が多く、確認するためにはスクロールする必要があります。
可能であれば画面内に全てを表示させたいのですが、
件数指定などで折り返し表示することはできるのでしょうか?
[ 2010/02/14 11:34 ] [ 編集 ]
[ 8418 ]
>>8395

第3階層を利用すれば可能だと思います。
[ 2010/02/15 12:57 ] [ 編集 ]
[ 8419 ]
>>甘苦いチョコレートさん
第3階層は子カテゴリで使用しております。
私のブログは子カテゴリ、タグ、リンクなどが各50前後あり
ドロップダウンリストが長々と表示される状況です。

第4、第5と分けていけば表示されないことも無いかと思うのですが
根本的な解決にならないので別の方法を模索しております。

お返事ありがとうございます。
[ 2010/02/15 14:16 ] [ 編集 ]
[ 8549 ] 投稿数を付けた
ドロップダウン2段階 3階層 に投稿数を付けたいのですが上手くできません。
教えて下さい。宜しくお願いします。
[ 2010/02/25 15:14 ] [ 編集 ]
[ 8626 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/03/24 22:00 ] [ 編集 ]
[ 8759 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/11/08 21:41 ] [ 編集 ]
[ 8773 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/12/17 15:38 ] [ 編集 ]
[ 8785 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/01/10 09:09 ] [ 編集 ]
[ 8792 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/01/25 15:08 ] [ 編集 ]
[ 8828 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2011/05/29 10:19 ] [ 編集 ]
[ 9034 ]
質問なのですが、
メニューバーに他のサイトのリンクや
管理画面などのリンクはどうやったらできるのですか??
<li><a href="<%url>http://fc2.com/login.php">管理画面</a></li>
とやってみたんですがNot for errorに
なってしまいます><
[ 2012/02/29 17:42 ] [ 編集 ]
[ 9035 ] > Lhaplus3さん
この記事を参考にしてください。
http://10plate.blog44.fc2.com/blog-entry-79.html
[ 2012/02/29 19:13 ] [ 編集 ]
[ 9036 ]
ありがとうございます!!
早速やってみます。
[ 2012/02/29 20:48 ] [ 編集 ]
[ 9145 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2012/05/25 15:02 ] [ 編集 ]
[ 9158 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2012/09/13 08:41 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

メニューバー
daikiさん用 メニュウバーの出てくるやつ
[2012/02/25 18:07] 神々の領域(キリッ
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

09 | 2023/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る