Cocoonを自分好みに〜ギャラリーをカスタマイズ

2022.07.25

標準のギャラリーは単純に画像を登録するだけで、サイズや余白などちょっと変えたくても何も出来ません。標準のギャラリーはバッサリと切って、CSSで自由に編集したいと思います。

標準ギャラリーの停止

まずは標準のギャラリー用CSSを使わないようにするため、｛ functions.php ｝に以下を追記（コピー＆ペースト）します。

//本体ギャラリーCSS停止 style.css設定のため
add_filter( 'use_default_gallery_style', '__return_false' );

ギャラリーのカスタマイズ

次にギャラリーのカスタマイズです。横並びの画像の数（カラム）だけ記述が必要になります。私の場合は2カラム・3カラム・8カラムの3種類記述しました。8カラムではフォントサイズを変えるためキャプションを直後に記述しています。また、モバイル用に3カラムだけレスポンシブ設定しています。
｛ style.css ｝に以下を追記（コピー＆ペースト）します。

/* ギャラリー */
.gallery { /** ギャラリーを囲むボックス **/
    width: 101%;
    overflow: hidden;
}

.gallery br {display: none;} /** 自動で挿入される clearfix の余白解除 **/

.gallery-item { /** 画像共通のスタイル **/
    margin-bottom: 5px!important;
}

.gallery-icon img {
    width: 100%;
    height: auto;
}

.gallery-caption { /** キャプション **/
    color: #505050!important;
    font-size: 14px!important;
    margin-top: -5px!important;
    margin-bottom: 5px!important;
}

.gallery-columns-2 .gallery-item { /** 2カラム **/
    width: 48%;
    margin: 0 5px;
}

.gallery-columns-3 .gallery-item { /** 3カラム **/
    width: 31.8%;
    margin: 0 5px;
}

.gallery-columns-8 .gallery-item { /** 8カラム **/
    width: 120px;
    margin: 0 1.5px;
}

.gallery-columns-8 .gallery-caption { /** 8カラム キャプション **/
    color: #505050!important;
    font-size: 13px!important;
    margin-top: -5px!important;
}

@media screen and (max-width: 640px) { /* 640px以下用の記述 */
.gallery-columns-3 .gallery-item {
    width: 48%;
    margin: 0 5px;
}

最初は8カラムのギャラリーをスマートに見せるために探し当てたのがこれで、8カラム以外使うことはないと思っていたが、ブログで2カラム3段などとして使えることが判明。なかなかいい感じでギャラリーが作れますね。

「WordPress標準のギャラリーのCSSをカスタマイズする方法」を参考にさせていただきました。

カスタマイズの感想

カスタマイズ満足度99%でしょうか。残り1%はまだ気付かない改善点があるかも知れないので。。。
諦めずにしつこく探していると、必ず解決策が見つかる。パンくずの件で、そのことをより実感出来た。

コメント