内を編集する最後に<li>において、それぞれの情報が自動的に取得できるように以下の3点を変数に書き換えます。表示することができます。このような変数の使い分けの規則については、それぞれのモジュールの変数表に一覧で記載されています。変数の表記に迷う場合や、追加で新しい情報を載せる場合はぜひご活用ください。以上でトピックパスの作業は完了です。一覧ページ:「エントリーサマリー」モジュールを実装する一覧ページの「カテゴリー名」と出ている部分を「エントリーサマリー」でモジュール化していきます。カテゴリー「お知らせ」の一覧ページです。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。繰り返しができる<li>については、1つのかたまりのみ残して先に削除してしまいましょう。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。</nav></section>それではこの編集箇所を、以下のエントリーサマリーのスニペットを参考にして書き換えていきます。--><p>ただいまページを準備しております。Entry_Summaryで囲みます。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。-->合わせて、モジュールIDも以下のように作成していきましょう。引数カテゴリーID(cid)ページ(page)チェックを打つエントリーヘッドラインのモジュールID設定では、引数としてカテゴリーIDで「お知らせ」を選択しましたが、汎用の一覧ページ用のテンプレートでは、個別にカテゴリーを指定することができません。したがって、今回の引数についてはカテゴリーIDのチェックボックスにチェックを打ち、表示されているページが所属するカテゴリーの情報を反映するようにします。エントリーサマリーなど改ページが必要なモジュールについてページャーを機能させるためには、「ページ(page)」へのチェックが必要になります。このチェックを忘れると、2ページ目以降を表示させることができなくなるので注意しましょう。表示設定からはサマリーの文字数について「100」と設定しておきましょう。モジュールIDの作成が完了したら、編集箇所にモジュールIDを追記します。notFound部分も含まれているので、こちらも忘れずに書き加えておきましょう。--><p>ただいまページを準備しております。-->ここからは、サマリー部分とページャー部分に分けて解説していきます。サマリー部分の作業から始めましょう。<p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。ブロックで囲っていきます。画像の情報も追記しておきましょう。1テキストのみ」をご覧ください。内について書き換える箇所は以下の3点です。class="photo-title">エントリー名1</p></a><p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。class="photo-title">{title}</p></a><p>{summary}</p>以上で<li>内の編集は完了です。サマリー部分について、ソースの全体像は以下のようになります。--></ul>一覧表示に便利な「組み込みJS」を追記する現時点でエントリーサマリーを見ると、各ブロックの高さがバラバラになっています。リンクのクリック範囲も画像とタイトル部分にしか適応されていません。これらを最適化するために、組み込みJSで2つの機能を追加していきましょう。cmsの内部構造について」をご覧ください。以下の<li>内です。スマートフォンで横並びの数が違う場合にも、自動的に隣の要素を認識して高さを揃えてくれます。js-biggerlinkリンクのクリックエリアをブロックの全範囲に拡大します。以上でサマリー部分のモジュール化は完了です。続いてページャー部分について作業していきます。ページャーはモジュールIDで設定する表示件数が実際のエントリーの件数を下回らないと表示されないため、一時的に表示件数を1件に設定し直しておきましょう。修正箇所は以下の部分です。</ul></nav>ページャーのスニペットはこのようになっています。特有のブロックや可変のclassが多く含まれており、非常に複雑です。そのためこの部分に関しては、編集箇所を基準とするのではなく、スニペットを基準として静的ファイルで振られていたクラス名をスニペットの該当部分に追記する方法で実装していきます。class="acms-pager">のクラス名を、既存のコードを参考にして以下のように書き換えます。</ul></div>さらに複数の<li>や<a>について、既存のコードに振られているclass="pager-link"を追記します。»」と書いてある部分について「«」「»」に変更しましょう。以上でページャーの実装は完了です。この部分のコードの全体像は以下のようになります。-->仕上げをする最後にモジュールのタイトルについて修正しましょう。「カテゴリー名」となっている部分にカテゴリー名「お知らせ」を表示するためには、グローバル変数を使用します。class="module-heading">%{CATEGORY_NAME}</h2></div>以上でエントリーサマリーの作業は全て完了です。詳細ページ:「エントリーボディ」モジュールを実装する最後に詳細ページのエントリー部分を「エントリーボディ」でモジュール化しましょう。この部分について動的化されると、それぞれのエントリーが表示されるだけでなく、サイトの表示画面からエントリーの新規登録もできるようになります。タグとモジュールIDを追加するエントリーボディのスニペットには、以下のようなエントリー管理に関わるインクルード文が複数含まれています。管理これらがないとそれぞれの機能が動作しないので、誤って削除しないよう注意しなければなりません。そのため、エントリー本文のモジュール化についても、サマリーのページャーと同様にスニペットを基準とした方法で実装していきます。編集箇所は以下の部分です。height="483"></a></div><p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。class="entry-container"><table><tbody><tr><th>項目名1</th><td>内容が書かれています。内容が書かれています。内容が書かれています。<tr><th>項目名2</th><td>内容が書かれています。内容が書かれています。<tr><th>項目名3</th><td>内容が書かれています。<tr><th>項目名4</th><td>内容が書かれています。height="278"&gt;</a></div><p>本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。本文が少し表示されています。»</a></li></ul>この編集箇所の直後に、エントリーボディのスニペットを貼り付けましょう。--><p>ただいまページを準備しております。-->スニペットを貼り付けると、修正箇所の下部にエントリーが表示されるのが確認できます。次に以下のようにモジュールIDを作成します。今回はエントリー末に前後リンクがついているため、表示設定タブから前後リンクを表示させるようチェックを打っておきましょう。引数カテゴリーID(cid)とエントリーID(eid)にチェック前後リンク「前後リンクを表示できるようにする。Entry_Bodyに追記します。-->スニペットを編集するここからは、既存の静的ファイルと見比べて都度スニペットを編集していきます。修正箇所は大きく分けてつです。-->以上でエントリーボディのモジュール化は完了です。既存の編集箇所については削除しましょう。cmsで一般的に使われる形へ変更しましょう。_entry.htmlまたこの変更に伴ってテーマ設定のテンプレートファイル名も修正します。使ってテンプレートを指定していきましょう。いうファイルを用意し、下記のように記述してください。cmsに伝えるようにします。以上でテンプレートファイルの名前を変更は完了です。最後にこれで小規模なサイトのテーマ作成における大まかな一連の作業が終了しました。今回の総復習では触れていませんが、他にもこのsampleテーマではサブカラムのエントリーリストやバナー、トップページのスライダーなども、モジュールを利用して動的化することができます。お時間がある方は是非チャレンジしてみてください。1回で全てを理解するのは難しいかもしれませんが、複雑なプログラムのロジックを考える必要もありません。