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

f:id:C4tlW:20200929120414p:plain

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

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

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

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

注意

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

メニューバーとは
HTMLコード
CSSコード
まとめ

メニューバーとは

f:id:C4tlW:20200929142834p:plain

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

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

hh-investor.com

こんな感じのものをいいます↓

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

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コピーしてください。

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

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

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; }