1. ホーム
  2. CMSお役立ち情報！
  3. モジュール定義タグの活用（2）

モジュール定義タグの活用（2）

2022.03.23

こんにちは。
アントアントのメルマガ担当です。

いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は前回に引き続き『ant2 CMS モジュール定義タグの活用（第二回）』についてご紹介いたします。

前回のメルマガではモジュール定義タグについて、モジュール定義タグのご説明、
ブロックレイアウト用のモジュール定義タグを使って表示する方法についてご紹介しました。

前回の振り返り

モジュール定義タグについて

モジュール定義タグはブロックレイアウト用パーツとページ用のモジュール定義タグの2種類があります。

  • ブロックレイアウト用パーツ：赤枠線で囲った範囲にブロックレイアウト用パーツを配置することができます。
  • ページ用：青枠線で囲ったMAINのコンテンツブロックのみで使用することができます。

レイアウトブロックとページにモジュール定義タグを入れてみよう！

前回はトピックスにパターン1のブロックレイアウト用パーツのモジュール定義タグをいれてみました。

パターン1 :ブロックレイアウト用パーツのモジュール定義タグ《サイト内検索フォーム》をレイアウトブロック《FOOTER》に挿入

前回のブロックレイアウト用パーツのモジュール定義タグ挿入についてはこちらから

今回はパターン2のページ用のモジュール定義タグをいれてみましょう。

パターン2:ページ用のモジュール定義タグ《トピックス一覧》

今回も引き続きカスタマイズ初心者のメルマガ担当が実践します！

まずは前回と同様にカスタムデザインテンプレートを作成してモジュール定義タグを挿入する準備をしましょう。

準備：カスタムデザインテンプレートを作成

コントロールパネル内[作成]＞[デザイン]＞[サイトデザインを変える]＞サイトデザインダイアログ

　サイトデザインダイアログの【Myデザイン】タブに表示される公式テンプレートまたはオリジナルテンプレートの中から、

　ベースにしたいテンプレートの鉛筆マークをクリックします。

 

作成するカスタムデザインテンプレートの《ディレクトリ名》《デザイン名称》《作者名》を入力し、[OK]ボタンをクリックします。

 

【Myデザイン】タブに作成したカスタムデザインテンプレートが追加されます。

次にまずはここを確認してください！　

  1. 編集したいモジュール定義タグを確認
  2. モジュール定義タグを挿入したいページのページデザインを確認

1．編集したいモジュール定義タグを確認

まずは弊社でご用意しているタグリファレンスを参考にカスタマイズしたいモジュールの定義タグがあるかどうかを確認します。

今回は事前に下記のモジュール定義タグを用意しました。(赤文字が変更箇所です)

