hexo に google adsense 設置&バナー編集
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
以下の三行を広告を載せたい場所にコピペします。
トップページに置く場合、vi themes/hogehoge/layout/layout.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<%- partial('_partial/head') %>
<body>
<div id="container">
<div id="wrap">
<%- partial('_partial/header', null, {cache: !config.relative_link}) %>
<!-- ad start -->
<!-- ad end -->
<div class="outer">
<section id="main"><%- body %></section>
<% } %>
</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
1
2
3
4
5
6
7
8
9
10
|
<% if (site.posts.length){ %>
<div class="widget-wrap">
<div class="widget">
<!-- ad start -->
<!-- ad end -->
</div>
</div>
<% } %>
|
step2
ウィジェットの項目に sponsor を追加します。vi themes/hogehoge/_config.yml
1
2
3
4
5
6
7
8
9
10
11
|
(省略)
sidebar: right
widgets:
- category
- tag
- tagcloud
- archive
- recent_posts
- links
- sponsor
(省略)
|
完了です。
あとは、ejs ファイルにこの三行を貼ると、だいたい思った場所に広告が乗ります(テキトーですみません)。
バナーの宇宙的画像を変更する
美しい画像ですが、ちょっと変更してみます。Landscape-plus というサイトを参考にして、背景の色とタイトルバックの色をそれぞれ指定することにしました。
https://github.com/xiangming/landscape-plus
step1
画像指定をコメントアウト
vi themes/hogehoge/source/css/_partial/header.styl
1
2
3
4
5
6
7
8
9
10
11
|
(省略)
// background: url(banner-url) center #000
background:
(省略)
(省略)
background:
padding: 5px 10px // 間隔
(省略)
|
ちなみにここで 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).
とのこと。こちらはうまく反映されました。めでたし
Cloudup が便利そう
Cloudup というサービスが便利そう
Markdown にも慣れない今日このごろですが、Hexo で画像をスムーズに貼るにはどうしたらいいのか考えていて、この記事を参考にさせていただき Cloudup を利用しはじめました。
キャプチャを貼りたいなと思う場面で一番直感的だと思ったからです。
ざっくりと使用感ご紹介
サインアップ
Cloudup へいってサインアップします。設定することは特にないです。
ログイン後
こんな画面が最初に待ち構えています。
アップロード
ここにアップしたい画像をドラッグアンドドロップするか、クリップボードにコピーしてある場合はペーストをすると即座にアップロードが始まります。
直リンク取得
右上の MORE > DIRECT URL をクリックすると、画像への .png リンクが得られますし、そのままの URL バーのアドレスもそのままシェアできます。
Markdown ですと下のような記述で完了です。
デスクトップアプリの利用
ブラウザだけでなくデスクトップアプリを入れると、トップのメニューバーに Cloudup が常駐して、Paste your clipboard を選択すると即座にアップロードされます
デメリット
Github 上で完結させたい場合は、違う方法がいいという意見もあるようです。Markdownで画像を表示する · GitHub
その他
Wordpress.com の親会社というものがあることすら知りませんでしたが、Automattic 社が Cloudup を買収していたようです。
Automatticがファイル共有サービスCloudupを買収, WordPressに共同編集機能が加わる | TechCrunch Japan
よくわからないけどすごく楽しそうな Cloudup 公式 Youtube
サービスが継続するといいですね。
ちなみに類似サービスで Cloudapp なるものがあるようです。Mac 版デスクトップアプリの見た目も非常に近いです。