おきがるみがる

お気軽&身軽に生活・仕事・趣味を楽しむ雑記ブログです。一応スナップ写真がメインです。

はてなテーマ「Innocent」のサイドバー幅を変更して広告の配置し直しました

今日のアイキャッチボツ写真は木屋町通で行われていた建物の工事現場。

多分ここは京劇ボウルというボウリング場の跡地ですね。長らく市民に親しまれていたボウリング場でしたがつい最近閉店し解体されました。

今はどうなっていたかな。まだ工事中ですかね? ここんとこの市内の様子から察するにホテルができると予想。どうせならラブホテルの方がネタになって良いと思うのですがw


さて、今回はAdsenseとはてなブログテーマ「Innocent」の話です。

ちょこっとしたマイナーチェンジですが、書き留めておいたら「あの時どうしたっけ?」というのを思い出せるので記事にします。

ついでに誰かの役に立つならこれ幸いです。

Adsenseの配置変更

記事下をレクタングル(大)を2個

記事の横幅的にレクタングルを2個設置していました。いわゆるダブルレクタングルです。

でもやっぱり広告は大きい方が良いですよね。そんなわけでレクタングル(大)を2個並べることにしました。

Innocentのデフォルトでは横幅が足りないので縦に並べる方向で考えましたが、後述するサイドバーの横幅変更で横に並べることができました。

サイドバー上部にラージスカイスクレイパー

Adsenseについて調べていると、ラージスカイスクレイパーが良いという情報を得ました。

300×600pxの縦長広告ですね。用意されている広告の中でも最大級の広告です。サイドバー上部でも成果が見込めるとのことなので採用してみました。

当初はサイドバーの最上部に貼り付けていましたが、読み込みが終わる前にスクロールされちゃいそうなので、現在はプロフィールとSNSリンクでワンクッション置いています。

ちなみにラージスカイスクレイパーはスマホだと画面いっぱいに広告が表示されてしまってAdsenseのルール違反です。特にレスポンシブ仕様のテーマでは注意ですね。

PC用とスマホ用はデザインを別にするか、条件分岐で非表示にするなどの対応が必要ですね。

このブログはレスポンシブデザインのテーマを使っていますが、スマホ用デザインははてな純正のを使っています。それで表示する広告を分けています。

スマホ用ページのタイトル下をラージモバイルバナーに

あとスマホ用ページの広告も2点変更しました。

これまでスマホ用ページのタイトル下にレスポンシブ広告を配置していました。

ただ、レスポンシブだと高確率でレクタングルが表示されがちです。それも悪くないのですが、記事の冒頭で大きな広告は邪魔に感じます。

そこでタイトル下をラージモバイルバナーに変更しました。これならだいぶ見やすいですね。

スマホ用ページにアンカー広告導入

スマホ用ページではタイトル下・記事直下・記事下の3ヶ所に広告を配置していますが、アンカー広告も導入しました。

アンカー広告はスマホ画面の下部にニョキッと出てくる広告です。Adsenseの「ページ単位の広告」という画面からコードを取得できます。

現在は仕様変更で何枚でもAdsense広告を貼り付けることができますが、ちょっと前まで3枚までという縛りがありました。

アンカー広告はこの縛り関係無しに表示させられる広告で「4枚目にどうぞ」的な意味で用意されていました。

数の縛りがなくなったとはいえ、あまりベタベタと広告は貼るもんじゃありません。特に小さいスマホの画面で広告が5枚も6枚も出てきたら邪魔です。

普通の広告よりもアンカー広告ならスクロール量が変わりませんのでちょうど良いと感じました。

コードを貼り付けるだけで完了なので簡単ですが、スマホデザインの貼り付け場所(ヘッダの中にあるタイトル下)はProに課金しないと編集できませんので誰でも貼れる広告ではありませんね。

あとモバイル全画面広告というのも設定できますが、明らかに邪魔でうんざりなので使いません。

