【ブログ収益化】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か月の検索パフォーマンス。





このブログを検索

ブログをよくする

自己紹介

自分の写真
はじめまして。はるはるです。 中2の息子と小5の娘を抱える2児の父です。今はゲーム会社で働いています。 子供のプログラミング学習に協力できるように教え方を勉強中です。 このブログでは簡単なゲームを作りながら自分が学んだことを少しずつ共有していきます。 情報処理の試験をたまに受けます。 第二種情報処理技術者 ソフトウェア開発技術者 基本情報処理技術者 応用情報処理技術者 twitter: https://twitter.com/amaruchan007

連絡フォーム

名前

メール *

メッセージ *

ブログ アーカイブ

QooQ