おきがるみがる

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

【はてなブログ】記事中の見出し上に広告を配置し直しました(その他変更点備忘録)

僕はこのブログの他にもWordPressで運営しているブログを持っておりまして、更新はかなり昔に停止して放置しております。

さっさと廃止してしまってもいいのですが、ドメインとサーバーの期限はまだ先ですし、何より結構アクセスがありますので広告収入がまぁまぁおいしいんですよ。

このブログも、その放置しているブログ並みにアクセス数を集めるようになってきました。見てくださっている方、本当にありがとうございます!

ただ、アクセス数が近い割にアドセンスの広告収入がかなり少ない!

これはどういうことかなぁと考えたところ、稼いでくれている放置ブログの方は記事中の見出しの上に広告を表示しているのです。

コンテンツを大事にするという観点ではあまり記事中に広告を表示したくなかったのですが、実験的に見出し上に広告を表示することにしました。

その手順を紹介するのと、他にもいろいろとデザインを変更しましたので備忘録がてら書き留めておきます。

最初の見出し上にレクタングル(大)広告

元々は「続きを読む(moreタグ)」を使って広告を入れられたらと思って調べたものの、良い方法が見つかりませんでした。

このブログはほとんどの記事で見出しを使って書いておりますので、最初の見出しの上に広告を表示させることにしました。

つまりはアイキャッチ画像→リード文→目次と記事を進めて、最初の見出しで広告を出します。

見出しの手前で「続きを読む」を入れるので、記事の全文を表示させたら広告が表示される仕組みです。

uxlayman.hatenablog.com

見出し上に広告を表示する方法は、こちらの解説を参考にさせていただきました。

必要事項をフォームに入力したら自動的にコードを生成してくれる新設設計です!

レクタングル(大)の広告を作成しまして、

  • 上から1個目の
  • 大見出し(h3)
  • 1つ目
  • 表示しない

にチェックを入れました。

このブログでは大見出しにh2タグを使っていますので大見出し(h3)を選択して、

var $target = $('.entry-content h2');

entry-content h3からh2に書き換えて完了です。

その他タグでh2を入れればよかったのでしょうが何故かうまくいきませんでした。

こんな感じです。目次→広告→見出しになってますね。

トップページのサイドバー上部にダブルレクタングル(大)

これで広告を表示する場所が、

  • 最初の見出し上にレクタングル(大)
  • 記事下にレクタングル×2個

となりました。

これらの広告はすべて「続きを読む」で記事の全文を見られるようにして初めて表示されます。

それはすなわちトップページには1枚も表示されないということを意味します。なんだかちょっともったいない気がしますね。

そこでサイドバー上部にレクタングル(大)を2個設置しました。普通にサイドバーのHTMLモジュールにコードを入れただけです。

本当はラージスカイスクレイパーを表示しようかと思いましたが、ダブルレクタングルの方が見た目的にも良かったりします。

ここに設置したところでクリックはあまりされないでしょうが、ブログトップを開いて最初に目につく場所に広告があるのは悪くないのではないかと。

記事ページでは非表示に設定

ただし、このままだと記事の3枚と合わせて合計5枚の広告が表示されます。

最近1ページにおけるアドセンスの広告枚数制限が無くなったとはいえ、1ページに表示する広告は3枚以内に収めたいところです。

そこで記事ページを開いている状態ではサイドバーの広告が表示されないようにしました。

design.syofuso.com

こちらのページを参考にしました。CSSに以下のソースを入力します。

/* サイドバーの広告を記事ページでは非表示 */
.page-entry .hatena-module.hatena-module-html {
 display: none;
}

サイドバーのHTMLモジュールを使って広告を表示しますので、記事ページ(page-entry)ではそのモジュールを非表示にするというコードです。

記事ページに移るとトップページではあった広告が非表示になって、その下にあったプロフィールのモジュールが繰り上がって表示されています。

ただし、サイドバーにHTMLモジュールが他にもある場合はそれらも表示されなくなりますので注意です。

スマホ用ページのブログタイトル下にレスポンシブ広告

スマホ用ページについても最初の見出しの上にレクタングル広告を表示する設定しました。

Google AdSense 成功の法則 57

Google AdSense 成功の法則 57

そして昔Kindleで買った『Google AdSense 成功の法則 57』を読んでいたら、スマホページの広告配置の例として、

  • 記事上(ラージモバイルバナー)
  • 記事中(レクタングル)
  • 記事下(レクタングル)

が良いとのことだったので従うことにしました。

