■画像付き記事一覧モジュールver2.5　使用可能な独自タグ

使用可能なタグ一覧
タグ名 説明
{UOIMGLIST} モジュールの開始
　　 {UOIMGLIST_C_TITLE} モード別タイトル
　　 {UOIMGLIST_PAGE1} ページャー１の開始
　　 　　 {UOIMGLIST_PAGE_FIRST}
最初{/UOIMGLIST_PAGE_FIRST}		 最初のページへ移動
（赤字は何でもいい）
　　 　　 {UOIMGLIST_PAGE_BEFORE}
前{/UOIMGLIST_PAGE_BEFORE}		 前のページへ移動
（赤字は何でもいい）
　　 　　 {UOIMGLIST_PAGE_LIST} ｜１｜２｜３｜…
　　 　　 {UOIMGLIST_PAGE_NEXT}
次{/UOIMGLIST_PAGE_NEXT}		 次のページへ移動
（赤字は何でもいい）
　　 　　 {UOIMGLIST_PAGE_LAST}
最後{/UOIMGLIST_PAGE_LAST}		 最後のページへ移動
（赤字は何でもいい）
　　 {/UOIMGLIST_PAGE1} ページャー１の終了
　　 {UOIMGLIST_LOOP} 記事一覧ループの開始
　　 　　 {UOIMGLIST_IMG} 記事中の最初の画像サムネイル（リンクつき）を表示
　　 　　 {UOIMGLIST_TITLE} 記事タイトル（リンクつき）を表示
　　 　　 {UOIMGLIST_YMD}
Y/m/d{/UOIMGLIST_YMD}		 記事投稿日付を表示
    {UOIMGLIST_USER} 投稿者名タグの開始
    　 {UOIMGLIST_USERNAME} 投稿者名
    {/UOIMGLIST_USER} 投稿者名タグの終了
    {UOIMGLIST_CMT} コメント数タグの開始
    　 {UOIMGLIST_CMTCNT} コメント数（リンクつき）を表示
    {/UOIMGLIST_CMT} コメント数タグの終了
    {UOIMGLIST_TRK} トラックバック数タグの開始
    　 {UOIMGLIST_TRKCNT} トラックバック数（リンクつき）を表示
    {/UOIMGLIST_TRK} トラックバック数タグの終了
    {UOIMGLIST_CATEGORY} カテゴリ名タグの開始
    　 {UOIMGLIST_CATEGORYNAME} カテゴリ名（リンクつき）を表示
    {/UOIMGLIST_CATEGORY} カテゴリ名タグの終了
    {UOIMGLIST_OUTLINE} 記事概要を表示
　　 {/UOIMGLIST_LOOP} 記事一覧ループの終了
　　 {UOIMGLIST_PAGE2} ページャー２の開始
　　 　　 内包できるタグは、ページャー１と全く同じです
　　 {/UOIMGLIST_PAGE2} ページャー２の終了
{/UOIMGLIST} モジュールの終了
 
スキン記入サンプル

■ボックス型表示 サンプル（便宜上、色分けしてあります）


街に出て植栽を見よう::初夏のバラ園　の記事一覧
最初｜前| 1 | 2 | 3 | 4 |次｜最後
Rosa フリュイテ
2009/09/08
Rosa スブニール・ダ‥
2009/09/08
Rosa 桃山
2009/09/08
Rosa カルディナール
2009/09/08
Rosa 金閣
2009/09/08
Rosa ショッキングブ‥
2009/09/08

最初｜前| 1 | 2 | 3 | 4 |次｜最後

このサンプルは次のような前提で作られています
・・・・設定画面でサムネイルサイズを縦横最大150pxに指定
・・・・設定画面で画像のクラスを.uoimg_gzlistと指定

