らい帳
プログラミングの知識は不要で自分のブログが簡単に作成できる無料ソフト「らい帳」の使い方を紹介しています。

googleアドセンスの広告を設定して収益化する

ブログにgoogleアドセンスの広告を表示して収益化する方法を紹介します。

無料ブログなどのサービスでは、広告を貼ることができない場合が多いですが、らい帳で作成したブログは、広告やアフィリエイトなどを自由に設定することができます。

googleアドセンスの広告を表示するには実際にサイト(ブログ)を公開して、googleに広告を貼ってもよいかどうか申請し、googleの審査が通った場合のみ広告を貼ることができます。

本ページはgoogleの審査が完了し、広告のコードを取得できる状態の人に向けた記事です。

テンプレートの作成

まずは、googleアドセンスの広告を表示するためのファイルを新規に作成します。

以下の場所に作成します。

  • templates
    • partials
      • ad.njk ←新規作成
    • post.njk
    • top.njk
    • (その他)

後述するパスの設定が正しくできれば、ファイルの作成場所はどこでも問題ありませんが、よくわからない場合は以下のサンプルにしたがって作成することをおすすめします。

ファイルの中身は以下のようにします。2行目にはgoogleアドセンスのページで取得した広告コードを貼り付けてください。

ad.njk
{% if config.isProduction %}
  取得した広告コードをここに貼り付ける
{% else %}
<div>
  google adsense広告スペーステスト
</div>
{% endif %}

広告は承認されたサイトでしか表示することができません。

そのため、本ソフトのプレビュー機能で広告を表示しないように、{% if config.isProduction %}の条件を指定しています。

config.isProductionはプレビュー画面ではfalse、記事生成のビルド時にはtrueがセットされます。

プレビューの場合は広告の代わりにgoogle adsense広告スペーステストの文言を表示するようにしています。

(上記テンプレートの記載内容の意味がわからない場合は、上記のコードをそのまま使用すれば問題ありません。)

テンプレートで以下の記載をすると、上記ファイルが読み込まれ、広告が表示されます。

{% include 'partials/ad.njk' %}

例えば、各記事のサイドメニューの一番上に、広告を表示させたい場合は以下のようにpost.njkのサイドメニューの設定箇所に今回の記載を追記します。

post.njk
{% block aside %}
  {% include 'partials/ad.njk' %}
  {% include 'widgets/latest.njk' %}
  {% include 'widgets/categories.njk' %}
  {% include 'widgets/tags.njk' %}
{% endblock %}

動作確認

テンプレートを修正したら、プレビューで記事のページを表示してみると、google adsense広告スペーステストの文言がサイドメニューに表示されることが確認できます。

また、サイト生成でビルドしたファイルを公開すると、実際に広告が表示されることを確認できます。

アフィリエイトなどのリンクも同じ手順で表示できます。




Related Posts

  • 作成したサイトをレンタルサーバーにアップロードする

    サイト生成で生成したファイルをレンタルサーバーにアップロードして世の中に公開する方法を紹介します。ここではエックスサーバーというレンタルサーバーを例にして説明します。エックスサーバーは10日間の無料お...


  • おすすめ記事一覧などの独自のメニューを作成する

    本ソフトには「関連記事一覧」や「最新記事一覧」といった記事の一覧を表示する機能があります。関連記事や最新記事は本ソフトが自動的に設定しますが、「おすすめ記事一覧」や「人気記事一覧」など、独自のメニュー...


  • らい帳の基本的な使い方

    らい帳の基本的な使い方を紹介します。ダウンロードしたexeファイルをダブルクリックして起動するとインストーラが起動され自動でインストールされます。アンインストールしたい場合は他のソフトと同様、「プログ...


  • 画像を管理して簡単に表示する方法

    ブログを書いていいて、面倒なのが画像の管理です。らい帳では自分のパソコンに入っているjpgやpng形式の画像ファイルを簡単に管理してブログで表示できます。記事の作成画面で、以下の画像エリアが表示されて...


  • テーブル(表)を表現する

    テーブル(表)形式で表現したい場合は、以下のようにします。:の位置で文字寄せを指定できます。先頭に:XXXを記載すると、XXXは表題になります。


  • プログラミングコードをシンタックスハイライトで表示する

    プログラミングのコードを表現したい場合はコードの文字列を`(バッククウォート)で囲うと、囲われた部分の文字列はコードとして表現されます。変数に値を代入するにはa = 3;のようにします。複数行に渡るプ...


  • 文献などの引用を表現する

    文献などを引用を示すための表現をする場合は文章の先頭にを記載します。複数行に渡る文章の引用を示す場合はそれぞれの行の先頭にを記載します。Markdown(マークダウン)は、文書を記述するための軽量マー...


  • 数式をLATEXで表現する

    $$で囲うとLATEXの形式で数式を表現できます。$だと、文章中に数式を表現できます。数式の変換ライブラリはkatexを使用しています。詳しい使い方は公式ページをご確認ください。半径 rrr の円の面...


  • 箇条書きのリストを表示する

    箇条書きリストを表現するにはリストの各項目の先頭に*または-または+を記載します。+を使用した場合は、リストの先頭の・が表示されませんが、その代わりにアイコンリストとしてフォルダ構成などを表現できます...


  • 他のページヘのリンクを作成する

    別ページヘのリンクを作成するには[リンクテキスト](リンク先URL) ツールチップの形式で指定します。同一サイト内へのリンクは同じタブ、外部サイトへのリンクは新しいタブで開きます。wikipedia同...