目次
本稿では、個人情報保護の観点からsrc=#
と表記しますが、実際の環境では各自が読み替えてください。
AdSenseからAMP自動広告コードを取得する
AMP自動広告を挿入するためのコードを取得してください。
amp.hbs
を見つける・作成する
テーマをダウンロードしたら、テーマのファイルにamp.hbs
があるか探します。多くのテーマではこのファイルは見つからないと思います。
以下に書いてあるように、Ghostのテンプレートをカスタマイズをすることが可能ですので、自分でamp.hbs
を作成することが可能です。
Customise the template with your own styles
AMP in Ghost can be styled to suit your brand and theme too! Since the Ghost theme layer is entirely customisable, that means you can also customise the way your AMP pages are rendered by including a custom amp.hbs
template file in your theme.
To access any post rendered using the amp.hbs
template on your site, add /amp/
to the end of any post URL on your publication. The parent post also has a canonical link to it’s AMP equivalent.
本稿ではGitHubのページからデフォルトのamp.hbs
を利用することにします。
ドキュメントから引用すると、テンプレートの構造は次のとおりです。
.
├── /assets
| └── /css
| ├── screen.css
| ├── /fonts
| ├── /images
| ├── /js
├── default.hbs
├── index.hbs [required]
└── post.hbs [required]
└── amp.hbs [optional]
└── package.json [required]
amp.hbs
ファイルを編集し、AMP自動広告コードを挿入する
Google AdSenseでは以下のように導入の解説がされています。
ステップ 1: スクリプトをコピーして、サイトの タグの間に貼り付けます
AMP サイトの HTML の head タグの間に、このコードを一度配置してください。このスクリプトによって、関連する amp-auto-ads ライブラリが読み込まれます。
では、説明された通りに導入しましょう。広告を読み込むコードは<head>...</head>
の中では一番遅くていい処理だと思います。そのため、私は</head>
の直前に書き込みます。
ステップ 2: AMP 自動広告コードをコピーして、ページの タグのすぐ後に貼り付けます。
このコードをコピーして、広告を表示するページの タグのすぐ後に貼り付けます。なお、コードを貼り付けた場所に広告が表示されるわけではありません
私が利用しているデフォルトのamp.hbs
では<head>...</head>
の直後に<body>...</body>
と続きます。つまり、</head>
の前後にコードを記述すればいいだけです。
では、コードを実際に書いていきましょう。
大丈夫です。コピーペーストをするだけなので簡単です。
以下は編集前のコードです。
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
<body class="amp-template">
{{#post}}
<header class="page-header">
...
以下は編集後のコードです(これがコードの完成形です)。
次の章で示します。
完成形
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
変更点の確認
Step 1では以下のようなコードを取得できます。
<script async custom-element="amp-auto-ads"
src="#">
</script>
このコードを書き込んだものはこのようになります。
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#post}}
<header class="page-header">
...
Step 2では以下のようなコードを取得できます。
<amp-auto-ads type="adsense"
data-ad-client="#">
</amp-auto-ads>
Step 2で取得したコードも書き込んだ最終的なコードは次のようになります。
これは完成形のコードと完全に一致します。
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
有料会員には広告を表示しない
これは、今まで提示してきた完成版のコードと全く同じです。
確認のために再掲しています。
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#unless @member.paid}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
会員には(つまり、無料会員と有料会員のどちらも)広告を表示しない
簡潔に言えば、{{#unless @member.paid}}
を使わないで、代わりに{{/unless @member}}
を利用するだけです。
...
</style>
{{!-- AMP Boilerplate --}}
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
{{amp_components}}
</head>
{{#unless @member}}
{{!-- Free member, or not logged in (not a member) --}}
<script async custom-element="amp-auto-ads"
src="#">
</script>
{{/unless}}
<body class="amp-template">
{{#unless @member}}
{{!-- Free member, or not logged in (not a member) --}}
<amp-auto-ads type="adsense"
data-ad-client="#"">
</amp-auto-ads>
{{/unless}}
{{#post}}
<header class="page-header">
...
テーマをzip圧縮する
amp.hbs
の編集ができましたら、テーマフォルダーをzip
圧縮します。
テーマをアップロードする
あなたのGhost Adminサイトにログインし、Settings
、Design
、Change Theme
へと移動します。Upload Theme
をクリックし、あなたが先ほどのセクションで作ったzip
ファイルをアップロードします。
確認
サイトが正常に機能しているか確認してください。
以上で完成です。