<!--MODULE:topics-topics_list-->
<div class="box topicsList">
    <h1><span id="cms-editor-textarea-cms_topics_group___ctg_title___ctg_id___{topics_header[id]}___{GLOBALS.numeric_id()}">{topics_header[ctg_title]}</span>{tr(#List#)}</h1>
    <div class="topicsListBox" flexy:foreach="topics,topic" id="EDIT-topics-{topic[ctp_ctg_id]}-{topic[ctp_id]}">
        {if:topic[ctp_image]}
            <div class="topicDigestImgOn clearfix">
                <div class="topicDigestText">
                    <p class="topicDate">{date_format(#Y/m/d#,topic[ctp_date])}</p>
                    {if:topic[ctp_link_flag]}
                        <h2><a href="{topic[ctp_url]:us}" target="{topic[ctp_target]}" id="cms-editor-textarea-cms_topics___ctp_title___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}">{topic[ctp_title]:bs}</a></h2>
                    {else:}
                        <h2 class="linkNo" id="cms-editor-textarea-cms_topics___ctp_title___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}">{topic[ctp_title]:bs}</h2>
                    {end:}
                    <p id="cms-editor-textarea-cms_topics___ctp_description___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___crl{GLOBALS.numeric_id()}">
                    {topic[description]:bs}
                    </p>
                </div>
                {if:topic[ctp_image]}
                <div class="topicDigestPhoto">
                    {if:topic[ctp_link_flag]}
                        <a href="{topic[ctp_url]:us}" target="{topic[ctp_target]}"><img src="{topic[ctp_image]:us}" alt="{topic[ctp_title]}" id="cms-editor-image-cms_topics___ctp_image___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}" /></a>
                    {else:}
                        <img src="{topic[ctp_image]:us}" alt="{topic[ctp_title]}" id="cms-editor-image-cms_topics___ctp_image___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}" />
                    {end:}
                </div>
                {end:}
            </div>
            {else:}
            <div class="<?=_h($off_class)?>">
                <div class="topicDigestText">
                    <p class="topicDate">{date_format(#Y/m/d#,topic[ctp_date])}</p>
                    {if:topic[ctp_link_flag]}
                        <h2><a href="{topic[ctp_url]:us}" target="{topic[ctp_target]}" id="cms-editor-textarea-cms_topics___ctp_title___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}">{topic[ctp_title]:bs}</a></h2>
                    {else:}
                        <h2 class="linkNo" id="cms-editor-textarea-cms_topics___ctp_title___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}">{topic[ctp_title]:bs}</h2>
                    {end:}
                    <p id="cms-editor-textarea-cms_topics___ctp_description___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___crl{GLOBALS.numeric_id()}" class="cms-dummy-image-frame">
                        {topic[description]:bs}
                    </p>
                </div>
                {if:show_ph()}
                <div class="topicDigestPhoto">
                    {if:topic[ctp_link_flag]}<a href="{topic[ctp_url]:us}" title="{topic[ctp_title]}" target="{topic[ctp_target]}">{end:}
                    <img class="cms-dummy-image" src="<?php echo CMS_DUMMY_IMAGE?>" alt="{data[title]}" id="cms-editor-image-cms_topics___ctp_image___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}" />
                    {if:topic[ctp_link_flag]}</a>{end:}
                </div>
                {end:}
            </div>
        {end:}
    </div>
    <div class="pageLink">
        <ul class="clearfix">
            {if:page[prev_url]}<li class="prevBu"><a href="{page[prev_url]:us}">&laquo;&nbsp;<span class="linkTxt">{page[prev_year]}{tr(#year#)}</span></a></li>{end:}
            <li class="mainBu"><a href="{base_url:us}">{tr(#New Topics#)}</a></li>
            {if:page[next_url]}<li class="nextBu"><a href="{page[next_url]:us}"><span class="linkTxt">{page[next_year]}{tr(#year#)}</span>&nbsp;&raquo;</a></li>{end:}
        </ul>
    </div>
</div>
<!--/MODULE:topics-topics_list-->

今回挿入するページ用のモジュール定義タグではこちらの表示を変更することができます。

  • トピックス名「一覧」→トピックス名「List」
  • 投稿日時「年.月.日」→「年/月/日」
  • 前の年を表示「≪2022年」→「≪2022year」
  • 「最新一覧」→「New Topics」
  • アイコン画像の表示→表示なし

1

モジュール定義タグ挿入前

  • トピックス名「一覧」
  • 投稿日時「年.月.日」
  • 前の年を表示「≪2022年」
  • 「最新一覧」
  • アイコン画像の表示あり

2

モジュール定義タグ挿入後

  • トピックス名「List」
  • 投稿日時「年/月/日」
  • 前の年を表示「≪2022year」
  • 「New Topics」
  • アイコン画像の表示なし

2．モジュール定義タグを挿入したいページのページデザインを確認

作成したいページのページデザインを下記の①～③のいずれかの方法で確認してください。

①ページリストからページデザインを確認する
コントロールパネル内[作成]＞[コンテンツ管理]＞[ページリスト]内《ページデザイン列》
※下階層があるコンテンツに関してはコンテンツの上位のページデザインが引き継がれます。

②作成したいページを開いてページデザインダイアログを開く
コントロールパネル内[作成]＞[デザイン]＞[サイトデザインを変える]

③作成したいページを開いて、レイアウトダイアログからページデザインを確認する
右クリック＞レイアウト＞レイアウトを変える＞レイアウトダイアログ

ここから実践！

パターン2：ページ用のモジュール定義タグ《トピックス一覧》の表示を変える

1．コントロールパネル内[作成]＞[サイトデザインを変える]
先ほど作成したカスタムデザインテンプレートを選択し、鉛筆マークをクリックします。

2．鉛筆マークをクリックするとカスタムデザインテンプレート内に格納されているフォルダを確認することができます。

3．今回は《トピックス一覧》の表示を変えたいため
トピックスのページデザインは【default.htm】なのでdefault.htmを編集していきます

ページ用のモジュール定義タグはMAINのブロックのみで使用することができます。
このMAINのブロックを定義するタグは<!--BLOCK:MAIN--><!--/BLOCK:MAIN-->になりますので、
ページ用のモジュール定義タグはこのタグ内に挿入する必要があります。そのためこのタグ内にモジュール定義タグを挿入する必要があります。

先ほど確認したトピックス一覧のモジュール定義タグを<!--BLOCK:MAIN--><!--/BLOCK:MAIN-->の間に追記していきます。

モジュール定義タグの追記が完了したら[保存]ボタンをクリックしてください。

4．[保存]ボタンをクリック後、編集サイトの画面へ戻ります。
編集サイトの画面上ではまだ表示が変わっていません。

5．モジュール定義タグを反映させるためにブラウザのリロードボタンをクリックしてください。
リロードボタンをクリックすることで、モジュール定義タグのカスタマイズを反映することができます。

今回は前回に引き続き、モジュール定義タグについて、

モジュール定義タグ（ページ用）を使ったhtmファイルのカスタマイズ方法をご紹介しました。
モジュール定義タグを使ってカスタマイズすることで表示方法を変えられるため、今までとまた変わったWebサイトの見せ方が可能となります。

カスタマイズ初心者でも簡単にカスタマイズできる箇所も多いので是非ご活用ください！

サービスについての
お問い合わせはこちら

お問い合わせはこちら

サービス資料の
ダウンロードはこちら

資料請求はこちら

ant2 CMSの
無料体験はこちら

デモ登録はこちら

お問い合わせ・ご相談

デモのご案内・サービスに関するご不明点についてご説明いたします。
まずは情報交換からお気軽にご相談ください。

075-353-7855（平日 10:00〜18:00受付）

お問い合わせをする

資料ダウンロード

OEMやCMSの事例をまとめた資料です。社内検討にお役立てください。

資料請求をする

サービスサイト一覧

関連サイト

資料請求
デモ登録
Copyright (C) antant co.,ltd. All Rights Reserved.