- 2009-01-09 (金) 17:47
- Yet Another Photoblog
ブログサイトって管理側は楽ですが、その性質上一覧性がなく、閲覧する側としては見づらいと敬遠されがちですね。
それを解決しようという試みがこの記事です。
うちのサイトのイラストページの作成方法を紹介します。
- 「イラスト」カテゴリを作成
- 「イラスト」の子カテゴリを作成(「オリジナル」、「版権」などなど)
- 「イラスト」カテゴリのテーマファイルを作成(詳細は下記)
「イラスト」カテゴリのテーマファイルを作成
「イラスト」カテゴリのページ、テーマファイルcategory-n.ph(nはカテゴリーID)にはアーカイブを表示させるのではなく、サムネイルリストを表示します。
query_postsを使うのでページ作成でイラストページを作成してそこで表示することもできるのですが、記事の所属カテゴリを表示する際にカテゴリリンクが表示される(※図1参照)ので、それを有効利用するためにこのような形をとりました。ページよりお手軽に戻り先が取得できるかもしれません ![]()

表示条件などはこんな感じです。
- サムネイルサイズ 90×90px、トリミングする
- 最大表示件数10件、それを超えると「View All」リンクを表示
- 「View All」リンクは子カテゴリのページ(テーマファイルcategory-n.ph(nは子カテゴリーID))へリンク、そこで全件を表示
下のソースをイラストの子カテゴリ数に応じてコピペします。
サムネイルの設定は最初の3行です。強調部分の数字で変更してください。
すべて同じ設定で良い場合、子カテゴリの2つめからは設定部分の最初の4行は必要ありません。
子カテゴリはカテゴリースラッグで呼び出しますので、ご自分の設定に合わせて変えてください。
サンプルファイルを置いておきますので、ご参考ください。
イラスト総合ページ用(複数カテゴリ表示)
(2.06 KB / 2009-04-24) をダウンロードする
子カテゴリ(全件表示)用
(1.15 KB / 2009-04-24) をダウンロードする
<?php
// ■ 初期設定
$thumb_w = 90; // サムネイル横幅
$thumb_h = 90; // サムネイル高さ
$show_no = 10; // 表示件数
$thumbnailConfig = array('w=' . $thumb_w , 'h=' . $thumb_h , 'fltr[]=usm|30|0.5|3' , 'zc=1');
?>
<!-- ここから下をコピー&ペーストしてカテゴリーを増やしてください。 -->
<?php
// ■ カテゴリースラッグ設定
$illust_cat = "original";
query_posts($query_string . "&category_name=" . $illust_cat . "&showposts=" . $show_no);
if (have_posts()) :
while (have_posts()) { the_post();}
$nowcat = get_the_category();
$cat_id = $nowcat[0]->cat_ID;
$cat = get_category($cat_id);
?>
<div class="post">
<h3><?php single_cat_title(); ?></h3>
<div class="category_desc">
<?php print category_description($cat_id); ?>
</div>
<div class="entry">
<ul>
<?php
while (have_posts()) : the_post();
if ($post->image):
?>
<li class="thumb_list" title="<?php the_title() ?>"><a href="<?php the_permalink(); ?>" class="illust_thumb"><img src="<?php echo $post->image->getThumbnailHref($thumbnailConfig) ?>" alt="<?php the_title() ?>" title="<?php the_title() ?>" width="<?php print $thumb_w; ?>" height="<?php print $thumb_h; ?>" /></a></li>
<?php
endif;
endwhile;
if(intval($cat->category_count) > $show_no) {
echo ' <li class="view_all"><a href="' . get_category_link($cat_id) . '">' . '<span class="guide">View All » Total:</span><span class="all_no">' . intval($cat->category_count) . '</span></a></li>';
}
?>
</ul>
</div><!-- /entry -->
</div><!-- /post -->
<?php endif; ?>
スタイルは以下のソースをご利用中のテーマのCSSファイルに書き加えてください。
カスタマイズはご自由にどうぞ。
li.thumb_list {
list-style : none;
display : inline;
}
a.illust_thumb {
display : block;
float : left;
width : 50px; /* $thumb_w の数値 */
height : 50px; /* $thumb_h の数値 */
margin : 2px;
border : solid 3px #ffffff;
}
a.illust_thumb:hover {
border : solid 3px #808080;
text-decoration : none;
}
li.view_all {
clear : left;
display : block;
}
li.view_all .guide {
display : inline;
}
※この記事は以下の記事に修正を加え再録したものです。下記のURLからアクセスした場合はこちらにリダイレクトするように設定しています。
[Title] Yet Another Photoblog 使用時のテーマ « Blog « LOVING CAT
[URL] http://lovingcat.net/2007/07/25/yapb-theme/
- Newer: 最新記事を除いた最近の記事を表示
- Older: Yet another photoblog 導入メモ
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://web.lovingcat.net/yapb-create-gallery-page/trackback/
- Listed below are links to weblogs that reference
- Yet Another Photoblogを使用してギャラリーページを作成する from LC Memo