「製品一覧」を整える
「製品一覧」のレイアウトを調整します。フォトモジュールのスニペットでは画像サイズをHTMLで指定していますが、CSSで指定するように修正します。
■修正前ソースコード（top.htmlの1部、赤い部分を削除）
<!-- BEGIN_MODULE Entry_Photo -->
<div>
<!--#include file="/admin/module/setting.html"-->
<!-- BEGIN notFound -->
<p>エントリーが見つかりませんでした。</p>
<!-- END notFound -->
<ul><!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<li>
<div style="width:{x}px; height:{y}px; overflow:hidden; position:relative;"><!-- BEGIN image:veil -->
<img src="%{ROOT_DIR}{path}" width="{imgX}" height="{imgY}" alt="" style="left:{left}px; top:{top}px; position:relative;" /><!-- END image:veil -->
</div>
<p><a href="{url}">{title}</a></p>
</li><!-- END entry:loop -->
<!-- END unit:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Photo -->
フォトモジュールのスニペットで、赤いマーカー部分はフォトの画像サイズを指定しているが、今回は使用しないので削除する
製品名のテキストの位置を変更するため、「<p><a href="{url}">{title}</a></p>」を「</div>」の上へ移動します。
■修正前ソースコード（top.htmlの1部、緑の部分の行を入れ替える）
<!-- BEGIN_MODULE Entry_Photo -->
<div>
<!--#include file="/admin/module/setting.html"-->
<!-- BEGIN notFound -->
<p>エントリーが見つかりませんでした。</p>
<!-- END notFound -->
<ul><!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<li>
<div><!-- BEGIN image:veil -->
<img src="%{ROOT_DIR}{path}" alt="" /><!-- END image:veil -->
</div>
<p><a href="{url}">{title}</a></p>
</li><!-- END entry:loop -->
<!-- END unit:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Photo -->
■修正後ソースコード（top.htmlの1部）
<!-- BEGIN_MODULE Entry_Photo -->
<div>
<!--#include file="/admin/module/setting.html"-->
<!-- BEGIN notFound -->
<p>エントリーが見つかりませんでした。</p>
<!-- END notFound -->
<ul><!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
<li>
<div><!-- 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 -->
この状態で表示を確認すると以下のようになります。
フォトモジュールのスニペット修正後の表示
