Single Post
WordPressのギャラリーをカスタム
ウェブサイトをクライアント様に納品させて頂くとき、ギャラリー機能を使用でき、さらにギャラリーを作った時点でレスポンシブル対応になるようにしております。その方法とコードを掲載致します。
まず最初にギャラリーを挿入すると自動的にCSSが記載されるので、body内のcssを無効にするようにfunctions.phpに下記を掲載します。
add_filter(
"use_default_gallery_style",
"disable_default_gallery_style"
);
function disable_default_gallery_style() {
return false;
}
今回は、3カラムでギャラリーを挿入した場合のcssを掲載しております。
#gallery-1 {
margin: 30px auto;
}
#gallery-1 .gallery-item {
float: left;
text-align: center;
width: 33%;
margin: 10px auto;
}
#gallery-1 img {
border: 0;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
@media screen and (max-width:480px) {
#tm-blog .tm-row .tm-logo-client ul li.last{
padding-right: 10px;
}
#gallery-1 .gallery-item {
float: none;
margin: 15px auto;
text-align: center;
width: 100%;
}
#gallery-1 img {
border: none;
}
}
まとめ
ギャラリー機能は、とても便利な機能ですが、デフォルトだと見た目があまり宜しくないので、あらかじめカスタムしてクライアント様に納品すると喜ばれると思います。まぁ～デフォルトを知らないクライアント様が殆どなので、気付かれない場合が殆どですがｗギャラリーにlightboxなどポップアップ系のプラグインを入れておくと尚良いと思います。
