Blogger: ブログのページ幅を最適化(アドセンス対策)

このサイトを検索 | Search this site
gsense-logo-2019.png

Awesome Inc. テンプレートを変更して横方向のサイズを可変サイズに変更したので、実行した手順をメモに残しています。

これまでは、解像度 1024x768 (アスペクト比4:3)で設計していましたが、ワイド画面が一般化してきたので、アスペクト比16:9に最適化しました。

実行したこと。
  • Blogger の管理画面からブログ全体の幅を拡大
  • Awesome Inc. テンプレートの最小幅を変更


アドセンス 準拠のサイズとは?

アドセンス ヘルプを読むと、高い成果が見込める広告サイズという項目があります。

今回の変更により、当ブログで利用できないサイズは「レクタングル(大)」だけになりました。

Google が推奨するバナーサイズは次の通りです。
最も効果が高いとされているビッグバナーが利用できるようになりました。

高い成果が見込める広告サイズ
サイズ呼称変更後変更前
300×250レクタングル(中)
336×280レクタングル(大)××
728×90ビッグバナー×
300×600ハーフページ
320×100モバイルバナー(大)

ブログを閲覧しているブラウザのサイズ

PCのアスペクト比とブログを閲覧している時のブラウザのサイズは比例するのでしょうか?

16:9の画面でブラウザを全画面表示している方は少ないと推定したので、確認するために Google アナリティクスのデータを参照したところ、アクセス数ベスト10のなかで、1024x768より小さいサイズは Internet Explorer 1000x750 という結果でした。

う~ん...
皆さんブラウザを全画面表示して閲覧していたんですね。

以下は Google アナリティクスのスクリーンショットです。

browser-size
Google アナリティクスでブラウザのサイズを表示するには?
Google アナリティクス > ユーザー > プライマリディメンション:ブラウザ > セカンダリディメンション:ブラウザのサイズ

左ペインで「ユーザー」を選択したら、右ペインの「セカンダリディメンション」のドロップダウンリストから「ブラウザのサイズ」を選択する。

analytics-browser-size

Blogger テンプレートを修正する方法

Blogger の横サイズの最大値を変更するとともに、最小値を可変に変更する手順を書いています。

実行する手順は次の通りです。
  1. テンプレート のバックアップを取る(Awesome Inc.)
  2. Blogger 管理画面から画面のサイズを変更する
  3. Awesome Inc. の min-width の値を変更する

1. テンプレート のバックアップを取る(Awesome Inc.)

次のように画面遷移すると、バックアップを取ることができます。
「バックアップ/復元」は右上にボタンがあります。
Blogger > 左ペイン:テーマ > バックアップ/復元

2. Blogger 管理画面から画面のサイズを変更する

テンプレートのHTMLから直接変更することもできますが、Bloggerの管理画面から変更できるようになっているのでこちらを利用しました。

1010ピクセルから1085ピクセルに変更しました。

次のように画面遷移します。
Blogger > 左ペイン:テーマ > カスタマイズ > 幅を調整
tweak-width

3. Awesome Inc. の min-width の値を変更する

管理画面から次のように遷移します。
Blogger > 左ペイン:テーマ > HTML の編集

HTMLソースコードにフォーカスを移して(マウスでクリックする)、キーボードで Ctrl+F と打鍵すると検索窓が現れるので $(content.width) と入力してからリターンキーを数回押して次の場所を探す。

min-width の値を none に変更する。
2か所あります。

変更前
search

body {
min-width: $(content.width);
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
  min-width: $(content.width);
  max-width: $(content.width);
  _width: $(content.width);
}

source-snapshot
変更後
body {
min-width: none;
}

.content-outer, .content-fauxcolumn-outer, .region-inner {
  min-width: none;
  max-width: $(content.width);
  _width: $(content.width);
}

アドセンス に最適化するには?

ブログの横幅を決定する時は、メインカラムに Google が推奨するビッグバナー(728×90)が表示できるサイズを確保しておくといいのではないかと思います。

全体のサイズは「メインカラム+サイドガジェット」になるので、テンプレートに合った値に見直すことが必要になります。

SC2
Windowsランキング 将棋ランキング スマホ・携帯ランキング にほんブログ村 IT技術ブログ ライフハックへ にほんブログ村 その他趣味ブログ 将棋へ

このサイトを検索 | Search this site

コメントを投稿

0 コメント