読者です 読者をやめる 読者になる 読者になる

月曜からカタコリ

ハッカーにも画家にもなれない

ブログデザインのカスタマイズとアドセンスの話

ブログデザインを大幅に変更しました!

いつかやろうと思っていたんですけど、なかなか手が出ず…
はてなのデザインのテンプレートだと、完全に気にいるものがなくて、
カスタマイズしなきゃなぁ、面倒だなぁ、とただただ思っていました。

しまし、先日、ちょっといいことがありまして、これからアクセスが少し増えそうな予感がするので、
これはデザインをきちんとせなあかんな!と思い立ったわけです。

それと同時に、アドセンスの効果的な設置方法に関しても調べつつ、少しいじってみました。

デザイン

まず、デザインはInnocentを使わせていただきました。
Innocent - テーマ ストア


よく見たら、上のリンク先にカスタマイズ方法が書いてあったものの、
それを見ずに勝手にCSSをごりごりいじってカスタマイズしていました。

こちらがそのCSSです。

#globalheader-container {
    background-color: #e91e63;
}
#blog-title {
    text-align: left;
    padding-bottom: 10px;
    padding-top: 10px;
}
#top-box, #content {
    border-top: 3px solid red;
}
#box2 {
    width: 230px;
}
#wrapper {
    padding-right: 230px;
}
#blog-title-inner{
    padding-left: 54px;
}
#content {
    padding-top: 8px;
}

Google Developer Toolsを使ってこうやってタグを探っていきながら、
気になるところだけいい感じに直しました。

f:id:hattys2:20160624002428p:plain

デフォルトから直したところは具体的には、
・サイドバーを狭く
・記事を広く
・ヘッダーの色を調整
・タイトルを左に寄せる
・タイトルを狭く
というところです。

本文をできるだけ広く上の方に見せたかったんです…!

Google Developer Toolsの使い方はググればたくさん出てきます!
難しそうな名前だけど、CSSとかを触りたい初心者にはとっても優しいので、ぜひ試してみてください。

アドセンスの設置方法

今までは、
・タイトル下に細長いの
・記事下に細長いの
・サイドバーにレスポンシブル
を張っていたのですが、

細長いのはクリック率が最悪らしいです!!!!
レクタングル (大)を使うことがアドセンス界の常識らしく、
できれば
・記事冒頭部分
・記事中盤
・記事最後
の三箇所に張るのがいいらしい。

でも、私の場合は冒頭部分に広告が来るのはちょっと…と思っていたので、
まず、タイトル下の細長いのを撤去しました。

また私は一つの記事の文章量が少ない日もたくさんあるので、
記事の真ん中に広告が来るとしつこくなってしまいます。

そこで、以下の記事を参考にして、記事下に広告を2個貼ることにしました。
しかもこの設定でやると、はてなスターとかの前に設置されます。

kinyanpu.hatenablog.com


こうやってこのページが出来上がりました。
これからも少しずつ改良するので、参考にしていただけたら嬉しいです。

広告を非表示にする