こんにちは、つむぎゆりです!
今回は、FooGalleryがモバイルで表示されない対処法を、コードをコピペするだけで解決する方法を紹介します。
FooGallery有料版購入レビュー↓
WooCommerceの紹介↓
個別ページごとにメニューを変えられるプラグイン↓
モバイル表示が反映されない解決方法
結論ですが、「Gallery Settings」を「Masonry Image Gallery」にして、下記のコードをCustom CSSに貼りつけてください。
@media screen and (max-width: 480px) {
.foogallery.fg-masonry.fg-col5 .fg-item {
width:32.66%;
}
.foogallery.fg-masonry.fg-col5 .fg-column-width {
width:32.66%;
}
}
ちなみに、上のcolのあとの数字と、Masonry Layoutのカラム数は同じほうがいいでしょう。
上記をChromeで日本語訳すると、「ギャラリー設定」を「組積造画像ギャラリー」にし、「組積造のレイアウト」をcolのあとの数字と合わせてください。
実際に設定したサイト
上記は僕の昔のサイトなのですが笑、こちらをモバイルで見ればしっかり設定されていると思います。
もしうまく設定できていない場合、「Thumb Widlth」(日本語訳は親指の幅)を250にしてみてください(あまり関係ないかも)
それでも解決しない場合や他の不具合があったら
FooGalleryはわりと(わりとって言い方もあれだけど)サポートがしっかりされていて、サポートフォーラムで質問したり、検索すれば解決する場合が多いです。
…というか、実は上のコードもサポートフォーラムを探してなんとか見つけたものでした笑
ちなみに公式の問い合わせはこちら↓(先にサポートのほうがいいかも)
サポートフォーラムへの質問の仕方
Google翻訳にかけた英語でぜんぜん親切に対応してもらえます。
また、本家のサポートフォーラムはスクショも見てもらえたりするので、大抵の不具合は相談することが可能です。
まとめ
以上、FooGalleryがモバイルで表示されない対処法でした!
僕がサイトを作っているとき、これがうまくいかなくて本当に苦労したので、何かの助けになれば幸いです。
ちなみに上記の方法をやってだめだった場合、この方法に限らず1度キャッシュを消してから再度確認してみたください(もしくはシークレットブラウジングなどで)。