Hexo に Google adsense 設置&バナー編集

2017-01-14

Hexo のレイアウトを変えたりしました。
かっこいいな…! と思っていたテンプレートをうまく自分好みにカスタムする能力がなかったため、Landscape ベースで ejs ファイルを見よう見まねで編集しました。

google adsense バナー直下編

本当に置きたい場所に貼るだけなんだということに衝撃を受けました。
Google adsense の申請は完了している前提となります。

以下の2つを参考にさせていただきました。
【Hexo】Hexo环境下设置Google Adsense
HexoにGoogle Adsenseをセットアップする

step1

わかりやすくするためにアドセンスのコードを貼り付けるファイルを_custom_adというディレクトリ配下に置きます。
＊以下すべて hogehoge = テーマ名です。
mkdir theme/hogehoge/layout/_custome_ad
この中に、Google adsense の管理画面で生成したコードをそのまま貼り付けます。
vi themes/hogehoge/layout/_custom_ad/google_adsense.ejs

1 2	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> (以下略)

step2

以下の三行を広告を載せたい場所にコピペします。

1
2
3

<!-- ad start -->
<%- partial('_custom_ad/google_adsense') %>
<!-- ad end -->

トップページに置く場合、
vi themes/hogehoge/layout/layout.ejs

<%- partial('_partial/head') %>
<body>
  <div id="container">
    <div id="wrap">
      <%- partial('_partial/header', null, {cache: !config.relative_link}) %>
      <!-- ad start -->
      <%- partial('_custom_ad/google_adsense') %>
      <!-- ad end -->
      <div class="outer">
        <section id="main"><%- body %></section>
        <% if (theme.sidebar && theme.sidebar !== 'bottom'){ %>
          <%- partial('_partial/sidebar', null, {cache: !config.relative_link}) %>
        <% } %>
      </div>
      <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
    </div>
    <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
    <%- partial('_partial/after-footer') %>
  </div>
</body>
</html>

これで完了です。

google adsense 任意の場所編

そうすると、広告がトップのバナー直下に出ます。
さすがに Hexo のようなシンプルなブログを選んだのに広告がバナー下に出るのはおかしいだろうと思い、右カラムに表示します。

step1

themes/hogehoge/layout/_widget 配下に新たに ejs を置きます。
vi themes/landscape/layout/_widget/sponsor.ejs

<% if (site.posts.length){ %>
  <div class="widget-wrap">
    <h3 class="widget-title"><%= __('sponsor') %></h3>
    <div class="widget">
      <!-- ad start -->
      <%- partial('_custom_ad/google_adsense') %>
      <!-- ad end -->
    </div>
  </div>
<% } %>

step2

ウィジェットの項目に sponsor を追加します。
vi themes/hogehoge/_config.yml

(省略)
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts
- links
- sponsor
（省略）

完了です。

あとは、ejs ファイルにこの三行を貼ると、だいたい思った場所に広告が乗ります（テキトーですみません）。

1
2
3

<!-- ad start -->
<%- partial('_custom_ad/google_adsense') %>
<!-- ad end -->

バナーの宇宙的画像を変更する

美しい画像ですが、ちょっと変更してみます。Landscape-plus というサイトを参考にして、背景の色とタイトルバックの色をそれぞれ指定することにしました。
https://github.com/xiangming/landscape-plus

step1

画像指定をコメントアウト

vi themes/hogehoge/source/css/_partial/header.styl

（省略）
#banner
  //  background: url(banner-url) center #000
  background: #323232  // お好きな色の hex
（省略）
#logo
（省略）
  background: #e8b93a  // お好きな色の hex
  padding: 5px 10px // 間隔
	  border-radius: 5px // タイトルバックの四角形の角を丸く
（省略）

ちなみにここで banner-url となっている画像の元ネタは、下記にありますので、この画像を差し替えるとバナー画像が変えられます。　
vi themes/landscape-plus/source/css/_variables.styl

1
2
3

（省略）
banner-url = "images/banner.jpg"
（省略）

編集を反映させるときの Tips

画像周りを変更すると、hexo gen -d した後の反映が遅いです。

試したこと1

rm db.json
参考
Hexoで記事生成時に消したはずの情報で生成される
ー＞しばらく待つものの反映されず・・・

試したこと2

hexo clean
Hexo commands
Cleans the cache file (db.json) and generated files (public).
とのこと。こちらはうまく反映されました。めでたし