小粋空間  -  a cheap joke and a play on words site

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

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

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

１．日付の前に表示する

表示位置のイメージ

ブログ管理画面より「テンプレート」→「デザイン」→「テンプレートモジュール」→「ブログ記事の概要」を開き、青色のタグを追加します。[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>

２．タイトルの前に表示する

表示位置のイメージ

ブログ管理画面より「テンプレート」→「デザイン」→「テンプレートモジュール」→「ブログ記事の概要」を開き、青色のタグを追加します。[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>

３．タイトルと本文の間に表示する

表示位置のイメージ

ブログ管理画面より「テンプレート」→「デザイン」→「テンプレートモジュール」→「ブログ記事の概要」を開き、青色のタグを追加します。[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>

４．仕組み

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

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

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

５．他のアーカイブでも表示する

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

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>

に変更してください。

６．CSS

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

div.adsense {
　　：
}

<MTEntriesHeader>
　　　　：
</MTEntriesHeader>

<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">
　　　：