ホーム > サポート・マニュアル > チュートリアル > ケータイ > 第4回記事本文を表示するテンプレートを用意する

第4回記事本文を表示するテンプレートを用意する

ドキュメント最終更新日時：2009/07/02 12:02

タグ：Entry_Body テーマルール

第3回では、トップページにはカテゴリがお知らせ（news）のみが表示できるようになりましたが、今回はそのリンクをクリックしてケータイ用の詳細ページを表示させる方法について解説します。

※この解説は、a-blog cms 1.0.0b3をもとに説明しています。ご利用のバージョンによっては画面表示や内容が若干異なる場合があります。ご了承ください。

なぜPC用のテーマで表示されるのか？

第3回の状態でリンクをクリックすると、PCで表示されるはずのテーマで表示されてしまいます。なぜこのような状態になるのでしょうか？

ルールは、優先順位の上のものから順に条件をチェックし、その条件に合うもののコンフィグが適用されます。ですので、今回は優先順位が「2」の「最新情報のとき」というルールが優先され、「ケータイの時」というルールは無視されてしまいます。

ルールの設定を変更する

ルールの設定を変更するには、2つの方法があります。

優先順位を変更する。
ケータイ以外の設定には「ケータイ以外」と設定する。

1の方法では、とりあえず簡単に現在の問題は解決できますが、ケータイのルールを追加していくときに問題になる可能性があるため、2の設定をしてみます。

ルール名を「最新情報のとき」を「最新情報のとき（Mobile以外）」とし、UA != Mobile と設定します。「!」は「〜ではない」という意味合いですので、「UAがMobileではない」という設定になります。

この状態で表示の確認をしてみてください。 3つめのルールが適用され、keitaiのテーマが利用できます。しかし、テーマの設定で詳細ページが「main.html」となっているのに「main.html」というファイルが存在しないため、template is not found というエラーメッセージが表示されてしまいます。

詳細ページのテンプレートファイルを用意する

ファイル名は何でもいいのですが、今回は「company1」のテーマに合わせて「main.html」というファイル名で詳細ページを作成します。ケータイ用に合わせた<head>タグを記述し、<body>内には次の Entry_Body のソースを貼りつけてください。

<!-- BEGIN_MODULE Entry_Body -->
<!-- BEGIN notFound -->
<p>お探しの記事は見つかりませんでした。</p>
<!-- END notFound -->
<!-- BEGIN serialNavi:veil -->
<ul>
<li>
<!-- BEGIN prevLink -->
<a href="{url}">&lt;&lt; {name}[trim(27, '...')|escape]</a>
<!-- END prevLink -->
&nbsp;</li>
<li><a href="{upperUrl}">一覧へ</a></li>
<li>&nbsp;
<!-- BEGIN nextLink -->
<a href="{url}">{name}[trim(27, '...')|escape] &gt;&gt;</a>
<!-- END nextLink -->
</li>
</ul>
<!-- END serialNavi:veil -->