ただ、ラージモバイルバナーを設置すると僕のiPhoneだと微妙に横幅が切れるんですよね。レクタングルは自動的に横幅が調整されるみたいですが。

ez-net.jp

そういうわけでこのページを参考にして形を指定したレスポンシブ広告を設置することにしました。

生成したレスポンシブ広告のソースの「data-ad-format」の要素を変更します。

data-ad-format="horizontal"

これで画面幅に合わせた横長の広告が表示されるようになります。

スマホ用ページの余計なパーツを削除

スマホ用ページのフッターって余計なパーツが多いですよね。

www.ksmemo.com

このページを参考にしてプロフィール、人気記事、検索窓だけを残して余計なパーツを非表示にしました。

代わりにカテゴリーリストを設置

余計なパーツがある割に必要なパーツが全然ありません。

そこで内部リンク強化の為にカテゴリーを挿入しました。

と言ってもフッターに手打ちでリストタグを入れて作ったショボいものですが。

見出しについては他と統一すべく以下の形で入力します。

<div class="hatena-module-title">カテゴリー</div>

できれば関連記事を挿入したかったのですが、外部のツールを使わないといけないっぽいのでやってません。

どうしても欲しくなったらスマホ用ページで足掻かずにレスポンシブデザインで表示すると思います。

その他細かい変更点

広告に関しては以上です。

他にもちょこちょこっとデザイン面で変更点がありますので書き留めておきます。

記事下にフォローボタンを設置

かつてシェアボタンは設置しましたがフォローボタンがないな〜と思ってました。

design.syofuso.com

こちらのフォローボタンを使用しました。はてなの読者登録、Twitter、Feedlyの3つです。

アイキャッチ画像も自動で引っ張ってきてくれるのは良いですね。

目次のデザイン変更

www.oyasumi-seijin.com

実は目次も少しだけいじってます。デフォルトとほぼ同じ仕様ですが、こちらのページを参考に微妙ながらも自分好みにしました。

/* 目次のデザイン */
.table-of-contents:before{
    content: "目次";
    font-size: 120%;
    font-weight: bold;
}

ul.table-of-contents {
 background: #eeeeee;
 max-width: 720px;
 margin: 0px 0px 30px 0px;
 padding: 18px 18px;
 list-style-type: decimal;
 list-style-position: inside;
 font-size: 100%;
 line-height: 2.0;
 border: 1px solid #e4e4e4;
}

グローバルメニュー見直し

グローバルメニューもいろいろいじってはいるのですが、主要なカテゴリーを並べることにしました。

ちょっと前までは「カテゴリー」からドロップダウンで全カテゴリーが出るようにしていましたが、横幅が狭いとドロップダウンが表示されないということに気付いて今の仕様にしました。

それに加えて「デジカメとスナップ写真」と「ジャズギター」についてはドロップダウンで使用機材の紹介記事が出るようにしました。

たぶん気になる人が多い記事ですから、ここを入り口にして来てもらえると嬉しいです。

アイキャッチボツ写真の取り扱いについて

これはこのブログ特有のデザイン、というかルールなのですが、アイキャッチボツ写真の取り扱いについてです。

写真が無い記事のアイキャッチ画像として、スナップ撮影に行った際のボツ写真をアップしていました。

冒頭はその写真の解説から始めていましたが、そんなに書く内容が無いんですよね。

さらに冒頭がその写真の解説で埋まるのがちょっと不都合です。記事一覧とか見ると「今日のアイキャッチボツ写真は〜」みたいな書き出しばかり並びます。

それが記事内容と関係するならまだしも、無関係ですからね。あまりよろしくなさそうです。

かと言って写真の解説を全部省略しては少しおもしろくありません。そこで画像のTitle要素にて簡潔な解説を入れていこうと思います。

[f:id:shimehitsu14:20170525204949j:plain:title=奥が深い雑居ビル:alt=]

こんな感じで入力しています。

パソコンだとマウスポインタを重ねるとこういう感じに表示されます。

スマホやタブレットならタップ長押しで表示されます(iPhoneやiPadなら。他の端末はわかりません)

正規の使い方ではないと思うんですが、こういう隠し要素的な楽しみ方で今後はやっていこうと思います。過去記事についても修正を加えていくつもりです。

ちょっとデザインがごちゃついてきたかな?

ブログが全体的に充実してきたような気がします。

その一方でごちゃついてきたという印象も否めません。表示速度が遅かったりデザインが乱れないかが心配です。

またどこかで見直しが必要かと思いますが、しばらくこれで様子見ですね。