CANPAN ブログ検索
Loading
  • もっと見る

2018年05月18日

20180518CANPANブログカスタマイズ上級編 新着情報

以下をコピペ



<div class="entry">
<h3 class="title_new">新着記事</h3>
<div class="news">
<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> <span class="date_new"><% article.createstamp | date_format("%Y年%m月%d日(%a)") %></span></div>
<% /loop -%>
</td></tr>
</table>
</div>
</div>
<!-- 新着情報をトップページメイン上部に表示ここまで -->




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


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

2013年04月10日

htmlの定義型リストを使ってみる

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

■通常
<記事内容>
<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/

2012年07月14日

カテゴリーアーカイブの一部のカテゴリーを非表示にする

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

例)カテゴリー「基本情報」「その他」以外のカテゴリーをカテゴリーアーカイブで表示する
「スキンサイドバー>コンテンツ>カテゴリーアーカイブ>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>
<!-- 新着情報をトップページメイン上部に表示ここまで -->



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


<!-- 新着情報をトップページメイン上部に表示 -->
<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法人大路小路まち・ひとづくりネットワーク