<!-- 1記事▼▼ -->
<!-- BEGIN entry:loop -->
<div>
<!-- BEGIN date:veil -->
<p>{year}.{month}.{day}</p>
<!-- END date:veil -->
</div>
<!-- /boxHeader -->
<div>
<!--#include file="admin/entry/title.html"-->
<!-- BEGIN title:veil -->
<div>
<h2><a href="{titleUrl}">{title}[raw]</a></h2>
<!-- BEGIN category:veil -->
<p>カテゴリー：
<!-- BEGIN category:loop -->
<span><a href="{url}">{name}</a></span>
<!-- BEGIN glue -->
&lt;
<!-- END glue -->
<!-- END category:loop -->
</p>
<!-- END category:veil -->
</div>
<!-- /entryHeader -->
<!-- END title:veil -->
<div>
<!-- BEGIN column:veil -->
<!--#include file="include/column.html"-->
<hr />
<!-- END column:veil -->
<!-- BEGIN continueLink:veil -->
<p><a href="{continueUrl}">「{continueName}」の続きを読む</a></p>
<!-- END continueLink:veil -->
<!-- BEGIN adminEntryEdit -->
<!--#include file="admin/entry/edit.html"-->
<!--#include file="admin/entry/add.html"-->
<!-- END adminEntryEdit -->
<!-- BEGIN tag:veil -->
<p>関連タグ：<!-- BEGIN tag:loop --><a href="{url}">{name}</a>&nbsp;<!-- END tag:loop --></p>
<!-- END tag:veil -->
<!--#include file="admin/entry/action.html"-->
</div>
<!-- /entry -->
<!-- BEGIN footer:veil -->
<div>
<p>Posted&nbsp;by {posterName}&nbsp;at {hour}:{min}&nbsp; <a href="{inheritUrl}#permalink">パーマリンク</a>
<!-- BEGIN trackbackAmount -->
<a href="{trackbackUrl}#trackback">トラックバック ( {trackbackAmount} )</a>
<!-- END trackbackAmount -->
<!-- BEGIN commentAmount -->
<a href="{commentUrl}#comment">コメント ( {commentAmount} )</a>
<!-- END commentAmount -->
</p>
</div>
<!-- /entryFooter -->
<!-- END footer:veil -->
</div>
<!-- /entryWrapper -->
<!-- END entry:loop -->
<!-- 1記事▲▲ -->
<!-- BEGIN pager:veil -->
<p>
全 {itemsAmount} 件中 {itemsFrom} 〜 {itemsTo} 件目を表示
<!-- BEGIN page:loop --><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --><!-- BEGIN glue -->, <!-- END glue --><!-- END page:loop -->
<!-- BEGIN lastPage:veil --> ...<a href="{lastPageUrl}">{lastPage}</a><!-- END lastPage:veil -->
</p>
<p>
<!-- BEGIN backLink --><a href="{url}">&laquo; 前の{backNum}件</a><!-- END backLink -->
<!-- BEGIN forwardLink --><a href="{url}">次の{forwardNum}件 &raquo;</a><!-- END forwardLink -->
</p>
<!-- END pager:veil -->
<!-- END_MODULE Entry_Body -->

これで、とりあえずケータイ向けのページが表示されるようになります。しかし、画像はPC用の画像が表示されています。

画像のサイズをケータイ用に縮小表示させる

上の Entry_Body には、画像の表示のタグはありません。実は「include/column.html」の中に書かれています。 48行目に、次のようにインクルードされています。

ここでインクルードについて少し紹介します。「keitai」のテーマのディレクトリには、今は「include」というディレクトリはありません。この場合は、「system/include/column.html」がインクルードされます。

今回は、「themes/keitai/include/column.html」にファイルをコピーしてカスタマイズします。

<!-- BEGIN column:loop --><!-- BEGIN clear -->
<hr class="clearHidden" /><!-- END clear --><!-- BEGIN column#text -->

<!-- テキスト -->
<!-- BEGIN p -->
<p {class}>{text}[nl2br]</p><!-- END p --><!-- BEGIN h3 -->
<h3 {class}>{text}[nl2br]</h3><!-- END h3 --><!-- BEGIN h4 -->
<h4 {class}>{text}[nl2br]</h4><!-- END h4 --><!-- BEGIN h5 -->
<h5 {class}>{text}[nl2br]</h5><!-- END h5 --><!-- BEGIN ul -->
<ul {class}>{text}[list]</ul><!-- END ul --><!-- BEGIN ol -->
<ol {class}>{text}[list]</ol><!-- END ol --><!-- BEGIN blockquote -->
<blockquote {class}>{text}</blockquote><!-- END blockquote --><!-- BEGIN table -->
<table {class}>{text}[table]</table><!-- END table --><!-- BEGIN pre -->
<pre {class}>{text}</pre><!-- END pre --><!-- BEGIN none -->
{text}[raw]<!-- END none --><!-- BEGIN markdown -->
{text}[markdown]<!-- END markdown -->
<!-- END column#text --><!-- BEGIN column#image -->

