MovableTypeで、PC用ページと携帯用ページを同時に作成する方法はすでにWEB2Laboサイトで公開されており、私のサイトでもこの方法で両方同時に作成されています。このやり方については、すでに書きましたが、アフィリエイトタグではPC用タグと携帯用タグが別々になっていることがまだ多く、両用できるのは楽天アフィリエイトタグしかまだないようです。
ブログ記事/ウェブページで<mt:if>タグを使用して切り替える
MT4.1以降/MTOSでは、ブログ記事/ウェブページで<mt:if>タグが使用できるようになったので、PCサイト用と携帯サイト用で切り替えて使うのが簡単にできる方法です。
このためには、<mt:setVar>での設定がブログ記事テンプレート/ウェブページテンプレートで行われている必要があります。
小粋空間テンプレートセットならすでに行われているので改めて記述する必要はありません。
デフォルトテンプレートでは設定がされていないので行う必要があります。そのためには、ブログ記事/ウェブページテンプレートに以下のようなタグを先頭部分に記述しておきます。
| <mt:setVar name="mediatype" value="PC"> |
携帯用ブログ記事/ウェブページにはやはり先頭に以下のようなタグを埋め込みます。
| <mt:setVar name="mediatype" value="mobile"> |
<mt:if>タグを記事中で使えるようにする
<mt:if>タグを使えるようにするには、mtevalタグをテンプレート内に記述する必要があります。
WEB2Laboで配布している携帯用テンプレートセットのうち、携帯用ブログ記事/ウェブページでは
|
<$MTEntryBody regex="reg0 reg1 reg2 reg3 reg4" zenkana="1" $> <$MTEntryMore regex="reg0 reg1 reg2 reg3 reg4" zenkana="1" $> |
となっていますが、
|
<$MTEntryBody regex="reg0 reg1 reg2 reg3 reg4" mteval="1" zenkana="1" $> <$MTEntryMore regex="reg0 reg1 reg2 reg3 reg4" mteval="1" zenkana="1" $> |
というように赤文字の部分を追加します。
小粋空間テンプレートでは、テンプレートモジュールのブログ記事の詳細/ウェブページの詳細の訂正をします。赤文字の部分を追記します。
ブログ記事の詳細
|
<mt:if tag="EntryBody"> <div class="entry-body"><mt:entryBody mteval="1"/></div> </mt:if> <mt:if tag="EntryMore"> <div class="entry-more"><mt:entryMore mteval="1"/></div> </mt:if> |
ウェブページの詳細
|
<mt:if tag="PageBody"> <div class="entry-body"><mt:pageBody mteval="1"/></div> </mt:if> <mt:if tag="PageMore"> <div class="entry-more"><mt:pageMore mteval="1"/></div> |
記事の記述方法
ブログ記事作成/ウェブページ作成の時、PC用タグと携帯用タグの切り替え方は、以下のようになります。
PCサイトでパソコンと表示されるが携帯サイトでは表示されない例
（小粋空間テンプレートセットを使用）
|
<mt:if name="body_onload" eq="mtEntryOnLoad()"> <a href="http://www.makkynx.com/transm/">パソコン</a> </mt:if> |
携帯サイトで携帯電話と表示されるがPCサイトでは表示されない例
|
<mt:if name="mediatype" eq="mobile"> 携帯電話 </mt:if> |
タグを記述するのは面倒に感じるかもしれませんがPCサイトと携帯サイトを別々に作るより手間がなくしかも簡単にできる切り替え方といえます。
切り替え用プラグイン
WEB２的Laboで、プラグインを使って切り替える方法を運営者のかん吉氏が公開されていますので、こちらもご覧ください。
なお、私のところでは何故か動作できなかったので、タグを使って切り替える方法を使うことにしました。この方法の原型は、MovableTypePC携帯カスタマイズの記事を参照させていただきました。ありがとうございます。
