トップページの最新記事に Google Adsense を貼り付ける

トップページの最新記事に Google Adsense を貼り付ける

Posted at January 2,2008 1:23 AM
Tag:[Adsense, Customize, Entry, MovableType]

Movable Type 4 で、トップページの最新記事に Google Adsense を貼り付けるカスタマイズです。昨年よりご質問を頂いていたもので、本エントリーにて紹介致します。

ここでは公開テンプレートをサンプルに紹介しますが、デフォルトテンプレートでもほぼ同じです。

1.日付の前に表示する

表示位置のイメージ

日付の前に表示するイメージ

ブログ管理画面より「テンプレート」→「デザイン」→「テンプレートモジュール」→「ブログ記事の概要」を開き、青色のタグを追加します。[Google Adsenseのコード] の部分にご自身の Google Adsense のコードを貼り付けてください。


<mt:if name="main_template">
<MTEntriesHeader>
   <div class="adsense">
   [Google Adsenseのコード]
   </div>
</MTEntriesHeader>
</mt:if>
 
<MTDateHeader>
<p class="date"><$MTEntryDate format="%x"$></p>
</MTDateHeader>
 
<div class="entry">
 
   <h2 id="a<$MTEntryID pad="1"$>" class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></h2>
   <div class="entry-content clearfix">
      <MTIfNonEmpty tag="EntryBody">
         <$MTEntryBody$>
      </MTIfNonEmpty>
      <MTIfNonEmpty tag="EntryMore">
         <p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
      </MTIfNonEmpty>
 
      <MTEntryIfTagged>
         <$MTInclude module="タグ"$>
      </MTEntryIfTagged>
 
   </div>
   <$MTInclude module="ブログ記事のメタデータ"$>
</div>

2.タイトルの前に表示する

表示位置のイメージ

タイトルの前に表示するイメージ

ブログ管理画面より「テンプレート」→「デザイン」→「テンプレートモジュール」→「ブログ記事の概要」を開き、青色のタグを追加します。[Google Adsenseのコード] の部分にご自身の Google Adsense のコードを貼り付けてください。

<MTDateHeader>
<p class="date"><$MTEntryDate format="%x"$></p>
</MTDateHeader>
 
<div class="entry">
   <mt:if name="main_template">
   <MTEntriesHeader>
      <div class="adsense">
      [Google Adsenseのコード]
      </div>
   </MTEntriesHeader>
   </mt:if>
   <h2 id="a<$MTEntryID pad="1"$>" class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></h2>
   <div class="entry-content clearfix">
      <MTIfNonEmpty tag="EntryBody">
         <$MTEntryBody$>
      </MTIfNonEmpty>
      <MTIfNonEmpty tag="EntryMore">
         <p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
      </MTIfNonEmpty>
 
      <MTEntryIfTagged>
         <$MTInclude module="タグ"$>
      </MTEntryIfTagged>
 
   </div>
   <$MTInclude module="ブログ記事のメタデータ"$>
</div>

3.タイトルと本文の間に表示する

表示位置のイメージ

タイトルと本文の間に表示するイメージ

ブログ管理画面より「テンプレート」→「デザイン」→「テンプレートモジュール」→「ブログ記事の概要」を開き、青色のタグを追加します。[Google Adsenseのコード] の部分にご自身の Google Adsense のコードを貼り付けてください。

<MTDateHeader>
<p class="date"><$MTEntryDate format="%x"$></p>
</MTDateHeader>
 
<div class="entry">
 
   <h2 id="a<$MTEntryID pad="1"$>" class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></h2>
   <div class="entry-content clearfix">
      <mt:if name="main_template">
      <MTEntriesHeader>
         <div class="adsense">
         [Google Adsenseのコード]
         </div>
      </MTEntriesHeader>
      </mt:if>
      <MTIfNonEmpty tag="EntryBody">
         <$MTEntryBody$>
      </MTIfNonEmpty>
      <MTIfNonEmpty tag="EntryMore">
         <p class="entry-more"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle encode_html="1"$>"</a></p>
      </MTIfNonEmpty>
 
      <MTEntryIfTagged>
         <$MTInclude module="タグ"$>
      </MTEntryIfTagged>
 
   </div>
   <$MTInclude module="ブログ記事のメタデータ"$>
