【 コピペで一発 】: cssとhtmlで作るおしゃれなメニューバー

f:id:C4tlW:20200929120414p:plain

 

 

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

 

 

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

 

色んなこと記事を書いても見つけてもらえないと意味がありません。特にGoogleアドセンスの審査に必須のお問い合わせフォームやプライバシーポリシーも発見してもらいやすい位置にないといけません。

 

 

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

 

 

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

 

 

メニューバーとは

f:id:C4tlW:20200929142834p:plain

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

 
管理人のブログを見ればわかりますが↓
こんな感じのものをいいます↓
f:id:C4tlW:20200903123705j:image
 
ボタンをクリックするとカテゴリーの一覧ページから簡単に記事を見つけることが可能となりアクセス数増加に繋がります。
 

HTMLコード

f:id:C4tlW:20200929142743p:plain

 
下記のコードをコピーして
デザイン→カスタマイズ→タイトル下に貼ります
 
 HTMLコード
<div id="menubar">

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

<li><a href="URL" >株式売買損益</a></li>

<li><a href="URL">投資の突破口</a></li>
</ul>

<ul>
<li><a href="URL">ブログ運営</a></li>

<li><a href="URL">お金</a></li>

<li><a href="URL">お問い合わせ</a></li>
</ul>

 

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

 

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

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

 

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

 

<li><a href="URL">映画</a></li>

 

f:id:C4tlW:20200903115924j:image

 

このようになります簡単ですよね。

                                                                                                                                         

CSSコード

f:id:C4tlW:20200929142700p:plain

 

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

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

 

CSSコード

<!-- メニューバー -->
#menubar{
width:100%;
}

#menubar ul{
display:table;
width:100%;
margin: 0;
padding: 0;
background-color: #FFFFFF; }

#menubar li{
display: table-cell;
width:20%;
padding:0;
background-color: #203556; }
#menubar li a{
display: block;
margin:0 auto;
padding:5px;
border: 1px solid #FFFFFF;
text-decoration: none;
color: #FFFFFF;
text-align: center;
font-size: 18px; }
#menubar li a:hover{
background-color: #406BAC; }

 

色は

#○○○○○○に好きな色を

探して入れてみて下さい

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

本当にコピーするだけだね

 

まとめ

メニューバーの作成はGoogleAdSense合格に近づく一歩だと考えていますコピペで簡単にできるのでやってみてください。わからないことがあったらコメントください出来る限り対応します。
 
Googleアドセンスに合格する可能性を高めて収益化をして一緒に頑張っていきましょう!!
 

 
 
関連記事

 

hh-investor.com

 

hh-investor.com

 

では(^▽^)