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

SC2 2018-11-23

2021-12-22

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

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

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

これまでは、解像度 1024x768 （アスペクト比４：３）で設計していましたが、ワイド画面が一般化してきたので、アスペクト比１６：９に最適化しました。

実行したこと。

Blogger の管理画面からブログ全体の幅を拡大
Awesome Inc. テンプレートの最小幅を変更

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

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

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

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

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

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

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

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

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

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

Google アナリティクスでブラウザのサイズを表示するには？

Google アナリティクス > ユーザー > プライマリディメンション：ブラウザ > セカンダリディメンション：ブラウザのサイズ

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

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

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

実行する手順は次の通りです。

テンプレートのバックアップを取る（Awesome Inc.）
Blogger 管理画面から画面のサイズを変更する
Awesome Inc. の min-width の値を変更する

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

次のように画面遷移すると、バックアップを取ることができます。
「バックアップ／復元」は右上にボタンがあります。

Blogger > 左ペイン：テーマ > バックアップ／復元

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

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

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

次のように画面遷移します。

Blogger > 左ペイン：テーマ > カスタマイズ > 幅を調整

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

管理画面から次のように遷移します。

Blogger > 左ペイン：テーマ > HTML の編集

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

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

変更前

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

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

変更後

body {
min-width: none;
}

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