【ブログ収益化】3.ナビゲーションバーを追加する

2020年8月4日火曜日

AdSense Blogger 収益化

t f B! P L

ブログ収益化への道(その3)

関連記事まとめページです → ブログ収益化への道



AdSenseの公式ページにとても親切なページがありました。



確認できるんだー。



このページの中で、とても気になる内容がありました。



見つけやすく使いやすいナビゲーション バー(またはメニューバー)を用意することが大事です。


早速用意します!



Webを検索して調べたところ、HTMLでコードを書く必要があるようです。

まずは、ページの「レイアウト」にガジェットを追加します。




「レイアウト」タブをクリックしたら、「Cross-Column」のところでガジェットを追加します。




「HTML/JavaScript」を選択。




「HTML/Javascript」ガジェットの編集ダイアログに入力していきます。


タイトル:メニュー
コンテンツ:次のコードを書きました
<ul id="mymenu">
<li><a href="https://pandadannikki.blogspot.com/search/label/Scratch">スクラッチ</a></li>
<li><a href="https://pandadannikki.blogspot.com/search/label/AdSense">収益化</a></li>
</ul>



プレビューで見てみると、ナビゲーションバーが出てきました!





ナビゲーションバーの背景色を変えようと思います。

CSSを書けばいいようです。



「テーマ」タブで、「カスタム」ボタンを押します。




左側にあるメニューから「詳細設定」を開いて、一番上にある「ページのテキスト」のプルダウンメニューを開きます。
(わかりずらかった、、)




プルダウンメニューの中から、「CSSを追加」を選択します。




CSSコードの入力欄に次のコードを書きました。

ul#mymenu {
    background-color: #33CCFF;
}



すると、色がいい感じに変わってくれました。





これでまた一歩、収益化に近づいたらいいな。

この時点の過去3か月の検索パフォーマンス。





このブログを検索

ブログをよくする

自己紹介

自分の写真
はじめまして。あまるちゃんです。 子供のプログラミング学習に協力できるように教え方を勉強中です。 このブログでは自分が学んだことを投稿していきます。

連絡フォーム

名前

メール *

メッセージ *

ブログ アーカイブ

QooQ