【コピペで簡単! 】cssとhtmlで作る折りたたみ式メニューバー

管理人

こんにちは！！ブログ「マネちる.com」の管理人のよしです。

今回の記事ではWordPressやはてなブログで使えるhtmlとcssをコピペするだけで簡単にできるメニューバーの作り方を紹介していきます。

Googleアドセンスに合格したい。

そう思っている人も多いでしょう。そんな方にぴったりの記事です。

色んなこと記事を書いても見つけてもらえないと意味がありません。

特にGoogleアドセンスの審査に必須のお問い合わせフォームやプライバシーポリシーも発見してもらいやすい位置にないといけません。

かくれんぼで見つけてもらえない悲しみを味わうことになります。

Googleアドセンスの合格に役立つと経験から考えていますが合格を補償しているものではありません。

メニューバーとは
htmlコード
cssコード
最後に

メニューバーとは

メニューバーとはサイトの上部にあるカテゴリー名などを表示しているもののことをいいます。

当時のメニューバーはこんな感じです↓

streamable.com

ボタンをクリックするとカテゴリーの一覧ページから簡単に記事を見つけることが可能となりアクセス数増加に繋がります。

htmlコード

下記のコードをコピーして

<div id="outline_header">
<div id="menu">
<div id="menu-inner">
<div id="btn-content">
<span id="menu-btn"><i class="blogicon-reorder"></i> MENU</span>
</div>
<ul id="menu-content">
<li>
<a href="https://hh-investor.com/">TOP<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">

</ul>
</li>
<li>
<a href="https://hh-investor.com/archive/category/%E6%A0%AA%E5%BC%8F%E5%A3%B2%E8%B2%B7%E6%90%8D%E7%9B%8A">株式売買損益<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="https://hh-investor.com/archive/category/%E6%9C%88%E5%88%A5%E6%90%8D%E7%9B%8A">月別損益</a></li>
</ul>
</li>
<li>
<a href="https://hh-investor.com/archive/category/%E5%A2%97%E3%82%84%E3%81%99%E5%8A%9B">増やす力<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="https://hh-investor.com/archive/category/%E6%8A%95%E8%B3%87%E3%81%AE%E7%AA%81%E7%A0%B4%E5%8F%A3">投資の突破口</a></li>
</ul>

<li>
<a href="https://hh-investor.com/archive/category/%E5%AE%88%E3%82%8B%E5%8A%9B">守る力<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">

</ul>
</li>
<li>
<a href="https://hh-investor.com/archive/category/%E7%A8%BC%E3%81%90%E5%8A%9B">稼ぐ力<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">
<li><a href="https://hh-investor.com/archive/category/%E9%81%8B%E5%96%B6%E5%A0%B1%E5%91%8A">運営報告</a></li>
<li><a href="https://hh-investor.com/archive/category/Google%E3%82%A2%E3%83%89%E3%82%BB%E3%83%B3%E3%82%B9%E9%96%A2%E9%80%A3">Googleアドセンス関連</a></li>
</ul>
</li>
<li>
<a href="https://hh-investor.com/otoiawase">お問い合わせ<i class="blogicon-chevron-down"></i></a>
<ul class="second-content">

</ul>
</li>

</div>
</div>
<div style="clear:both"></div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var menuBtn = $("#menu-btn"),
menuContent = $("#menu-content");
menuBtn.click(function(){
menuContent.slideToggle();
});
$(window).resize(function(){
var win = $(window).width(),
p = 960;//19
if(win > p){
menuContent.show();
}else{
menuContent.hide();
}
});
});
</script>
<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:1120px;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#fde6ff;
}
.headernew{
margin:0px!important;
}

</style>

</div>

デザイン→カスタマイズ→タイトル下に貼ります。

太字の”URL”の所にはボタンを押したら飛んでほしいサイトのURLコピーしてください。

そして○の部分に文字を打てばそれが反映されます。

例えば１行目の○○○○○○にTOPと入力します。すると下記のようになります。

動画を見ていただいたように１番上にTOPが来ます。

URLはご自身のブログの飛ばしたいページのURLをコピペしてください。

cssコード

下記にコードをコピーして

デザイン→カスタマイズ→デザインCSSに貼ります。

/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #203556;/*７*/
}
#menu-inner{
width: 1000px;/*１*/
height: 40px;/*２*/
margin: 0 auto;
background: #203556;/*８*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
}
#menu-content > li{
position: relative;
float: left;
height: 100%;
text-align: center;
width: 16.6%;
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
width: 100%;/*3*/
line-height: 40px;/*２*/
background: #203556;/*９*/
color: #fff;/*10*/
font-size: 70%;
text-decoration: none;
z-index: 2;
}
#menu-content > li > a:hover{
background: #406BAC;/*11*/
color: #fff;/*12*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*2*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;
width: 200px;/*４*/
height: 40px;/*５*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*５*/
background: #444;/*13*/
color: #fff;/*14*/
font-size: 70%;
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #406bac;/*15*/
color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-inner{
width: 100%;
height: auto;
opacity: 0.8;
}
#btn-content{text-align: right;}/*20*/
#menu-btn{
display: inline-block;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background: #406BAC;/*17*/
color: #fff;/*18*/
font-size: 70%;
}
#menu-content{
display: none;
width: 100%;
}
#menu-content > li{
width: 100%;
height: 40px;/*６*/
float: none;
}
#menu-content > li > a{
width: 100%;
line-height: 40px;/*６*/
padding: 0;
text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

色は

＃○○○○○○に好きな色を探して入れてみて下さい。

自分好みのものにできると思います。

→WEB色見本原色大辞典 – HTMLカラーコード