タグ : テンプレート

MTOSサイトで携帯対応まとめ(4)~アーカイブテンプレート

前回から続いています。

さて、アーカイブページの設定についてです。

ブログにしてあるものについては、『必要項目をカスタムフィールドで用意』⇒『それらを呼び出して組み合わせるテンプレートを作成』⇒『同じ形式の記事ページが複数出来る』という形のため、テンプレートをPC用と携帯用の二種類用意し、どちらも基本同じ内容だけれどレイアウトを変えて出力する、という形をとりました。

PCの方はCSSは基本すべて外部ファイルに記述しており、classやidを駆使してデザインを決めています。特に、CSS3では角丸やシャドウ、グラデーションなど表現の幅が広がっているので、CSSだけでかなりいろいろなことができます。

でも、携帯ではドコモのおかげで外部CSSが使えないため、CSSの記述もインラインで(各タグの中に「style=””」という形で)入れる必要があり、内容の並べ方も変わってきます。対応していないプロパティもありますので、なるべくシンプルに記述していく必要があります。

なので、新しいアーカイブテンプレートを作り、マッピングのパスを「m/%-f」としました。当然、優先はPC用です。(私が指定したPC用のアーカイブマッピングパスは「%-f」です。ちなみに、%-fの意味は、「出力ファイル名.拡張子」です。詳しくはこちら参照)

なお、リンクを張る時、<$mt:EntryPermalink$>は優先されるテンプレートに割り当てられますので、携帯のページURLは「<$mt:BlogArchiveURL$><$mt:FileTemplate format=”m/%-f”$>」となります。

それとは別に、ウェブページを数ページ用意していました。

これは、単独で完結する内容で、あまり動きのないもの、という認識なのですが、mtevalモディファイアのおかげで、ページ本文にMTタグが普通に使えるようになったこともあり、昔だったらインデックステンプレートにしてしまうような内容を個別ページに出来るようになりました。

なので、このウェブページはウェブサイト直下に置いたのですが、「規約」のような独立のページ以外は、結構各ブログからパーツを引っ張ってきて作っており、本文と言いながら一部の内容は『記事テンプレート』状態になっていました。

これでは、CSSの縛りもあり、同じ内容からテンプレートだけを変えて2種類出力する、というのも無理がありました。

なので、携帯用ページは別に作ることにしました。

その際、フォルダを「携帯用」として作成し(フォルダ名は「m」)、それぞれ内容を携帯用に特化させて保存しました。

もちろん、テンプレートそのものも分けないといけません。パーツもすべて変わってしまうので。ただ、ウェブページテンプレートを複数作るのは違います。何しろ、一記事に対して一ページできれば良いのですから。

そこで、ウェブページテンプレートの内容はすべてモジュールにしてしまい(PC用ウェブページ・携帯用ウェブページ)、携帯用フォルダに入っているかどうかで条件分岐して呼び出す形にしました。

ちなみにウェブページテンプレートの内容です。
たったこれだけです。

<mt:IfFolder name=”携帯用”>
<$MTInclude module=”携帯用ウェブページ”$>
<mt:Else>
<$MTInclude module=”PC用ウェブページ”$>
</mt:IfFolder>

まぁ、これは構造が単純でページ数が少ないからできたことではあります。

とりあえず、これで携帯用ページを生成する準備ができました。

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

Twitt

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