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

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

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

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

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

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

イラストページ(サムネイルを表示)

イラストページ(サムネイルを表示)

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

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

サムネイル設定:なし

サムネイル設定:なし
指定した幅と高さに収まるように縦横比を維持


サムネイル設定:far

サムネイル設定:far
画像の全体を表示、足りない部分は任意の色($bgcolorで指定)で補完


サムネイル設定:zc

サムネイル設定:zc
指定した幅と高さに画像を詰める(表示部分は画像中央)


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

<!-- ここから下をコピー&ペーストしてカテゴリーを増やしてください。 -->

 スタイルは以下のソースをご利用中のテーマの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 : 記事を修正しました

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

Search
Feeds
Meta

Return to page top