Ghost CMSで広告を管理

2023年8月22日

6 分で読めます

セルフホストをしてもいいですが、CDNによるコンテンツ配信の高速化などにかかる費用を考えるとGhostのプランアップグレードをするのが安上がりになると思われます。また、Google AdSenseを利用する上でAds.txtをアップロードする方がいいとされています。このアップロードをするのにもテーマのアップロード機能を利用する必要があるため、Google AdSenseを利用してブログ運営の費用を回収したいと考えているような小さなブログであってもCreatorプランがおすすめです。有料会員のメンバーシップ収益で費用のすべてを回収したいのであれば、つまりGoogle AdSenseなどの広告に頼らないのであればStarterプランでもいいかもしれません。

Google AdSenseに移動し、広告、サイトごと、コードを取得から自動広告のコードを入手してください。

自動広告のコードは以下のようなコードです。個人情報保護のためsrc=#としています。

<script async src="#"
     crossorigin="anonymous"></script>

テーマをダウンロードする

あなたのGhost Adminサイトにログインし、Settings、Design、Change Themeへと移動します。Advancedをクリックし、…ボタンをクリックするとDownloadボタンが表示されますので、現在利用しているテーマ、あるいは利用したいテーマをダウンロードしてください。

テーマを解凍する

テーマをダウンロードしたら、好きな場所で解凍してください。作業しやすいフォルダーがいいと思います。

`default.hbs`を見つける

テーマをダウンロードし解凍したら、次はdefault.hbsというファイルを見つけます。

ファイルを見つけられたら、開いて次のステップに進んでください。

記述を探す

ファイルを見つけられたら、<head>...</head>という記述を探します。

たとえば初期のテーマであるcasperでは以下のような記述です。

<head>

    {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
    <title>{{meta_title}}</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    {{!-- Preload scripts --}}
    <link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
    <link rel="preload" as="script" href="{{asset "built/casper.js"}}" />

    {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
    this will take care of caching and cache-busting automatically --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />

    {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
    it should always be the last tag before the closing head tag --}}
    {{ghost_head}} 

</head>

別のテーマであるeditionでは以下のように記述されているはずです。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{meta_title}}</title>

    <link rel="stylesheet" href="{{asset "built/screen.css"}}">

    {{ghost_head}}
</head>

結局のとこら、どのテーマであれ<head>...</head>と言う記述を探す必要があります。

さて、<head>タグ（<head>...</head>）のことです）を見つけることができたら、その下に広告を挿入するコードを記述していきます。つまり、以下の場所に記述します。記述する場所を、

<!-- WRITE GOOGLE ADSENSE CODE HERE -->
	
<!-- GOOGLE ADSENSE CODE ENDS HERE -->

と書くことにします。

Casper

<head>

    {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
    <title>{{meta_title}}</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    {{!-- Preload scripts --}}
    <link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
    <link rel="preload" as="script" href="{{asset "built/casper.js"}}" />

    {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
    this will take care of caching and cache-busting automatically --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />

    {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
    it should always be the last tag before the closing head tag --}}
    {{ghost_head}} 
    
	<!-- WRITE GOOGLE ADSENSE CODE HERE -->
	
	<!-- GOOGLE ADSENSE CODE ENDS HERE -->
</head>

Edition

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{meta_title}}</title>

    <link rel="stylesheet" href="{{asset "built/screen.css"}}">

    {{ghost_head}}
    
	<!-- WRITE GOOGLE ADSENSE CODE HERE -->
	
	<!-- GOOGLE ADSENSE CODE ENDS HERE -->
</head>

有料会員には広告を表示しない

<!-- WRITE YOUR GOOGLE ADSENSE CODE HERE -->
{{#unless @member.paid}}
	<script async src="#"
     crossorigin="anonymous"></script>
{{/unless}}
<!-- GOOGLE ADSENSE CODE ENDS HERE -->

会員には（つまり、無料会員と有料会員のどちらも）広告を表示しない

<!-- WRITE YOUR GOOGLE ADSENSE CODE HERE -->
{{#unless @member}}
	<script async src="#"
     crossorigin="anonymous"></script>
{{/unless}}
<!-- GOOGLE ADSENSE CODE ENDS HERE -->

テーマをzip圧縮する

default.hbsの編集ができましたら、テーマフォルダーをzip圧縮します。

テーマをアップロードする

あなたのGhost Adminサイトにログインし、Settings、Design、Change Themeへと移動します。Upload Themeをクリックし、あなたが先ほどのセクションで作ったzipファイルをアップロードします。

確認

サイトが正常に機能しているか確認してください。

以上で完成です。

おまけ: コードの解説

この記事で使用したコードは単純です。

{{#unless}}...{/unless}を利用した条件式の否定を利用した条件分岐です。

さらに詳しい情報は以下のサイトなどを参考にしてください。

Built-in Helpers | Handlebars

Handlebars

目次

Google AdSenseから自動広告のコードを入手する