TopMovable Typeカスタマイズその他 > 2008年1月
2008年1月 2日

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

January 2,2008 1:23 AM
Tag:[, , , ]
Permalink

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 {
  :
}
Comments [4] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3