■ボックス型表示の　HTML記述サンプル（便宜上、色分けしてあります）
<!-- 画像付き記事一覧 start -->
{UOIMGLIST}
<div class="uoimg_title"><u>{UOIMGLIST_C_TITLE}　一覧</u></div>
{UOIMGLIST_PAGE1}
<div class="uoimg_pager">
{UOIMGLIST_PAGE_FIRST}最初{/UOIMGLIST_PAGE_FIRST}｜
{UOIMGLIST_PAGE_BEFORE}前{/UOIMGLIST_PAGE_BEFORE}
{UOIMGLIST_PAGE_LIST}
{UOIMGLIST_PAGE_NEXT}次{/UOIMGLIST_PAGE_NEXT}
｜{UOIMGLIST_PAGE_LAST}最後{/UOIMGLIST_PAGE_LAST}
</div>
{/UOIMGLIST_PAGE1}
<div class="uoimg_listloop">
{UOIMGLIST_LOOP}
<div class="photodiv">
<div class="photodiv2">{UOIMGLIST_IMG}</div>
<div class="photocom">{UOIMGLIST_TITLE}<br />{UOIMGLIST_YMD}Y/m/d{/UOIMGLIST_YMD}</div>
</div>
{/UOIMGLIST_LOOP}
<br clear="all" />
</div>
{UOIMGLIST_PAGE2}
<div class="uoimg_pager2">
{UOIMGLIST_PAGE_FIRST}最初{/UOIMGLIST_PAGE_FIRST}｜
{UOIMGLIST_PAGE_BEFORE}前{/UOIMGLIST_PAGE_BEFORE}
{UOIMGLIST_PAGE_LIST}
{UOIMGLIST_PAGE_NEXT}次{/UOIMGLIST_PAGE_NEXT}
｜{UOIMGLIST_PAGE_LAST}最後{/UOIMGLIST_PAGE_LAST}
</div>
{/UOIMGLIST_PAGE2}
{/UOIMGLIST}
<!-- 画像付き記事一覧 end -->
■ボックス型表示の　CSS記述サンプル （便宜上、色分けしてあります）
/* 画像つき記事一覧モジュール */

