「お知らせ」と同じように、custom.cssで定義されているスタイルを適用します。表のようなclass属性を設定すると、製品写真が3つ横に並ぶレイアウトになります。
| HTML | 設定するclass名 |
|---|---|
| 2行目のdiv | entryPhoto clearfix |
| 11行目のdiv | div js-biggerlink |
■修正後のソースコード（top.htmlの1部、緑の部分が設定したclass属性）
<!-- BEGIN_MODULE Entry_Photo -->
<div class="entryPhoto clearfix">
<!--#include file="/admin/module/setting.html"-->
<!-- BEGIN notFound -->
<p>エントリーが見つかりませんでした。</p>
<!-- END notFound -->
<ul><!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<li>
<div class="js-biggerlink"><!-- BEGIN image:veil -->
<img src="%{ROOT_DIR}{path}" alt="" /><!-- END image:veil -->
<p><a href="{url}">{title}</a></p>
</div>
</li><!-- END entry:loop -->
<!-- END unit:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Photo -->
クラスを適用した「製品一覧」の表示
ヘッドライン、フォトモジュールのスニペットを修正した結果は、次のようになります。「お知らせ」「製品一覧」に動的コンテンツを表示できました。
ヘッドライン、フォトモジュールのスニペットを修正した結果
ただし、この状態では各モジュールで表示するコンテンツのカテゴリーが絞り込まれていないため、「お知らせ」に「会社概要」や「沿革」が出ていたり、「製品一覧」に「ホームページをリニューアル」「交通アクセス」が表示されたりしています。
そこで、次回は「モジュールID」という仕組みを使って、モジュールごとに必要なコンテンツを絞り込んで表示する方法を解説します。
4.まとめ
- 「ビルトインモジュール」はa-blog cmsで動的に表示するために欠かせないもの
- モジュールの設定は管理ページのコンフィグからできる
- エントリーまたは登録データがなければモジュールは表示しない
