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

GoogleAdSense
管理人
管理人

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

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

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

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

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

メニューバーとは

統計, 調査, ウェブサイト, テンプレート, パソコン, ビジネス

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

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

※現在は変更しました

お金に縛られず生きる道

こんな感じのものをいいます↓
f:id:C4tlW:20200903123705j:image

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

htmlコード

ウェブサイト, ページ, テンプレート, インターネット, Web

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

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

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

色は

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

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

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

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

【 最新 】簿記3級ネット試験の感想と対策 – お金に縛られず生きる道

まとめ

f:id:C4tlW:20201219223402p:plain

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

▼関連記事

hh-investor.com

hh-investor.com

hh-investor.com

コメント

タイトルとURLをコピーしました