ホーム > サポート・マニュアル > チュートリアル > テンプレート作成の基本 > ユニット表示のテンプレート

チュートリアル

ユニット表示のテンプレート

ドキュメント最終更新日時:2010/07/29 16:48

エントリーのユニットを表示しているテンプレート

ここではEntry_Bodyモジュールにおいて、エントリーのユニットを表示している部分のテンプレートについて説明しています。

バージョン1.1.0で名称が「カラム」から「ユニット」に変更になりました。

column.htmlの位置

themes/system/include/column.html

ユニットを表示しているテンプレート(column.html)は、Entry_Bodyモジュール内ではインクルードの記述を利用して読み込まれています。

インクルード先として指定されているcolumn.htmlというテンプレートファイルはsystemテーマ内の、includeフォルダ内に存在します。(右図参照)

column.htmlをカスタマイズする場合は、下記に示すパスにファイルをコピーして編集します。systemテーマの中のcolumn.htmlを直接編集することは推奨されません。

column.htmlのコピー作成先
./themes/使用中のテーマディレクトリ/include/column.html

テンプレートの解説

column.htmlはエントリーの中のユニット情報を表示するときの中心になるテンプレートです。ユニットのレイアウトには多くのHTMLとCSSを使用しています。

注意:HTMLやCSSの記述が完全でない場合、エントリーのレイアウトを損なう可能性があります。カスタマイズする際には、こまめなバックアップをするようにしてください。

記述されている内容

column.html内では、column:loopブロックが一番外側に記述され、その中にユニットの種類ごとの出力テンプレートが記述されています。

column.htmlの構成

<!-- BEGIN column:loop -->
<!-- BEGIN clear -->(省略)<!-- END clear -->
<!-- BEGIN column:text -->(省略)<!-- END column:text -->
<!-- BEGIN column:image -->(省略)<!-- END column:image -->
<!-- BEGIN column:file -->(省略)<!-- END column:file -->
<!-- BEGIN column:map -->(省略)<!-- END column:map -->
<!-- BEGIN column:youtube -->(省略)<!-- END column:youtube -->
<!-- BEGIN column:eximage -->(省略)<!-- END column:eximage -->
<!-- END column:loop -->

これらのブロックは、それぞれ「テキスト」「画像」「ファイル」「地図」「Youtube」「画像URL」の各ユニットに対応します。それぞれのユニットに対応したブロックの中が、そのユニットをEntry_Body上で表示する際に利用されます。

ユニット表示のHTMLを変更する必要がある場合は、各ブロックの中を編集してください。下記に示される、各ユニットのdiv要素に適用されているclass名は、システムのJavascriptで定義されているため、変更できません。

システムで利用されるクラス名(変更不可)

<div class="column-[ユニットタイプ]-{align}"></div>

備考:各ユニット(テキストを除く)のdiv要素を、それ以外の要素に変更するとシステムのJavascriptが機能しなくなり、レイアウトが崩れる可能性があります。

テキストユニットの編集

テキストユニットに限り、任意のテキストの種類を追加・編集することができます。column:textブロックの中には、テキストの種類ごとのテンプレートが記述されています。

テキストユニットの構造

<!-- 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 -->

これらのブロックはインストール直後の標準状態で、それぞれ「本文」「見出し3」「見出し4」「見出し5」「リスト」「番号付きリスト」「引用」「テーブル」「ソース」「自由入力」「マークダウン」の各テキストに対応します。これらは[カスタマイズ管理] - [コンフィグ] - [一般設定]の「テキストタグ」の項で設定されているタグとラベルに対応しています。

これらのテキストタグを追加・編集する場合は、管理ページの設定を変更した上で、column.html内、column:textブロック内で該当するタグのテンプレートも編集してください。



携帯アクセス解析