CANPANマニア

ヘッダー画像の追加はこちら


宿題　「新着情報」の見出しデザインを変える　サンプル

「定義型リスト」とは
「用語」と「説明」によって構成されます。

■通常
<記事内容>

<dt>都道府県</dt>
<dd>サイトのURL</dd>
<dt>山口県</dt>
<dd>http://www.pref.yamaguchi.lg.jp/</dd>
<dt>島根県</dt>
<dd>http://www.pref.shimane.lg.jp/</dd>
</dl>

<記事表示>

都道府県

サイトのURL

山口県

http://www.pref.yamaguchi.lg.jp/

島根県

http://www.pref.shimane.lg.jp/

■横並び
<記事内容>

<dl class="d120">
<dt >都道府県</dt>
<dd>サイトのURL</dd>
<dt >山口県</dt>
<dd>http://www.pref.yamaguchi.lg.jp/</dd>
<dt>島根県</dt>
<dd>http://www.pref.shimane.lg.jp/</dd>
</dl>

dl.d120 {  
   overflow: hidden;  
   zoom: 1;  
}  
dl.d120 dt {  
	width: 100px;  
	float: left;  
	clear: both;  
	font-weight: bold;  
}  
dl.d120 dd {  
	padding: 0 0 5px 120px;  
}

<記事表示>

都道府県

サイトのURL

山口県

http://www.pref.yamaguchi.lg.jp/

島根県

http://www.pref.shimane.lg.jp/

■横並び下線ドット
<記事内容>

<dl class="dl120dt">
<dt >都道府県</dt>
<dd>サイトのURL</dd>
<dt >山口県</dt>
<dd>http://www.pref.yamaguchi.lg.jp/</dd>
<dt>島根県</dt>
<dd>http://www.pref.shimane.lg.jp/</dd>
</dl>

dl.dl120dt{  
	overflow: hidden;  
	zoom: 1;  
}  
dl.dl120dt dt{  
	margin-bottom: 5px;  
	padding-bottom: 5px;  
	width: 100px;  
	float: left;  
	clear: both;  
	font-weight: bold;  
}  
dl.dl120dt dd{  
	margin-bottom: 5px;  
	padding: 0 0 5px 120px;  
	border-bottom: 1px dotted #999;  
}

<記事表示>

都道府県

サイトのURL

山口県

http://www.pref.yamaguchi.lg.jp/

島根県

http://www.pref.shimane.lg.jp/

メニューの代わりのカテゴリー。
バナー画像にリンクしたカテゴリーを非表示にしたいという場合など
カテゴリーアーカイブの一部のカテゴリーを非表示にすることができます。

例）カテゴリー「基本情報」「その他」以外のカテゴリーをカテゴリーアーカイブで表示する
「スキンサイドバー＞コンテンツ＞カテゴリーアーカイブ＞HTML編集」を以下に変更

---------------------以下---------------------
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="side">
<div align="center"><img src="/template/<% css_id %>/img/side_title_header.gif" align="absmiddle"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="side_title"><% content.title %></td>
</tr>
</table>
<div align="center"><img src="/template/<% css_id %>/img/side_title_footer.gif" align="absmiddle"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<% content.header -%>
<% loop:list_category -%>
<% unless:category.name eq "基本情報" %>
<% unless:category.name eq "その他" %>
<div class="side_text"><a href="<% category.page_url %>"><% category.name | tag_break %> (<% category.article_count | __or__ | echo("0") %>)</a></div>
<% /unless %>
<% /unless %>
<% /loop -%>
<% content.footer -%>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div align="center"><img src="/template/<% css_id %>/img/spacer.gif" align="absmiddle" width="5" height="10"></div>

---------------------以上---------------------

※赤字部分を追加
　「基本情報」「その他」のカテゴリー以外を表示という意味です。

HTML編集で、メインページ自由記述の下に以下を記述。
※メインページ自由記述ではseesaa関数は使えないのでHTMLに書き込み

---

リニューアル後にあるデザイン(ライトグレーの場合)

<!-- 新着情報をトップページメイン上部に表示 -->
<div class="entry">
<h3 class="title">新着情報</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<% loop:list_article -%>
<div class="entry_new"><a href="<% article.page_url %>"><% article.subject | tag_break %></a> <% article.createstamp | date_format("%Y年%m月%d日（%a）") %></div>
<% /loop -%>
</td></tr>
</table>
</div>
<!-- 新着情報をトップページメイン上部に表示ここまで -->

---

リニューアル前にあるデザイン(カスタムスキン１・２・３の場合)

<!-- 新着情報をトップページメイン上部に表示 -->
<div class="entry">
<div class="entry_title">新着情報</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<% loop:list_article -%>
<div class="entry_layer"><a href="<% article.page_url %>"><% article.subject | tag_break %></a> <span class="date"><% article.createstamp | date_format("%Y年%m月%d日（%a）") %></span></div>
<% /loop -%>
</td></tr>
</table>
</div>
<!-- 新着情報をトップページメイン上部に表示ここまで -->

---

利用例)
NPO法人キセキ（設立申請中）
NPO法人大路小路まち・ひとづくりネットワーク