MTOSサイトで携帯対応まとめ(3)~テンプレート作成

前回の続きと行きたいのですが、phpファイルを作る前に、用意する携帯用テンプレートについて触れておこうと思います。

基本的に、各メインページはすべて、インデックステンプレートとして「携帯用メイン」というテンプレートを作り、出力ファイルを「m/index.php」としました。

その中で、すべてに共通するモジュールとして「携帯用ヘッダー」「携帯用フッター」、「携帯用バナーヘッダー」「携帯用ナビゲーション」の4つを用意しました。

「携帯用ヘッダー」にはDOCTYPE宣言およびhtmlのheader部分を入れました。

その中の「title」タグは、各テンプレートの頭に入れたテンプレートの名前によって変化するよう、条件分岐をしてあります。

ちなみにこんな感じ。

<title>
<mt:if name=”m-webmain”><mt:ignore> ウェブサイトメイン</mt:ignore>
<$mt:WebsiteName encode_html=”1″$>
<mt:elseif name=”m-blogmain”><mt:ignore> 各ブログメイン</mt:ignore>
<$mt:BlogName encode_html=”1″$> – <mt:BlogParentWebsite><$mt:WebsiteName encode_html=”1″$></mt:BlogParentWebsite>
<mt:elseif name=”entry-archive”><mt:ignore> 各ブログエントリー</mt:ignore>

<$mt:EntryTitle$> – <$mt:BlogName encode_html=”1″$> – <mt:BlogParentWebsite><$mt:WebsiteName encode_html=”1″$></mt:BlogParentWebsite>
<mt:elseif name=”page-archive”><mt:ignore> 各ウェブページ</mt:ignore>
<$mt:PageTitle$> – <$mt:WebsiteName encode_html=”1″$>
<mt:else>
</mt:if>
</title>

そしてバナーヘッダーには<body>タグの開始からタイトル画像の指定、サイトメインのみ、サイトの説明文を入れる、という内容を。

ナビゲーションはPCとは違い、頭の方に入れるとそれだけで画面が塞がってしまうので、内容の後に表示されるようにしました。トップから各ブログのメインページおよびウェブページへのリンクを入れてあります。

ここで携帯ならではの絵文字を使ったアクセスキーを入れたのですが、この部分はまた改めて書きます。結構ややこしいので。

フッターには<hr />およびコピーライト表示を。

そして、バナーヘッダーとナビゲーションの間に、各ページのコンテンツを入れていきます。

アーカイブページの扱いについては長くなったので次回に回します。ただ、内容構成の仕方はメインと同じです。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt
  1. コメントはまだありません。

  1. トラックバックはまだありません。