</div>

4.仕組み

このカスタマイズでは MTIf タグと MTEntriesHeader タグを用いて制御しています。

MTIf タグでは、メインページテンプレートでのみブロック内を実行する制御を行っています。

MTEntriesHeader タグは、MTEntries ブロックタグ内で使用するためのブロックタグ(コンディショナルタグ)で、ブログ記事をリスト表示する初回のみ、このタグでコンテナされた内容を実行すブロックタグです。

5.他のアーカイブでも表示する

ブログ記事の概要は月別アーカイブやカテゴリアーカイブでも使われるのですが、前項の説明の通り、トップページ以外では表示されないように制御しています。

Google Adsense を月別アーカイブやカテゴリアーカイブでも表示したい場合は、

<mt:if name="main_template">
<MTEntriesHeader>
   <div class="adsense">
   [Google Adsenseのコード]
   </div>
</MTEntriesHeader>
</mt:if>

の MTIf タグを削除して、

<MTEntriesHeader>
   <div class="adsense">
   [Google Adsenseのコード]
   </div>
</MTEntriesHeader>

に変更してください。

6.CSS

時間の都合上、表示位置の微調整まで書ききれていないため、各自で行ってください。微調整する際は、スタイルシートに下記のセレクタを追加して、点線の部分に任意のプロパティを記述してください。

div.adsense {
  :
}
関連記事
zenback
人気エントリー
トラックバックURL


コメント

いつもカスタマイズ等でお世話になっています。
今回もAdsenseで検索をしたらこちらに掲載されていたので参考にしました。

一つ質問があります。インデックスに表示できたのですが、記事5件表示されるうち、最新1件しかAdsenseは表示されません。
それと個別記事には掲載されません。それはアーカイブに設定をしたほうがいいということでしょうか。
いまいちMT4のテンプレート設定を把握できていなくて、試行錯誤しております。

[1] Posted by rix : January 27, 2008 2:45 PM

>rixさん
こんにちは。
ご質問の件ですが、最新の1件以外にも表示させる場合は、記事のリストにある

<MTEntriesHeader>
    :
</MTEntriesHeader>

という2行を取り払ってください。これが最新1件に表示させるためのテンプレートタグです。ただし、Adsense では、1ページ内の同じ種類の広告表示数に制限がありますので、ご注意ください。

また個別記事に表示する場合は、「テンプレート」→「デザイン」→「テンプレートモジュール」→「ブログ記事の詳細」を開き、青色の部分を追加してください。

<div id="entry-<$MTEntryID$>" class="entry-asset asset hentry">
    <div class="asset-header">
        <h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$></h1>
        <div class="adsense">
        [Google Adsenseのコード]
        </div>
        <$MTInclude module="ブログ記事のメタデータ"$>
    </div>
    <div class="asset-content entry-content">
<MTIfNonEmpty tag="EntryBody">
   :

または

<div id="entry-<$MTEntryID$>" class="entry-asset asset hentry">
    <div class="asset-header">
        <h1 id="page-title" class="asset-name entry-title"><$MTEntryTitle$></h1>
        <$MTInclude module="ブログ記事のメタデータ"$>
    </div>
    <div class="adsense">
    [Google Adsenseのコード]
    </div>
    <div class="asset-content entry-content">
<MTIfNonEmpty tag="EntryBody">
   :

それではよろしくお願い致します。

[2] Posted by yujiro logo : January 30, 2008 5:13 PM

*yujiroさん
個別記事なども細かく教えていただきありがとうございます。
以前はWordpressを使っていたのですが、5件トップで表示される記事のうち、
広告表示は3件まででした。なぜかなと思っていたのですが、制限があったのですね。
これから調べて、制限内で設定使用と思います。
ありがとうございました。

[3] Posted by rix : February 5, 2008 12:44 AM

>rixさん
こんばんは。
ご連絡ありがとうございました。
ではでは!

[4] Posted by yujiro logo : February 6, 2008 2:39 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)