コンテンツバーに「ドロップダウンメニュー」を設置する方法をお伝えします。
まず、「ドロップダウンメニュー」とは、マウスを重ねると、下にリンクボタンが表示されるメニューのこと（下記に見本あり）です。
普段は見えないのですが、マウスを重ねることで、各ページに移動できるリンクが表示されるため、たくさんのコンテンツを掲載できる特徴があります。
ページ数の多いホームページを運営する場合は、コンテンツバーに、このようなドロップダウンメニューを設置することも、１つの方法です。
カスタマイズ方法もお伝えしますので、良かったら、活用してみてくださいね。
■ このようなドロップダウンメニューが完成します！
マウスを重ねると、下にリンクボタンが表示されますよね？
これが「ドロップダウンメニュー」です。
ちなみに、このページでは、「コンテンツ５」まで表示させるドロップダウンメニューの作り方をお伝えしています。
■ コンテンツバーに「ドロップダウンメニュー」を設置する方法の手順
手順１：CSSファイル（style.css）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、CSSファイルに貼り付けてください。
|
上記のソースを入れる場所は、CSSファイル（style.css）の一番下に入れるようにしましょう。
（一番下に、上記のソースを追加するのが、分かりやすいと思います）
手順２：全ページのヘッダー（</head>の真上）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
|
上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
（ヘッダーの中に入れないと、動かないです）
手順３：全ページのコンテンツバーの個所に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、コンテンツバーの個所に貼り付けてください。
|
上記のソースを入れるファイルは、全部のHTMLファイルに、上記のソースを入れるようにしてください。
そして、ソースを入れる場所は、ドロップダウンメニューを表示したい箇所（コンテンツバーの個所）に入れます。
なお、リンクボタンの文字と、リンク先のファイル名については、ご自身のホームページに合わせて変更してくださいね。
【注意】
「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、
各HTMLファイルに、「ここがコンテンツバーです」と書かれているので、その個所と入れ替えるだけで良いですよ。
なお、サイドバーのHTMLファイル（side.htmlファイル）だけには、上記のソースを入れる必要はありません。
|
手順４：ドロップダウンメニューが表示されていることを確認する。
CSSファイル（style.css）にソースを追加して、全部のHTMLファイルのヘッダー（</head>の真上）とコンテンツバーの個所に、それぞれソースを入れたら、「ドロップダウンメニュー」が表示されるはずです。
実際にマウスを重ねてみて、リンクボタンをクリックして、ページが移動すれば、作業完了です！
■【カスタマイズ方法】ドロップダウンメニューの大きさを変更する方法
ドロップダウンメニューの高さを変更するには、CSSファイル（style.css）に貼り付けたソースの中に、
「height: 40px;」という記述があるので、この数字を変更することで、ドロップダウンメニューの高さを調整できます。
また、横幅を変更するには、「width: 128px;」の数字部分を変更します。
これについては、ご自身のホームページの横幅に合わせて、数字を調整してみてくださいね。
■【カスタマイズ方法】ドロップダウンメニューの項目を増やす方法
ドロップダウンメニューの項目を増やしたり、減らしたりすることもできます。
「手順３」でお伝えしている、ドロップダウンメニューを表示しているソースを変更すれば、メニューの数を変更できますよ。
具体的には、<li>から</li> で囲まれている箇所を調整（削除したり・増やしたり）します。
これについては、表示を確認しながら、試してみてください。
■【カスタマイズ方法】ドロップダウンメニューの色を変更する方法
ドロップダウンメニューの色も、自由に変更することができます。
たとえば、CSSファイル（style.css）に貼り付けたソースの中で、「background: #0077ff;」を「background: #ff1919;」に変更します。
そして、「background: #7fbbff;」の２ヵ所を、それぞれ「background: #ff7f7f;」に変更すれば、下記のように、ドロップダウンメニューを赤くすることができます。
CSSファイル（style.css）に貼り付けたソースの記述を変更することで、ドロップダウンメニューの色や大きさを変えることができるので、表示を確認しながら、変更してみてくださいね。
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