<!-- 画像 -->
<div class="column-image-{align}"><!-- BEGIN link#front -->
<a href="{url}"{viewer}[raw]><!-- END link#front -->
<img class="columnImage" src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" /><!-- BEGIN link#rear -->
</a><!-- END link#rear --><!-- BEGIN caption:veil -->
<p class="caption">{caption}</p><!-- END caption:veil -->
</div><!-- END column#image --><!-- BEGIN column#file -->

<!-- ファイル -->
<div class="column-file-{align}">
<a href="%{ROOT_DIR}{path}"><img class="columnIcon" src="%{ROOT_DIR}{icon}" alt="ファイルイメージ" width="{x}" height="{y}" /></a><!-- BEGIN caption:veil -->
<p class="caption">{caption}</p><!-- END caption:veil -->
</div><!-- END column#file --><!-- BEGIN column#map -->

<!-- 地図 -->
<img class="column-map-{align}" src="{proxy}http://maps.google.com/staticmap?center={lat},{lng}&zoom={zoom}&size={x}x{y}&maptype=roadmap&markers=<!-- BEGIN marker:loop -->{lat},{lng}<!-- BEGIN glue -->|<!-- END glue --><!-- END marker:loop -->&key=%{GOOGLE_API_KEY}" alt="{msg}" width="{x}" height="{y}" title="クリックで地図が動かせるようになります。" /><!-- END column#map --><!-- BEGIN column#youtube -->

<!-- YouTube -->
<div class="column-youtube-{align}" >
<object width="{x}" height="{y}"><param name="movie" value="http://www.youtube.com/v/0zldvi6V0ms&hl=ja&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/{youtubeId}&hl=ja&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="{x}" height="{y}"></embed></object>
</div><!-- END column#youtube --><!-- BEGIN column#eximage -->

<!-- 画像URL -->
<div class="column-eximage-{align}"><!-- BEGIN link#front -->
<a href="{url}"{viewer}[raw]><!-- END link#front -->
<img class="columnImage" src="{normal}" alt="{alt}" width="{x}" height="{y}" /><!-- BEGIN link#rear -->
</a><!-- END link#rear --><!-- BEGIN caption:veil -->
<p class="caption">{caption}</p><!-- END caption:veil -->
</div>
<!-- END column#eximage -->

<!-- END column:loop -->

22行目の

<img class="columnImage" src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" />

を

<img class="columnImage" src="%{ROOT_DIR}{tinyPath}" alt="{alt}" width="{tinyX}" height="{tinyY}" />

のように修正します。これで、小さいサイズの画像をケータイ用として活用できるようになります。

あと、いくつか修正した方がいいところがあります。

画像のリンク先が大きな画像のファイルになっている。
2行目の<hr class="clearHidden" />を修正しないとCSSのフロートの解除のときに、CSSが利用できないブラウザ（docomo）で線が表示されてしまう。

以上2点のカスタマイズをしてみてください。

現在は、「お知らせ」のみ表示されています。次回は「ナビゲーションモジュールを利用してみる」と題し、ナビゲーションを追加する方法をご紹介します。

このドキュメントと関連している内容のエントリー

関連度 2 : ルールを使わずに特定カテゴリーにテンプレートを適用したい
関連度 2 : 第1回ケータイサイトの作り方から学ぶa-blog cmsのカスタマイズ
関連度 1 : ショップ拡張のマニュアルを更新・追加しました
関連度 1 : ショッピングサイトの作成手順〜標準機能編〜
関連度 1 : ショッピングサイトの作成手順〜ショップ拡張編〜

ドキュメントの内容に関するお知らせフォーム

内容に誤り・現行バージョンと異なる部分がありましたら、下記のフォームよりお知らせください。

第4回 記事本文を表示するテンプレートを用意する