リベルさんの戯言室

ゲームの攻略とか映画のネタバレとか。そのほかヌルヌル書いてます。リンクフリーです。※当ブログはPC版表示に最適化されています。

はてなブログテーマ「timeline-minimal」をGoogle Adsence広告の幅728pxに変更したメモ


こんばんは.

実は2日ほど前にブログのテーマをtimeline-minimalに変更していました

timeline-minimal - テーマ ストア - はてなブログ

 

ただこのテーマをそのまま使うと広告がはみだしてしまいます.

そこで,CSS初心者な私がいろいろやってみたメモです

多分他のテーマでも使えるハズ

 

 

Google Adsence広告の推奨サイズ

皆さんご存知の通りGoogle Adsenceの広告には推奨サイズなるものがあります

効果的な広告サイズ - AdSense ヘルプ

 

 336×280 のレクタングル(大)、300×250 のレクタングル(中)、728x90 のビッグバナー、そして 160×600 のワイド スカイスクレイパー

これらの推奨サイズを守ることで収益の効率が上がるらしいのですが,これを守らないとそもそもGoogle Adsenceの管理ページで「サイズがあってないよー」と言われてしまうのでかなり気になります^^;

 

この中で,記事には728x90 のビッグバナーを置くのが正方形の広告に比べて見た目が良いように私は感じるのです

 

 

 

はてなブログの「テーマストア」で配布されているテーマの問題点

しかしテーマストアで配布されているテーマは,サイドバーは問題なくとも記事の幅が728あるものは案外少ないという問題点があります

 

そのため,記事上に推奨サイズである728x90を設置するとはみ出してしまい,困っている方もいるのではないでしょうか…?

 

はてなブログではCSSを直接変更することにより,デザインの変更を行うことができます.つまりCSSを触りさえすれば自由な幅に変更できるのです!

 

 

 

一番簡単な幅を変えるCSS

基本的にはCSSに以下を追加すればokです

/* ブログ全体幅,左サイドバー,右サイドバー */

#container {

 width: 0000px;/* ブログ全体の幅指定.100%も可 */

 }

#main {

 width: 728px;/* 記事本体の幅指定.今回は728に */

 }

#box1 {

 width: 0000px;/* 左サイドバーの幅指定.もともとないテーマならbox1の部分自体不要 */

 } 

#box2 {

 width: 0000px;/* 右サイドバーの幅指定.広告サイズに合わせたものが理想 */

 } 

 

0000pxとなっている部分は自分のブログに合わせて改変すればokになります.基本は広告サイズに合わせたものがベストだと思いますが…

 

ただ右サイドバーの場合,テーマによっては広告サイズの方が横幅が広くてもあまり気にならないこともあります.この辺は臨機応変に

 

 

 

timeline-minimalのカスタマイズ

上記の方法では幅が変わらない場合があります(timeline-minimalは無理でした)

その場合はあきらめて,「デザインCSS」の最初でロードしている元CSSを読んで変更するしかありません.

timeline-minimalでは以下のCSSを読み込んでいます

http://hatenablog.com/theme/11696248318753279893.css

 

 

背景の仕切り線あたりのカスタマイズ

とりあえず変更しなければならない部分の解説

#wrapper {

  width: 756px;

  float: left;

  background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/k/kgsi/20130508/20130508065221.gif') repeat-y 65px;

  border-right: 1px solid #DEDEDE;

  padding-right:30px; 

}

timeline-minimalでは記事の両脇に灰色の仕切線が表示されていますが,その定義の部分が含まれています.

 

まずは幅を下記のように変更しました.あとから思えば変更する必要がなかったような気もする部分ですが…^^;

  width: 728px;

 

しかしこの段階では,timeline-minimalへ幅728の広告を入れると左側の背景の仕切線をまたいでしまいます.そのためとりあえず左側の仕切り線の位置を以下のように変更しました

 background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/k/kgsi/20130508/20130508065221.gif') repeat-y -1px;

あまり良い方法とは思えませんが,最後を-1pxにしています(ぉぃ)

0pxにした場合日付表示の左側に仕切り線が配置されたのですが,これだとギリギリ広告が線上に乗ってしまい,とりあえずの回避ということで.

 

 次に背景右側の仕切り線の位置定義に影響する部分です.適当に数字変えてみると分かると思いますが,もしwrapperの幅を変えた時はココの数字も弄る必要があります.

  padding-right: 53px;

1px動かすだけで,サイドバーの〇と線が大幅にずれるので注意です.

 

 

 

 

記事本体の位置調整

さてこれで背景の左側仕切線がいなくなり,広告はある程度綺麗に晴れたと思いますが,記事全体が右寄りになっちゃってますね.

CSSを読んでいくと,記事本体であるentryは以下のように定義されていました

.entry-content{

  width: 665px;

  position: relative;

  left: 85px;

 なぬぅ…記事本体は665pxしかなかったのか!

ってなわけで先ほどと同じくWidth: 728px;に変更します

そして一番下のleftが,左からどれくらいの位置に記事を配置するかという定義です.この数字を小さくすれば記事本体が徐々に左側によって行くわけです.

私はleft: 25px;に変更しました

 

これで記事本体も良い位置に調整できたはずです…

...おや?はてブボタンとかTweetボタン,はてなの標準広告は右寄りのままだぞ?

 

 

 

 

記事フッターの位置調整

どうやら記事本体と,コメントを含む各種ボタンは定義が違うようです

.entry-footer {

 width: 665px;

  position: relative;

  left: 85px;

  margin-top: 20px;

  font-size: 13px;

  こちらも先ほどの記事本体と同じ数字に変更しておきましょう.

 

 

 

最終的に張り付けたCSS

最終的にCSSに貼り付けたのは以下です

/* ブログの幅 */

#container {

 width: 100%;

 }

#main {

 width: 728px;

 }

#box2 {

 width: 185px;

 }

 

#wrapper {

  width: 728px;

  float: left;

  background: url('http://cdn-ak.f.st-hatena.com/images/fotolife/k/kgsi/20130508/20130508065221.gif') repeat-y -1px;

  border-right: 1px solid #DEDEDE;

  padding-right: 53px;

}

.entry-content{

  width: 728px;

  position: relative;

  left: 25px;

}

.entry-footer {

  width: 728px;

  position: relative;

  left: 25px;

  margin-top: 20px;

  font-size: 13px;

 無駄が多そうな気もしますが…とりあえずは求めていた物になりました.

 

 

まとめ

  • はてなブログテーマをtimeline-minimalに変更した
  • そのままでは広告がはみ出してしまうのでCSSで幅を変更した
  • 実際に使用しているCSSを示した