.uoimg_title { width:546px; margin:6px auto 6px auto; padding:0px; font-weight:bold; color:#000000; text-align:center; height:auto; }
.uoimg_listloop { width:546px; margin-left:auto; margin-right:auto; }
.photodiv { width:170px; height:200px; margin:5px 5px; font-size:9pt; color:#333333; text-align:left; border:1px solid #cccccc; float:left; clear:none; }
.photodiv2 { width:150px; height:150px; margin:10px 10px 0px 10px; }
.photocom { width:160px; height:30px; margin:0px 5px; ; font-size:9pt; color:#333333; text-align:center; }
.uoimg_pager1 { width:546px; margin:0 auto 10px auto; padding:0px 0px 6px 0px; color:#333333; text-align:center; font-size:12px; border-bottom:1px dashed #666666; }
.uoimg_pager2 { width:546px; margin:10px auto 0px auto; padding:6px 0px 0px 0px; color:#333333; text-align:center; font-size:12px; border-top:1px dashed #666666; }
.uoimg_gzlist { margin-left:auto; margin-right:auto; display : block; }


■長方形表示 サンプル（全ての独自タグを使用）　便宜上、色分けしてあります


街に出て植栽を見よう::初夏のバラ園　の記事一覧
最初｜前| 1 | 2 | 3 | 4 |次｜最後
Rosa フリュイテ　CT(11) TB(3)
2009/09/08　投稿者：marli
フリュイテ薔薇の品種名・登録作出者名・登録作出年・系統Rosa Fruite（Eの上に点）L.メイアン（フランス）1984年class.:Floribu...
　カテゴリ：街に出て植栽を見よう::初夏のバラ園
Rosa スブニール・ダンネ‥　CT(0) TB(0)
2009/09/08　投稿者：marli
スブニール・ダンネ・フランク薔薇の品種名・登録作出者名・登録作出年・系統Rosa Souv d'Anne Frankデルフォルジュ（ベルギー）...
　カテゴリ：街に出て植栽を見よう::初夏のバラ園
Rosa 桃山　CT(0) TB(0)
2009/09/08　投稿者：marli
桃山薔薇の品種名・登録作出者名・登録作出年・系統Rosa Momoyama京阪園芸（日本）1981年class.:Hybrid Tea
　カテゴリ：街に出て植栽を見よう::初夏のバラ園
Rosa カルディナール　CT(0) TB(0)
2009/09/08　投稿者：marli
カルディナール薔薇の品種名・登録作出者名・登録作出年・系統Rosa KardinalR.コルデス（ドイツ）1986年class.:Hybrid Tea
　カテゴリ：街に出て植栽を見よう::初夏のバラ園
Rosa 金閣　CT(0) TB(0)
2009/09/08　投稿者：marli
金閣薔薇の品種名・登録作出者名・登録作出年・系統Rosa Kinkaku京阪園芸（日本）1975年class.:Hybrid Tea
　カテゴリ：街に出て植栽を見よう::初夏のバラ園

最初｜前| 1 | 2 | 3 | 4 |次｜最後


このサンプルは次のような前提で作られています
・・・・設定画面でサムネイルサイズを縦横最大100pxに指定
・・・・設定画面で画像のクラスを.uoimg_gzlistと指定

■長方形表示の　HTML記述サンプル（便宜上、色分けしてあります）
<!-- 画像付き記事一覧 start -->
{UOIMGLIST}
<div class="uoimg_title"><u>{UOIMGLIST_C_TITLE}　一覧</u></div>
{UOIMGLIST_PAGE1}
<div class="uoimg_pager">
{UOIMGLIST_PAGE_FIRST}最初{/UOIMGLIST_PAGE_FIRST}｜
{UOIMGLIST_PAGE_BEFORE}前{/UOIMGLIST_PAGE_BEFORE}
{UOIMGLIST_PAGE_LIST}
{UOIMGLIST_PAGE_NEXT}次{/UOIMGLIST_PAGE_NEXT}
｜{UOIMGLIST_PAGE_LAST}最後{/UOIMGLIST_PAGE_LAST}
</div>
{/UOIMGLIST_PAGE1}
<div class="uoimg_listloop">
{UOIMGLIST_LOOP}
<div class="photodiv1b">
<div class="photodiv2b">{UOIMGLIST_IMG}</div>
<div class="photocom1b">
<b>{UOIMGLIST_TITLE}</b>{UOIMGLIST_CMT}　CT({UOIMGLIST_CMTCNT}){/UOIMGLIST_CMT} {UOIMGLIST_TRK}TB({UOIMGLIST_TRKCNT}){/UOIMGLIST_TRK}
</div>
<div class="photocom2b">
{UOIMGLIST_YMD}Y/m/d{/UOIMGLIST_YMD}
{UOIMGLIST_USER}　投稿者：{UOIMGLIST_USERNAME}{/UOIMGLIST_USER}
</div>
<div class="photocom3b">{UOIMGLIST_OUTLINE}</div>
<div class="photocom4b">
{UOIMGLIST_CATEGORY}　カテゴリ：{UOIMGLIST_CATEGORYNAME}{/UOIMGLIST_CATEGORY}
</div>
</div>
{/UOIMGLIST_LOOP}
<br clear="all" />
</div>
{UOIMGLIST_PAGE2}
<div class="uoimg_pager2">
{UOIMGLIST_PAGE_FIRST}最初{/UOIMGLIST_PAGE_FIRST}｜
{UOIMGLIST_PAGE_BEFORE}前{/UOIMGLIST_PAGE_BEFORE}
{UOIMGLIST_PAGE_LIST}
{UOIMGLIST_PAGE_NEXT}次{/UOIMGLIST_PAGE_NEXT}
｜{UOIMGLIST_PAGE_LAST}最後{/UOIMGLIST_PAGE_LAST}
</div>
{/UOIMGLIST_PAGE2}
{/UOIMGLIST}
<!-- 画像付き記事一覧 end -->
■長方形表示の　CSS記述サンプル （便宜上、色分けしてあります）
/* 画像つき記事一覧モジュール */

.uoimg_title { width:546px; margin:6px auto 6px auto; padding:0px; font-weight:bold; color:#000000; text-align:center; height:auto; }
.uoimg_listloop { width:546px; margin-left:auto; margin-right:auto; }
.photodiv1b { width:546px; height:100px; margin:5px 0px; font-size:9pt; color:#333333; text-align:left; border:1px solid #ffffff; float:left; clear:none; }
.photodiv2b { width:100px; height:100px; margin:0px 10px 0px 0px; background-color:#000000; float:left; }
.photocom1b { width:431px; height:14px; margin:5px 5px 0px 0px; font-size:9pt; color:#333333; text-align:left; float:left; }
.photocom2b { width:421px; height:14px; margin:5px 5px 0px 10px; font-size:9pt; color:#333333; text-align:left; float:left; }
.photocom3b { width:431px; height:28px; margin:5px 5px 0px 0px; font-size:9pt; color:#333333; text-align:left; float:left; }
.photocom4b { width:431px; height:14px; margin:5px 5px 0px 0px; font-size:9pt; color:#333333; text-align:right; float:left; }
.uoimg_pager1 { width:546px; margin:0 auto 10px auto; padding:0px 0px 6px 0px; color:#333333; text-align:center; font-size:12px; border-bottom:1px dashed #666666; }
.uoimg_pager2 { width:546px; margin:10px auto 0px auto; padding:6px 0px 0px 0px; color:#333333; text-align:center; font-size:12px; border-top:1px dashed #666666; }
.uoimg_gzlist { margin-left:auto; margin-right:auto; display : block; }
このページは博物雑記のモジュール紹介記事にリンクしています　http://zakki.partials.net/index.php?e=1253