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

f:id:C4tlW:20201215214553p:plain

 

こんにちは!!ブログお金に縛られず生きる道の管理人のH.Hです。

 

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

 

Googleアドセンスに合格したい。そう思っている人も多いでしょう。そんな方にぴったりの記事です。

【 最新版 】Google アドセンスに審査を合格し収益化するための3つのポイント - お金に縛られず生きる道

 

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

 

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

  

かくれんぼで見つけてもらえない悲しみを味わうことになるよ… 

 

 

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

 

 

 

メニューバーとは

オプション, 選択, 生活, メニュー, 人, 意思決定, 代替案, 退屈


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

 
管理人のブログを見ればわかりますが…

 

現在のメニューバーはこんな感じです↓
 
ボタンをクリックするとカテゴリーの一覧ページから簡単に記事を見つけることが可能となりアクセス数増加に繋がります。
 

HTMLコード

ウェブデザイン, デザイン, Web, ウェブサイト, テンプレート

 
下記のコードをコピーして
デザイン→カスタマイズ→タイトル下に貼ります
 
 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コピーしてください。

 

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

 <li><a href="URL">○○○○○○</a></li>

 

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

 

<li><a href="URL">TOP</a></li>

 

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

 

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

 

CSSコード

Css, Web, 開発, プログラミング, ウェブサイト, スクリプト

 

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

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

 

CSSコード

/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #203556;/*7*/
}
#menu-inner{
width: 1000px;/*1*/
height: 40px;/*2*/
margin: 0 auto;
background: #203556;/*8*/
}
#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;/*2*/
background: #203556;/*9*/
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;}
/*2階層目*/
#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;/*4*/
height: 40px;/*5*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*5*/
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;/*6*/
float: none;
}
#menu-content > li > a{
width: 100%;
line-height: 40px;/*6*/
padding: 0;
text-decoration: none;
}
/*2階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}
}

 

色は

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

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

コピーするだけだね…

【 コピペで一発 】: cssとhtmlで作るおしゃれなメニューバー - お金に縛られず生きる道

 

最後に

最後に, 男, シネマ ストリップ, 映画, 劇場, ビデオ, シネマ

 

メニューバーの作成はGoogleAdSense合格に近づく一歩だと考えています。コピペで簡単にできるのでやってみてください。
 
わからないことがあったらコメントください、出来る限り対応します。
 
折りたたみ式メニューバーはかっこいいのでオススメです。
 
またお問い合わせフォームのやプライバシーポリシーの作成は必須でメニューバーに加えることで発見してもらいやすく合格率が上がると言われています。
 
参考までにやってみてください。Googleアドセンスに合格する可能性を高めて収益化をして稼ぐ力を高めましょう!!
 
 
関連記事 
 
別のメニューバーの作り方も記事にしているので参考にしてみてください。こちらのほうがシンプルです。
 

メニューバー同様にGoogleアドセンス合格には欠かせないプライバシーポリシーの書き方です。

hh-investor.com

 

Googleアドセンスに一発で合格した際に意識したポイントをまとめました。

hh-investor.com 

 

では(^▽^)