Yet Another Photoblogを使用してギャラリーページを作成する

　ブログサイトって管理側は楽ですが、その性質上一覧性がなく、閲覧する側としては見づらいと敬遠されがちですね。
　それを解決しようという試みがこの記事です。

　うちのサイトのイラストページの作成方法を紹介します。

1. 「イラスト」カテゴリを作成
2. 「イラスト」の子カテゴリを作成（「オリジナル」、「版権」などなど）
3. 「イラスト」カテゴリのテーマファイルを作成（詳細は下記）

1.「イラスト」カテゴリのテーマファイルを作成

「イラスト」カテゴリのページ、テーマファイルcategory-n.php（nはカテゴリーID）にはアーカイブを表示させるのではなく、サムネイルリストを表示します。（左図参照）

　サムネイルのスタイルは以下の3つから選べます。

　下のソースをイラストの子カテゴリ数に応じてコピペします。
　子カテゴリはカテゴリースラッグで呼び出しますので、ご自分の設定に合わせて変えてください。

<?php
// ■ 初期設定
$thumb_w = 100; // サムネイル横幅
$thumb_h = 100; // サムネイル高さ
$show_no = 10; // 表示件数
$style = 'far'; /* 表示スタイル
                   なし : 指定した幅と高さに収まるように縦横比を維持
                    far : 画像の全体を表示、足りない部分は任意の色($bgcolorで指定)で補完
                     zc : 指定した幅と高さに画像を詰める(表示部分は画像中央)
                  */
$bgcolor = 'ffffff'; // 表示スタイルが far のときの補完色

// 初期設定ここまで

if ( !empty($style) ) {
  if ( $style=='far' ) {
    $style_comp = 'far=1' . 'bg=' . $bgcolor;
  } elseif ( $style=='zc' ) {
    $style_comp = 'zc=1';
  } else {
    $style_comp = '';
  }
}

$thumbnailConfig = array('w=' . $thumb_w , 'h=' . $thumb_h , 'fltr[]=usm|30|0.5|3' , $style_comp);
?>
<!-- ここから下をコピー＆ペーストしてカテゴリーを増やしてください。 -->
<?php
// ■ カテゴリースラッグ設定
$illust_cat = "original";

query_posts(array( 'category_name'=>$illust_cat , 'showposts'=>$show_no ));

if (have_posts()) :
    $cat_id = get_category_by_slug($illust_cat)->cat_ID;
    $cat = get_category($cat_id);
    $cat_count = intval($cat->category_count);
?>
  <div class="post" id="<?php echo $illust_cat; ?>">
    <h3><?php single_cat_title(); ?> (<?php echo $cat_count; ?>)</h3>
    <div class="category_desc">
      <?php print category_description($cat_id); ?>
    </div>
    <div class="entry">
<?php
    while (have_posts()) : the_post();
        if ($post->image):
?>
	  <dl title="<?php the_title() ?>">
		<dt><a href="<?php the_permalink(); ?>"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" width="<?php echo $post->image->getThumbnailWidth($thumbnailConfig); ?>" height="<?php echo $post->image->getThumbnailHeight($thumbnailConfig); ?>" /></a></dt>
		<dd><?php the_title() ?></dd>
	  </dl>
<?php
        endif;
    endwhile;

    if(intval($cat_count) > $show_no) :
?>
	  <dl class="view_all">
		<dt><a href="<?php echo get_category_link($cat_id); ?>">View All</a></dt>
		<dd>(<?php echo $cat_count; ?>)</dd>
	  </dl>
<?php endif; ?>

    </div><!-- /entry -->
  </div><!-- /post -->
<?php endif; ?>

　スタイルは以下のソースをご利用中のテーマのCSSファイルに書き加えてください。
　カスタマイズはご自由にどうぞ。

/* ----------------------------------------
illust section
---------------------------------------- */
.content_desc {
	margin : 2em 0px;
}

div.content_desc img {
	float : left;
	margin : 0px 5px 5px 0px;
}

.post {
	clear : left;
}

.entry dl {
	float : left;
	margin : 5px;
	padding : 0px;
}

.entry dt {
	text-align :center;
}

.entry dt a img {
	border : solid 1px #36A7E2;
}

.entry dt a img:hover {
	border : solid 1px #ff8000;
}

.entry dd {
	height : 3em;
	width : 110px;
	overflow : hidden;
	margin : 0px;
	padding : 0px;
	text-align :center;
}

.entry ul:after {
	display : block;
	height : 0;
	clear : both;
	content: "";
}

p.category_desc {
	margin : 5px 10px;
}

※この記事は以下の記事に修正を加え再録したものです。下記のURLからアクセスした場合はこちらにリダイレクトするように設定しています。
[Title] Yet Another Photoblog 使用時のテーマ ≪ Blog ≪ LOVING CAT
[URL] http://lovingcat.net/2007/07/25/yapb-theme/

※2009-11-02 : 記事を修正しました