Innocentのサイドバー幅を変更

さて、ここまでが前フリでここからが本題です。

本来ならコードを貼り付けて終了な作業ではあるのですが、ラージスカイスクレイパーとダブルレクタングルについてはデザイン的にそうはいきませんでした。

このブログしているテーマ「Innocent」は、そのままだとサイドバーとメインカラムの横幅が広告のサイズと合わなかったのです。

ラージスカイスクレイパーでは余るサイドバー

はてなブログテーマであるInnocentはレスポンシブデザインを採用しております。

横幅が1200px以上の場合、サイドバーの横幅は390pxです。これは空白部分を除けば横幅336pxの広告がピッタリ入るサイズになっております。

すなわちレクタングル(大)の配置を推奨しているデザインとも言えるでしょう。

ただ、僕が今回新たに配置したラージスカイスクレイパーの横幅は300pxです。微妙に余るんですよね。

広告下の「スポンサーリンク」の文言はセンタリングしたものの、広告と地味にズレてます。

ダブルレクタングル(大)が収まらないメインカラム

そして記事下のダブルレクタングルについてですが、縦に2個並んじゃいました。

メインカラムの横幅は元々711pxでして、レクタングル(大)を横に2個並べるには732pxが必要です。収まりませんね。

まぁ縦に並べた方が収益性が上がるという話も聞いたことがありますが、記事が縦長に間延びするのは見た目的には興ざめです。

何とかして横に並べたいですね。

テーマ作者様の解説を参考にサイドバー幅を変更

いろいろCSSをいじりまくりましたがなかなかうまくいかず、Google先生にヒントを求めました。

moonnote.hateblo.jp

すると普通にテーマ作者様のサイトで解説されていましたw

同じ作者様のBlankというテーマ向けに書かれた記事ですが、Innocentにも応用ができました。

以下のコードをCSSに追記します。

/* サイドバー調整(300px) */
@media screen and (min-width: 1024px) {
    #wrapper {
        width: 100%;
        margin-right: -354px;
        padding-right: 354px;
        box-sizing: border-box;
        float: left;
    }
    #box2 {
        width: 354px;
        float: right;
    }
}

Innocentのレスポンシブデザインに合わせてmin-widthを1024pxにしました。

そしてwrapperのmargin-rightを-354pxpadding-rightを354pxに変更です。変更したい幅(300px)と余白(54px)を足した数字ですね。

解説ではbox2のwidthを変更したいサイドバーの幅(この場合は300pxと記述)と書かれていましたが、それではうまくいきませんでしたね。

そこで354pxにしてみるとうまくいきました。box2はサイドバー全体なので余白も含めた横幅にしなきゃですね。

これにてサイドバーの横幅がラージスカイスクレイパーがピッタリ収まる354pxになりました。

サイドバーの横幅だけを変更しましたが、全体の横幅は据え置きなのでその分メインカラムの横幅が大きくなります。

ということでメインカラムがレクタングル(大)が2個横に並ぶ747pxになりました。一石二鳥な作業となりました!

ちなみに収まらない程度にウィンドウを小さくすると縦に並びます。とても良い仕様となりました。

サイドバー最下部固定

moonnote.hateblo.jp

あとサイドバーの最後のモジュールをスクロールしても表示されるよう固定しました。

これもテーマ作者様が解説されていましたので普通にコードをコピペしただけです。

以前採用していたコードよりもデザインが崩れなくて良いですね。

CSSを1から勉強したいと思った今日のこの頃

ほとんど人の手を借りて行った改良ではありますが、自分の思い通り反映されるとやっぱり楽しいですよね。

HTMLを少しかじった程度の知識を流用してCSSを触ってますが、やっぱり1から勉強したいなぁと思いますね。

簡単なものでもいいのでテーマを1つ作れるくらいになればブログ運営はまた変わったものになるのかもしれませんね。