目次

  1. ギャラリー表示とは？
  2. ギャラリーのスタイルを自分で定義する方法
    1. デフォルトのスタイル出力を停止する
    2. 自分で定義する

 

1. ギャラリー表示とは？

アルバムのインデックス

ギャラリー表示は、画像のサムネイルをキャプション付でダーっと並べて表示する機能です。

gallery_screenshot_col4

 

ギャラリーは投稿編集画面から、メディアを追加ボタン＝＞ギャラリーを作成＝＞写真を選択…と操作することで、簡単に投稿に挿入することができます。

画像は横１列から９列まで選択することができます。デフォルト設定は次のような３列表示です。

gallery_screenshot_col3

 

2. ギャラリーのスタイルを自分で定義する方法

ギャラリーのスタイルは、WordPressが自動的に出力してくれます。そのため、自分でスタイルを定義するためには、

  • ギャラリーのスタイル出力を停止する
  • ギャラリーのスタイルをスタイルシートに書く

の２つを行います。

デフォルトのスタイル出力を停止する

functions.phpに次の１行を挿入するだけでOKです。

functions.php（追記）
 add_filter( 'use_default_gallery_style', '__return_false' );

 

自分で定義する

ギャラリー出力HTMLに付加されるclass名を使って、スタイルを定義します。

ギャラリーの構造を図にしてみました。ここでは、主なclass名のみを取り上げています。あまり複雑ではないので、一度ギャラリーを出力した場合のソースコードを確認されることをオススメします。

ギャラリーの構造_簡易版

なお、ギャラリー全体を囲うdivタグに、各カラム数（n）に応じたgallery-columns-nというクラスが出力されます。これを使って、カラム数に対応したスタイル指定をしていきます。

style.css（追記。ほんの一例）
.gallery {
    overflow: hidden;
}
.gallery-item {
    float: left;
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: 0;
}
.gallery-icon {
    text-align: center;
}
.gallery-caption {
    color: #21759B;
    font-size: 0.8em;
    margin: 0;
    text-align: center;
}
.gallery-columns-1 .gallery-item {
    width: 100%;
    margin-right: 0;
}
.gallery-columns-2 .gallery-item {
    width: 49%;
    margin-right: 1%;
}
.gallery-columns-3 .gallery-item {
    width: 32%;
    margin-right: 1%;
}
.gallery-columns-4 .gallery-item {
    width: 24%;
    margin-right: 1%;
}

ここでは、１〜４列表示まで対応できるようにしてみました。dl.gallery-itemの幅が指定した列数で等分割になるようにしました。

なお、WordPress公式から配布されるTwenty Thirteen/Twelve…には、それぞれのテーマ独自のギャラリーのスタイルがつくられているので、一度見てみると参考になります。

関連記事

Codex

 

「index.phpをカスタマイズする」の記事