HOME > ブログ > トップページに新着記事一覧(コンテンツ追加+CSS)

トップページに新着記事一覧(コンテンツ追加+CSS)

Seesaa BLOGで、「コンテンツの追加」により新着記事一覧を、トップページのメインに配置できるカスタマイズです。

表示件数を自由に指定することが出来ます。コンテンツなので、要らなくなったら非表示にすることで隠すことが出来ます。
設置手順は以下の通りです。

設置方法:
1.
コンテンツページで新着記事コンテンツを新規に追加、表示するページをトップページ、配置をメイン、並び順は「記事」コンテンツの上にする。

2.
「新着記事の設定」ページに移動、コンテンツのタイトルを「新着記事」とする(任煮の名前でもOK)。
そして記事の表示件数を任意に指定して保存。

3.
再び「新着記事の設定」 → 「コンテンツHTML編集」ページに進み、ソースを下記のものに書き換えて、また保存。

インライン表示にしたい場合は、

<div id="clist">
<div class="ctitle"><% content.title %></div>
<div class="clist">
<% content.header -%>
<% loop:list_article -%>
|<% article.createstamp | date_format("%y年%m月%d日") %> <a href="<% article.page_url %>"><% article.subject %></a>
<% /loop -%>
<% content.footer -%>
</div>
</div>


リスト表記したい場合は、

<div id="clist">
<div class="ctitle"><% content.title %></div>
<div class="clist">
<% content.header -%>
<ul>
<% loop:list_article -%>
<li><% article.createstamp | date_format("%y年%m月%d日") %> <a href="<% article.page_url %>"><% article.subject %></a></li>
<% /loop -%>
<% content.footer -%>
</ul>
</div>
</div>


4.
CSS編集、ちなみに当サイトでは以下のように設定しております。

#clist {border:1px dotted #ccc;}
.ctitle{color:#636363;font-size:12px;font-weight:bold;font-family:arial, Helvetica;padding:10px 20px 4px;}
.clist{font-size:12px;color:#999;padding:4px 20px 10px;line-height:160%;}


5.
トップページを再構築する。

備考:
※ このサイトでしか試してないんで他のテンプレートで使用した場合、デザインが崩れたりするかも? (やや不安・・・)

※ 日付の部分、<% article.createstamp | date_format("%y年%m月%d日") %> のソースを書き換えることにより表示を変えることが可能です。以下一例。

 %Y.%h.%d → 2005.Sep.05
 %D(大文字) → 23/09/05
 %m/%d → 09/05
 %H:%M → 19:10 (時刻表示)

参考:
このカスタマイズは、: カテゴリで記事一覧を表示する [HTML+CSS] [Seesaa デザインテンプレート] さんの記事を参考に行いました。
posted by ponsuke at 2005-09-10 14:05 | Comment(0) | TrackBack(0) | ブログ
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。