Image archive page

このブログでは、画像を使用した投稿が多いので、画像のアーカイブページは自己満足のために置いています。
去年は、Flickr 等に載せていないプライベート写真の整理も兼ねてプラグインの NextGEN Gallery を使用し、それに少し工夫して選んだ画像に記事へのリンクを貼って写真とは別表示していました。
年始からテーマを変えたのを機に、というか、公表するような写真も特に無いし、結局整理する時間も無いままだったので、高性能な NextGEN Gallery は外しました。
外してから知った、というか久しぶりに更新して驚いたというか、gallery のショートコードの意味と attachment.php の存在！
でも、中々自分の思ったようなものを表示するには難しい。
常に同寸法の写真で投稿していれば、とても簡単で便利だと思います。
私の場合は、大きさも種類も何もかもがバラバラ。
表示したくないものもたくさん。
きれいな写真はゼロ。
ある時期から、イメージアーカイブに表示したい画像はカスタムフィールドにフルサイズとサムネイルを登録していたので、それを利用すればいいと安易に考えていたら、それが私には中々難しかったという現実。
やっと表示できたのは何故かサムネイルだけ。

カスタムフィールドからサムネイル画像一覧

Demo: Thumbnail archive | Rif.3rd
でも、これだけじゃ、何の意味も無い・・・
そしたら hiromasa さんの wp-kougabu がバージョンアップした！
私のため？　（爆）

wp-kougabu を利用して全画像一覧

Demo: Image archivies | Rif.3rd
plugin: hiromasa.another :o) » Blog Archive » wp-kougabu 1.00 bata1 リリース
全画像だと、大きさがバラバラなのが気になったので、少しCSSをいじりました。
画像の大きさは揃えられないので、それを囲むitemtagの大きさを揃え、画像を中央に置いてみました。
galleryクラスは使用していたのでkougabuクラスに変えました。
テーマ上、clear floatできないので削りました。
かなり無理があるかもしれないけど。

<br />
.kougabu .gallery-item {<br />
	background: #fff;<br />
	float: left;<br />
	margin: 5px;<br />
	width: 200px;<br />
	height: 200px;<br />
	display: block;<br />
	overflow: hidden;<br />
}</p>
<p>.kougabu .gallery-icon {<br />
	display: table-cell;<br />
	text-align: center;<br />
	vertical-align: middle;<br />
	width: 200px !important;<br />
	width: auto;<br />
	height: 180px !important;<br />
	height: auto;<br />
}</p>
<p>.kougabu .gallery-icon a {<br />
	background: #fff;<br />
}</p>
<p>.kougabu .gallery-icon img {<br />
	margin: 0;<br />
}</p>
<p>.kougabu .gallery-caption {<br />
	color: #333;<br />
	font-size:12px;<br />
	text-align: center;<br />
	line-height:1;<br />
	padding: 0 5px;<br />
	margin: -10px 0 0 0;<br />
	display: block;<br />
	height: 25px;<br />
}</p>
<p>.kougabu br {<br />
	display: none;<br />
}<br />

IE用

<br />
.kougabu .gallery-item {<br />
	display: inline;<br />
	text-align: center;<br />
	vertical-align: text-top;<br />
	line-height: 200px;<br />
	overflow: hidden;<br />
	width: 200px;<br />
	height: 200px;<br />
	zoom: 1;<br />
}</p>
<p>.kougabu .gallery-icon {<br />
	vertical-align: middle;<br />
	display: inline;<br />
	width: auto;<br />
	height: auto;<br />
	zoom: 1;<br />
}</p>
<p>.kougabu .gallery-icon a {<br />
	background: #fff;<br />
}</p>
<p>.kougabu .gallery-icon img {<br />
	vertical-align: text-top;<br />
}</p>
<p>.kougabu .gallery-caption {<br />
	color: #fff;<br />
	font-size:12px;<br />
	text-align: center;<br />
	line-height:1.2;<br />
	padding: 2px;<br />
	display: block;<br />
	height: 30px;<br />
	background-color: #2E2E2E;<br />
	vertical-align: bottom;<br />
	margin-top: -15px;<br />
	margin-right: 0;<br />
	margin-bottom: 0;<br />
	margin-left: 0;<br />
	border-bottom-width: 1px;<br />
	border-bottom-style: solid;<br />
	border-bottom-color: #FFFFFF;<br />
	border-right-width: 1px;<br />
	border-left-width: 1px;<br />
	border-right-style: solid;<br />
	border-left-style: solid;<br />
	border-right-color: #FFFFFF;<br />
	border-left-color: #FFFFFF;<br />
}<br />

全画像表示なら、画像アーカイブページとして成立します。ありがとうございました。