引き続き、ブログの改修ですが、今回は広告についてです。
本書を参考に、So-netブログで提供されるテンプレートの範囲で実行してみたのですが、全く効果がありませんでした。そのため、記事を増やす前に、デザインを自分で改修しなければと調べたところ、意外と簡単に改修できました。ただし、少しCSSの知識が必要です。
So-netブログのデザイン
So-netブログのデザインは、「デザイン」タブの「テンプレート一覧」に表示されるテンプレートから選んで適用する形となります。
選んだテンプレートは「テンプレート管理」の「テンプレート選択 ＆ CSS編集」の部分で適用します。下の部分にある、「HTML編集」の部分は共通で、jQueryなどのスクリプトを埋め込む場合は、「HTML編集」の部分に組み込みます。例えばサムネイルからの拡大などは以下の記事を参考にして下さい。
「テンプレート選択 ＆ CSS編集」でテンプレートを変更することで、「HTML編集」部分に組み込んだスクリプトを活かしたまま、外観を変えることが出来ます。
So-netブログのテンプレートの問題
So-netブログに用意されているテンプレートは、大きく「ノーマル」と「ワイド」の2種類があります。
「ノーマル」(何も表示されていないもの)は幅770ピクセル、「ワイド」(ワイドと表示されているもの)は幅900ピクセルです。記事の幅を広く、サイドバーを狭くしたデザインとなっています。
そのため、AmazonアソシエイトやGoogle AdSenseの広告をサイドバーに表示させようとすると、テンプレートのサイドバーの幅の制約を受けることになります。
サイドバーの幅は、「ノーマル」で200ピクセル、「ワイド」で170ピクセルから260ピクセルとテンプレートによって違いはありますが、四角い広告を表示するには幅が足りません。
幅200ピクセルで表示可能な縦長広告にすると、プロフィールや記事一覧などを表示するためには、広告をそれらの下に表示しないと、最初に表示された画面からスクロールしないとプロフィールなどが表示されなくなってしまいます。
試しに、最初の画面には表示されない、サイドバーの下の方に広告を配置しましたが、全く効果がありませんでした。書籍で説明されていたことは、四角い広告を出来るだけ上部に表示することでした。
CSSを変更
仕方ないので、CSSを変更してサイドバーの幅を広げることにしました。広告を表示するために記事の幅を狭めるのも違う気がするので、記事の幅はそのままで、サイドバーだけ広げます。
CSSを編集するには、「テンプレート管理」の「テンプレート選択 ＆ CSS編集」の部分の「テンプレート名」の列で、使用するテンプレート名の横の[編集]をクリックします。
「スタイルシート編集」画面になるので、CSSが表示されたテクストボックスで「CTRL-A」で全選択し、メモ帳などに貼り付けて、拡張子CSSのファイルに、まず、保存します。
ブラウザーは、「テンプレート管理」をクリックして「テンプレート管理」のページに戻しておきます。「保存」「初期値に戻す」「プレビュー」などはクリックしないようにします。
CSSを保存するのは、修正する部分が多岐に渡るため、通信エラーで修正したCSSが消えないようにするためです。
CSSファイルを検索して、「#side-a」「#side-b」などを探します。その近くで、200px前後の前後の数値を探します。その値がテンプレートのサイドバー内に配置できるものの幅となります。
四角い広告は幅が、300pxまたは336pxなので、自分が配置する広告の幅に変更します。また、この時、元の幅との差を計算しておきます。例えば、元のサイドバーが220pxで300pxの広告を配置するなら、サイドバーの幅を300pxにし、差は80pxということになります。
CSSファイル全体を検索し、同じ数値を探して全て変更します。例えば220pxを検索して全て300pxに変更します。
最後に、全体の幅を調整します。
CSSファイル全体を検索して、770pxまたは900pxを探します。これが全体の幅なので、先ほど計算した差を加算した幅に変更します。例えば、元の幅が900pxで差が80pxなら、980pxに変更します。
CSSファイル全体を検索し、同様に全て変更します。
変更が終わったら、念のためCSSファイルを保存しておきます。
ブラウザーで再度、「テンプレート管理」の「テンプレート選択 ＆ CSS編集」の部分の「テンプレート名」の列で、使用するテンプレート名の横の[編集]をクリックします。
「スタイルシート編集」画面になるので、CSSが表示されたテクストボックスで「CTRL-A」で全選択し、「DELETE」キーを押し、全て削除します。CSSファイルで、「CTRL-A」で全選択し、「CTRL-C」でコピーして、「スタイルシート編集」のテキストボックスにカーソルを置き、「CTRL-V」で貼り付けます。最後に「保存」をクリックして変更を適用します。
「設定を変更しました。」と表示されれば完了です。
あとは、「デザイン」タブの「テンプレート管理」で変更したテンプレートを適用し、「レイアウト」で「サイドコンテンツ」にある「カスタムペイン」に四角い広告のコードを貼り付けて、サイドバーに配置し、「設定を保存する」をクリックすれば完了です。
なお、デザインによっては、角丸の枠の幅が合わずにおかしなデザインになる場合もあります。その場合はCSSを修正します。このブログのメイン、サブともに元のテンプレートから幅以外にデザインも修正をかけています。
まとめ
広告に拒否反応をする人もいますが、サイドバーを右に配置することで、ブラウザーの幅を調節して広告を見えなくすることも出来ます。また、記事を左に配置することは、HTMLで記事のコードがサイドバーのコードより先に来るのでSEO的にもよいと聞いたことがあります。
実際に表示される広告を見て思いましたが、レビューだと紹介できるものは、自分の使ったものに限られますが、広告によって試していないものの説明は、広告主に任せることも出来ます。
何故、So-netブログのテンプレートは、こんなに使い難いのかわかりませんが、CSSを自分で変更すれば対応は可能です。そして、書籍に書かれたように、Google AdSenseのようなクリック型広告を上部に配置することの効果はすぐに実感出来ると思います。
関連記事：
| Amazonで見る |
