PC・デジモノ・旅行など他にも色々語りたいブログ

Sponsor link

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

      2016/12/06

midashi-wordpress

WordPressには、記事内に複数の画像を並べて表示できる「ギャラリー」という便利な機能があります。そのギャラリー機能は、デフォルト状態だとモッサイ囲み線がついていたり、下の余白が不自然だったりしませんでしょうか?

今回は【Wordpress標準のギャラリーのCSSをカスタマイズする方法】を紹介したいと思います。

Sponsor link
Sponsor link

ギャラリーのCSSについて

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

①準備

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

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

すると今までデフォルトのCSSで表示されていたギャラリーが以下の画像のように縦に並び、エライコッチャになります。ここまでが第一段階。

gll02

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

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

追加したものがわからなくならないように、一番下に追加するのがオススメです。また、このCSSは当ブログのレイアウト設定になっていて、ボーダー(囲い)なし、ギャラリーの下余白20PX・・・という感じにしてあります。

③スマートフォン用も設定しないとね

続いて、同フォルダ内にある【smart.css】にも②と同じCSSをコピペします。これを忘れると、スマートフォンサイトの方は①のエライコッチャ画像のままになってしまいますのでご注意下さい。

④確認してみよう

①~③まで完了したら表示されるレイアウトが以下の画像です。

gll01

どこをどうやったらどうなるのか?がわかりやすいようにギャラリーの造りを画像に表してみたので参照下さい。

gll03

上記CSSとこの画像を照らし合わせて、是非自分好みのギャラリーを作ってみてください。

まとめ

特にまとめるようなことはありませんが、ギャラリー機能は複数画像を記事に表示するときにはとても便利ですから是非利用していただきたいと思います♪また、この記事がお役にたったならば、TwitterやFacebookなどのSNSでシェアしていただけたらとても嬉しいです。

以上「Wordpress標準のギャラリーのCSSをカスタマイズする方法」をお送りしました~。ノシ