WordPress標準のギャラリーのCSSをカスタマイズする方法

WordPressには、記事内に複数の画像を並べて表示できる「ギャラリー」という便利な機能があります。ギャラリー機能を使えば、横並びの画像配置も超簡単にできます。プラグインなんか使わなくても問題ナシです！！

しかし、そのギャラリー機能は、デフォルト状態だとモッサイ囲み線がついていたり、余白が不自然だったりして、せっかく便利なのに使いたくない感がこみ上げてみます。

今回はそんな【Wordpress 標準機能であるギャラリーの CSS をカスタマイズして、ついでにレスポンシブ対応も行う方法】を紹介したいと思います。

実は WordPress のギャラリー機能はかなり使えるんです！

WordPress 4.6 以前までは、ギャラリーを配置しても、ビジュアルエディターには何の画像を使用したのか表示されませんでした。

しかし、現在の WordPress ではギャラリーを配置すると、使用した画像がすべてビジュアルエディタに表示されますので大変使いやすくなっています。

こんな感じで確認しやすいのです。

また、画像の入れ替え作業なども大変やりやすくなっていて、記事内への画像の横並びや複数並べて配置も簡単に行なえるようになりました。

ただ、デフォルトのギャラリーデザインでは正直つかう気にはならないほどダサいのです・・・そこで今回の「ギャラリーカスタマイズ」ということになるわけです。

ギャラリーのCSSについて

ギャラリーのレイアウトを決定する CSS は WordPress 本体の中に格納されています。それをいじってしまいますと、Wordpress をアップグレードしたときにまたデフォルトに戻ってしまいますから、利用中のテーマの style.css で編集できるようにします。

1：準備 – function.php に追記

お使いの「Wordpress」テーマフォルダの中に【 function.php 】があると思います。そこに以下のコードを追加します。ダッシュボードからカスマイズする場合は「外観→テーマ編集→function.php」。

これでまず本体のギャラリー用CSSを使わない設定にしてあげます。

これをやっておかないと、いくら CSS をカスタマイズしてもギャラリーには反映されませんのでご注意です。

2：ギャラリーの構造

WordPress のギャラリー機能の構造はこんな感じです。

自動的にこのコードが吐き出されてギャラリーが構築されます。したがって、ギャラリーをカスタマイズするには、吐き出された class をそのまま編集する必要があります。

ポイントはギャラリー包括 div の “gallery-columns-3” の数字の部分が、カラム数を変更すると変化することです。4カラムなら “gallery-columns-4” となります。

3：ギャラリースタイルの設定

構造がわかったところで、次はギャラリーCSSのカスタマイズです。

同テーマ内にある【 style.css 】に以下のコードを追加します。やはりダッシュボードからカスマイズする場合は「外観→テーマ編集→style.css」。

当ブログで利用している CSS をそのまま貼り付けました。各 class の役割をコメントしておいたので、ご自分の環境に対応したカスタムをしてくださいね！

この CSS に記述されている Class は全てギャラリー機能を使用した時に WordPress が自動的に吐き出すものです。Class名を変更すると動かないので注意してください。

一番下の「@media screen ～」は画面解像度 640px 以下用のモバイル閲覧設定です。

これで WordPress のギャラリーレイアウトがカスタムされたはずです。

今回のカスタムでギャラリーはどのように見えるのか

実際に本ブログでは、上のCSSを使ってギャラリーをカスタムしているので、以下で表示してみますね。今回のCSSでは5カラムまでカスタマイズしてあります。

2カラム表示

2カラム・フルサイズ設定です。モバイル表示でも2カラムです。

画像を左右に横並びさせたいときに便利なカラム数ですね。

2カラムでキャプションを表示させれば、商品紹介やノウハウ解説などでも役にたちそう。ビフォー・アフター画像なんかでも使えますよね。

3カラム表示

3カラム・フルサイズ設定です。キャプションもいれてみました。

モバイル表示だと3カラムは小さいので、今回のカスタマイズでは画面が 640px 以下だと2カラムになるようにレスポンシブ設定しています。ブラウザの幅を狭めてチェックしてみてください。

4カラム表示

4カラム表示・フルサイズ設定です。投稿エリア幅の長さにもよりますが、フルサイズ設定はこの辺が限界ですしょうか。これ以上小さくなるのはアレですね。

4カラム表示もモバイルだと2カラム表示になるようにカスタムしています。

5カラム表示

5カラム表示・サムネイルで設定しました。5カラムはサムネイル表示が良さげです。サムネイル設定だと縦撮り写真も使えます。

この5カラムはサムネイル設定専用として使っています。5カラムはモバイル表示だと小さすぎるので、640px 以下は3カラムになるように設定しています。

本カスタマイズの注意点

基本的に4カラムまでは「フルサイズ」設定がおすすめです。しかし、フルサイズ設定は画像の縦横が同じものを配置しないと型崩れを起こすという欠点があるので注意してください。特に縦長画像を使うのはNGです。

また、「サムネイル」設定は2カラム・3カラムで使うと画像がガビガビになってしまう為、サムネイル設定でギャラリーを作るなら5カラムがおすすめです。

あとがき

最近のギャラリー機能は使い勝手が向上してて、複数画像を記事に配置するときにはとても便利です。今回紹介のCSSはレスポンシブ対応ですから結構使えると思うんだよなっ！！

また、仕事で WordPress ウェブサイトを作ったとき、クライアントが横並び画像を配置するときに、下手に小細工するよりも、実のところギャラリー機能の方がよっぽど簡単にやれるということを最近発見しました。

兎にも角にも意外と便利なWordpressのギャラリー機能、ぜひ使ってみてくださいね！！