Blogger 設定高度

このページでは，Blogger の基本設定を終え，普通に記事を投稿できるようになった後に行う設定を示します．見た目の調整，アクセス解析，収益化，ラベルの整理など，必須ではないものの，運用を続けるうえで役に立つ項目です．

テーマの HTML を編集したり，AdSense を設定したりする前には，現在のテーマをバックアップしておくと安心です．また，広告やアクセス解析を使う場合は，Google の各サービスのポリシーや利用条件も確認してください．

ブログを表示したときに，ブラウザのタブやブックマークの横に表示される小さなアイコンをファビコンといいます．Blogger のブログにも独自のファビコンを設定できます．

ファビコンの作成

私は GIMP を使ってファビコンを作成しました．そのときのパラメーターは，以下のとおりです．作成したファビコンは，PNG 形式の画像ファイルとして保存しました．

パラメーター		値
ピクセルサイズ		512×512
背景色		#51459d
角の丸み (半径)		60
フォント	種類	Ballpark
	サイズ	470px
	色	白

Blogger 用に作成したファビコンを図1に示します．

Blogger に反映

Blogger の管理画面で[設定] をクリックし，[基本]の中にある[ファビコン]をクリックします．ファイルを選択をクリックして，作成したファビコンの画像ファイルをアップロードします．最後に保存をクリックします．

ファビコンは，ブラウザやキャッシュの状態によってすぐに表示が変わらないことがあります．しばらく待つか，ブラウザのキャッシュを消して確認します．

Blogger では，テーマを使ってブログ全体の見た目を変更できます．左側のメニューで[テーマ]をクリックし，[マイテーマ]の[カスタマイズ]をクリックします．背景，列の幅，レイアウト，フォント，色などを調整できます．変更したら，右下の保存アイコン ( ) をクリックします．

HTML や CSS を直接編集する場合は，[テーマ]の[マイテーマ]でメニューを開き，[HTML を編集]をクリックします．編集前に同じメニューからテーマをバックアップしておくと，失敗したときに戻しやすくなります．CSS だけを追加する場合は，[テーマ] > [カスタマイズ] > [上級者向け] > [CSS を追加]を使うほうが安全です．

Google アナリティクスを使うと，ブログの読者がどの地域から来ているか，どの記事が読まれているかなどを確認できます．現在のアナリティクスは GA4 が中心で，Blogger には「G-」で始まる測定 ID を設定します．古い Universal Analytics の「UA-」で始まるトラッキング ID や，ビューの作成手順は使いません．

アナリティクスの設定

アナリティクスは，おおまかに[アカウント] > [プロパティ] > [データ ストリーム]という構成です．Blogger のブログを測定する場合は，ウェブ用のデータ ストリームを作成し，そこで発行される測定 ID を使います．

アカウントの作成

Google アナリティクスのアカウントを持っていない場合は，Google アナリティクスを開き，[測定を開始]からアカウントを作成します．すでにアカウントがある場合は，そのアカウントに Blogger 用のプロパティを追加してもかまいません．

プロパティとデータストリームの作成

1. アナリティクスにログインし，[管理]をクリックします．
2. [作成]から[プロパティ]を選択します．
3. プロパティ名を入力します．たとえば「Blogger」やブログ名にします．
4. レポートのタイムゾーンは，日本で運用するブログなら「日本」を選びます．通貨は必要に応じて「日本円 (JPY)」にします．
5. プロパティを作成したら，データの収集方法として[ウェブ]を選びます．
6. ウェブサイトの URL に自分のブログの URL を入力します．私の場合は「https://yamamo10.blogspot.com」です．
7. データ ストリームを作成し，「G-」で始まる測定 ID を確認してコピーします．

測定 ID は，たとえば「G-XXXXXXXXXX」のような形式です．この ID を Blogger に登録します．

Blogger に反映

Blogger の管理画面で対象のブログを選択し，[設定] をクリックします．[基本]の中にある[Google アナリティクスの測定]をクリックし，先ほどコピーした「G-」形式の測定 ID を入力して保存します．

アナリティクスにデータが表示されるまでには時間がかかります．公式ヘルプでは，データの表示まで最長 24 時間かかる場合があると説明されています．設定直後に表示されなくても，しばらく待ってから確認します．

AdSense を使うと，ブログに広告を表示できます．ただし，AdSense には審査とポリシーがあります．ブログを作成しただけで必ず広告を表示できるわけではありません．また，アダルト コンテンツを含むブログには広告を表示できません．

AdSense の申請

AdSense を利用していない場合は，Blogger の管理画面から申請します．左側のメニューで[収益]をクリックし，[AdSense アカウントを作成]または[AdSense をリンク]をクリックします．その後，Blogger アカウントに関連付けられている Google メールアドレスを選択し，AdSense のフォーム，支払い情報，電話番号の確認などを完了します．

Blogger から AdSense に申し込む場合は，Blogger 側の[収益]メニューを起点にするのが基本です．AdSense 側で直接サイトを追加する場合でも，Blogger や YouTube などのホスト パートナーは通常のサイトと手順が異なることがあります．

ブログに広告を表示する

