Image archive page

2009/01/27 2 コメント カテゴリ: WORDPRESS

thumbnail-archive_preview

thumbnail-archive_preview


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

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

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

image-archive_preview

image-archive_preview

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

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

PLAIN TEXT
CSS:
  1. .kougabu .gallery-item {
  2.     background: #fff;
  3.     float: left;
  4.     margin: 5px;
  5.     width: 200px;
  6.     height: 200px;
  7.     display: block;
  8.     overflow: hidden;
  9. }
  10.  
  11. .kougabu .gallery-icon {
  12.     display: table-cell;
  13.     text-align: center;
  14.     vertical-align: middle;
  15.     width: 200px !important;
  16.     width: auto;
  17.     height: 180px !important;
  18.     height: auto;
  19. }
  20.  
  21. .kougabu .gallery-icon a {
  22.     background: #fff;
  23. }
  24.  
  25. .kougabu .gallery-icon img {
  26.     margin: 0;
  27. }
  28.  
  29. .kougabu .gallery-caption {
  30.     color: #333;
  31.     font-size:12px;
  32.     text-align: center;
  33.     line-height:1;
  34.     padding: 0 5px;
  35.     margin: -10px 0 0 0;
  36.     display: block;
  37.     height: 25px;
  38. }
  39.  
  40. .kougabu br {
  41.     display: none;
  42. }

IE用

PLAIN TEXT
CSS:
  1. .kougabu .gallery-item {
  2.     display: inline;
  3.     text-align: center;
  4.     vertical-align: text-top;
  5.     line-height: 200px;
  6.     overflow: hidden;
  7.     width: 200px;
  8.     height: 200px;
  9.     zoom: 1;
  10. }
  11.  
  12. .kougabu .gallery-icon {
  13.     vertical-align: middle;
  14.     display: inline;
  15.     width: auto;
  16.     height: auto;
  17.     zoom: 1;
  18. }
  19.  
  20. .kougabu .gallery-icon a {
  21.     background: #fff;
  22. }
  23.  
  24. .kougabu .gallery-icon img {
  25.     vertical-align: text-top;
  26. }
  27.  
  28. .kougabu .gallery-caption {
  29.     color: #fff;
  30.     font-size:12px;
  31.     text-align: center;
  32.     line-height:1.2;
  33.     padding: 2px;
  34.     display: block;
  35.     height: 30px;
  36.     background-color: #2E2E2E;
  37.     vertical-align: bottom;
  38.     margin-top: -15px;
  39.     margin-right: 0;
  40.     margin-bottom: 0;
  41.     margin-left: 0;
  42.     border-bottom-width: 1px;
  43.     border-bottom-style: solid;
  44.     border-bottom-color: #FFFFFF;
  45.     border-right-width: 1px;
  46.     border-left-width: 1px;
  47.     border-right-style: solid;
  48.     border-left-style: solid;
  49.     border-right-color: #FFFFFF;
  50.     border-left-color: #FFFFFF;
  51. }

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

2 レスポンス

コメントする

  1. ひろまささん、こんばんは。
    はるばるコメント、ありがとうございます。
    PHPの知識も全く無い私なのですが、教えていただいた意味は理解できました。
    image フォルダには maru の他に kaku も用意されていたんですね！
    resize.php の maru を　kaku にするだけで、 kaku の画像を読み込んでくれました。
    ということは、_の前に、 kuro 等で画像を用意すればいい訳ですね！　
    とても勉強になりました。ありがとうございます。
    そして、ひろまささん、ステキ！

    返信
    Rika 2009 1 28 at 23:17 パーマリンク

  2. こんにちは!。 :-)
    さすが CSS うまいですね〜。　試していただいてありがとうございます！
    wp-kougabu/images フォルダに枠線入っていますので、フレームもサイトにあったのをつくれます。 maru_ となっているのがそれです。
    wp-kougabu-resize.php の上の方で maru を定義している箇所があるのでそこを変更すると、任意のフレームセットをみにいきます。良ければお試しください。 :D

    返信
    ひろまさ 2009 1 27 at 23:39 パーマリンク

コメントをどうぞ

Commenter Gravatar