StackEditでブログ公開時にAdSenseコードを埋め込む方法

StackEditで記事の本文中に広告を埋め込みたい

StackEdit は、ブラウザ上で動作するMarkdownエディタで、無料で使えて超便利です。
ブラウザアプリでありながら、オフラインでも動作するため、ネットがない環境でも文章が書け、Publish（公開）機能を使って、WordPressやBloggerなどのブログサービスへ簡単に記事を投稿できます。

この記事では、StackEditでWordPressやBloggerに記事を投稿する時に、記事の中にGoogle AdSenseの広告コードを埋め込む方法を解説します。

スポンサーリンク

StackEditのヘルパー（helper）を使えばできる

AdSenseの広告コードをStackEditに直接貼り付けても、公開時にコードが削除されるため、StackEditのヘルパー（helper）機能を使って、公開時にMarkdown文章内のショートコードを、AdSenseの広告コードに変換します。

今回は、広告コード変換用のショートコードを[ads]とし、Markdown文書の`

テンプレートにヘルパー（helper）を登録

「MENU」→ 「Templates」からテンプレートの設定を開き、ブログ公開用のTemplateを以下のように編集していきます。

Valueを編集

元々のValueの内容を、{{#transformAdSense}}タグで囲みます。

{{#transformAdSense}}{{{files.0.content.html}}}{{/transformAdSense}}

ヘルパーの登録

「AddHelpers」をクリックし、コード欄に次のJavaScriptコードを設定します。
広告コードの内容は、アドセンスのサイトで作成した広告コードに合わせて編集してください。

【Value欄に入力するコード】

Handlebars.registerHelper('transformAdSense', function (options) {
  var result = options.fn(this);
  
  // アドセンスのサイトで作成したコードを設定
  var code = '<small>スポンサーリンク</small>' +
	'<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>' +
	'<ins class="adsbygoogle"' +
	'     style="display:block; text-align:center;"' +
	'     data-ad-layout="in-article"' +
	'     data-ad-format="fluid"' +
	'     data-ad-client="ca-pub-xxxxxxxxxxx"' +
	'     data-ad-slot="xxxxxxxxxx"></ins>' +
	'<script>' +
	'     (adsbygoogle = window.adsbygoogle || []).push({});' +
	'</script>';
	
  // ショートコード[ads]を、アドバイスの広告コードに置換
  return new Handlebars.SafeString(
    result.replace(/\[ads\]/gi, code )
  );
});

Markdown文書内にアドセンス用ショートコードを挿入

テンプレートの登録ができたら、Markdown文章中で広告を表示した位置に、アドセンス 用のショートコードを挿入します。

以下は、見出し１と２の間にアドセンス 広告を挿入する時のMarkdownです。

## 見出し１

本文本文本文本文本文本文本文本文本文本文本文本文

[ads]

## 見出し２

本文本文本文本文本文本文本文本文本文本文本文本文

公開

あとは、通常の手順でブログを公開すれば、ショートコードの[ads]が、アドセンス用の広告コードに変換され、指定した位置に広告が表示されていると思います。

まとめ

StackEditで、MarkdownにAdSenseコードを埋め込むショートコードの設定方法を解説してきました。

今回紹介した方法を使えば、記事の中の好きな位置にAdSense広告を表示できます。