「top.html」を保存してから、サンプルサイト「株式会社ウェブプロ」をリロードすると、図のように表示されます。
配布されているスニペットそのままの状態で表示したサンプルサイト「株式会社ウェブプロ」
配布されているスニペットのままだと、企業サイトには不必要な情報があり、表示順序が適切ではないので、ペーストしたスニペットを編集していきます。
「お知らせ」を整える
「お知らせ」では、エントリーの投稿日とタイトルのみ表示するようにし、以下の要素を取り除きます。
- 一覧ページとRSSへのリンク
- 投稿したエントリー（記事）のカテゴリー名
- エントリーを投稿した時間
- ページャー
「webpro」ディレクトリー内の「top.html」をエディターで開きます。
画像の赤枠内にあるソースコードを削除します。HTMLのコメントタグはモジュールを表示利用するためのa-blog cmsの記述で、BEGINを含む記述を消去したらENDの記述も削除します。
■修正前ソースコード（top.htmlの1部、赤い部分を削除）
<!-- BEGIN_MODULE Entry_Headline -->
<div>
<!--#include file="/admin/module/setting.html"-->
<a href="{indexUrl}">一覧へ</a>
<a href="{indexUrl}rss2.xml">rss</a>
<ul><!-- BEGIN entry:loop -->
<li><!-- BEGIN url#front --><a href="{url}"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear --><!-- BEGIN category:veil --> 【{categoryName}】<!-- END category:veil -->{date#Y}年{date#m}月{date#d}日( {date#week} ) {date#h}時{date#i}分{date#s}秒 <!-- BEGIN new -->New!<!-- END new --></li><!-- END entry:loop -->
</ul>
<!-- BEGIN pager:veil -->
<p>
全 {itemsAmount} 件中 {itemsFrom} 〜 {itemsTo} 件目を表示
<!-- BEGIN firstPage:veil --><a href="{firstPageUrl}">{firstPage}</a><!-- END firstPage:veil -->
<!-- BEGIN page:loop --><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --><!-- BEGIN glue -->, <!-- END glue --><!-- END page:loop -->
<!-- BEGIN lastPage:veil --> ...<a href="{lastPageUrl}">{lastPage}</a><!-- END lastPage:veil -->
</p>
<p>
<!-- BEGIN backLink --><a href="{url}">« 前の{backNum}件</a><!-- END backLink -->
<!-- BEGIN forwardLink --><a href="{url}">次の{forwardNum}件 »</a><!-- END forwardLink -->
</p>
<!-- END pager:veil -->
</div>
<!-- END_MODULE Entry_Headline -->
ソースコードはエントリーヘッドラインのスニペット。赤いマーカー部分の上から順に、一覧とRSSへのリンク、投稿したエントリーのカテゴリー名、エントリーを投稿した時間、ページャーの記述で今回は使用しない
■修正後ソースコード（top.htmlの1部）
<!-- BEGIN_MODULE Entry_Headline -->
<div>
<!--#include file="/admin/module/setting.html"-->
<ul><!-- BEGIN entry:loop -->
<li><!-- BEGIN url#front --><a href="{url}"><!-- END url#front -->{title}<!-- BEGIN url#rear --></a><!-- END url#rear -->{date#Y}年{date#m}月{date#d}日( {date#week} ) <!-- BEGIN new -->New!<!-- END new --></li><!-- END entry:loop -->
</ul>
</div>
<!-- END_MODULE Entry_Headline -->