AdSense の審査が完了し，広告を表示できる状態になったら，Blogger の[レイアウト]から広告を配置します．主な方法は，投稿の間に広告を表示する方法と，サイドバーなどのカラムに AdSense ガジェットを追加する方法です．

1. Blogger にログインし，対象のブログを選択します．
2. 左側のメニューで[レイアウト]をクリックします．
3. 投稿の間に広告を表示する場合は，[ブログの投稿]の[編集]をクリックし，[投稿の間に広告を表示する]を有効にします．広告のフォーマット，色，表示頻度を選び，[保存]をクリックします．
4. サイドバーなどのカラムに広告を表示する場合は，[ガジェットを追加]をクリックし，[AdSense]ガジェットを追加します．設定を終えたら[保存]をクリックします．
5. 最後に，レイアウト画面右下の保存アイコンをクリックし，配置の変更を保存します．

AdSense 側でサイトの追加や審査を行う場合は，広告を表示するサイトの URL として Blogger の正しい URL を入力します．私の場合は，プロトコルを含めて「https://yamamo10.blogspot.com」と入力します．審査は通常数日で終わりますが，2 から 4 週間ほどかかる場合もあります．

AdSense の画面でコードの設置を求められた場合は，AdSense の指示に従い，テーマの HTML の <head> と </head> の間にコードを貼り付けます．ただし，Blogger から AdSense を関連付けられる場合は，まず Blogger の[収益]メニューと[レイアウト]の AdSense ガジェットを使うほうが分かりやすいでしょう．

ads.txt の設定

サードパーティの広告サービスを使っている場合や，AdSense を Blogger に手動で組み込んでいる場合は，ads.txt の設定が必要になることがあります．Blogger では，[設定] > [収益化]で[カスタム ads.txt を有効にする]を ON にし，[カスタム ads.txt]に必要な内容を貼り付けて保存します．

設定後は，http://ブログのアドレス/ads.txt を開き，内容が表示されるか確認します．AdSense の警告が消えるまでには時間がかかる場合があります．

Blogger の記事は，日付，ラベル，検索などからたどれます．その中でもラベルは重要です．ただし，Blogger の標準のラベル機能には階層構造がありません．ラベルが増えると一覧が分かりにくくなるため，HTML/JavaScript ガジェットを使って，階層化したリンク集を別に作る方法があります．

1. ガジェット「ラベル」を設定していない場合は，必要に応じて追加します． レイアウト > 追加したい場所の[ガジェットを追加] > [ラベル]を選択します．
2. 階層化した独自メニューを置きたい場所で，[ガジェットを追加] > [HTML/JavaScript]を選択します．
3. レイアウト画面で，追加した HTML/JavaScript ガジェットを適当な場所にドラッグして配置します．
4. HTML/JavaScript ガジェットの[編集]をクリックし，HTML を記載します．私の HTML は以下のとおりです．

   <ul style="list-style-type:square;">
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター">コンピューター</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:インターネット">インターネット</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:レトロ">レトロ</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:コンピューター+label:Blogger">Blogger</a></li>
     </ul>
   </li>
   
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:科学|label:工学">科学・工学</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:物理">物理</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:数学">数学</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=(label:科学|label:工学)+label:その他">その他</a></li>
     </ul>
   </li>
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢">将来の夢</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:物理">物理</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:コンピューター">コンピューター</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:将来の夢+label:旅">旅</a></li>
     </ul>
   </li>
   
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン">オピニオン</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:ビジネス">ビジネス</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:技術">技術</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+(label:環境|label:エネルギー)">環境・エネルギー</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:公共関係">公共関係</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:オピニオン+label:芸術">芸術</a></li>
     </ul>
   </li>
   
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:経験">経験</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:経験+label:授業">授業</a></li>
      </ul>
   </li>
   
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策">散策</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:東京都内">東京都内</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:散策+label:道具">道具</a></li>
     </ul>
   </li>
   
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出">思い出</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:ブラジル">ブラジル</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+(label:幼稚園|label:小学校|label:中学校|label:高校)">幼稚園/小/中/高校</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:大学">大学</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:思い出+label:社会人">社会人</a></li>
     </ul>
   </li>
   
   
   <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活">普段の生活</a>
     <ul style="list-style-type:none">
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:購入品">購入品</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:ひとり言">ひとり言</a></li>
       <li><a href="https://yamamo10.blogspot.com/search/?q=label:普段の生活+label:日記">日記</a></li>
     </ul>
   </li>
   
   </ul>

   この HTML で，私の Blogger のラベルを階層化しました．考え方は，以下のとおりです．
   • HTML のリスト (<ol> から </ol>，または <ul> から </ul>) で見た目の階層を作ります．
   • ラベル単体の記事一覧へリンクする場合は，通常 https://ブログのアドレス/search/label/ラベル名 の形式にします．
   • 複数のラベルを組み合わせて検索したい場合は，Blogger の検索 URL に ?q=label:ラベル名 を指定します．ラベル名に空白や日本語を含む場合は，URL として正しくエンコードされているか確認します．

この方法は，Blogger のラベル機能そのものを階層化するのではなく，階層化して見えるリンク集を自分で作る方法です．ラベル名を変更した場合は，HTML/JavaScript ガジェット内のリンクも忘れずに修正します．

参考資料

更新履歴