WordPressプラグイン「Jetpack」のギャラリーがスマホで表示が崩れたとき

曹 操 2018/03/09

WordPressのプラグイン「Jetpack」はとても多機能で、ホントにいろんなコトができて便利。

しかし、たくさんの画像をギャラリー表示をした場合、スマホのように画面サイズが狭くなったら表示が崩れてしまうことがありました。

設定の仕方で崩れが起きないケースもあると思いますが、今回と同じケースが発生した場合の備忘録としてメモします。

今回起きた現象

  • WordPressプラグイン「jetpack」で、固定ページにギャラリーを作成している
  • レスポンシブでPC表示はOK。サイズがタブレット以下で、途中に余白が入り、キレイに並ばない

ギャラリー作成時の設定画面は、こんな感じ(以下の画像を参照ください)

崩れは以下のような感じ(実際の画像がないので、イメージ画像で代用)

やってみたこと

  1. 固定ページの自動整形機能を無効にする
  2. cssでスタイルを1つ追加する

固定ページの自動整形機能を無効にする

WordPressで勝手にpタグが入ってしまう「自動整形機能」を、固定ページのみ無効にする設定を「functions.php」に以下のように記述しました。

※「WordPressで固定ページだけ自動整形フィルタ(wpautop)を無効にする|ウェブ制作者のための便利ツール カンタローCGI」さまを参考にさせていただきました。

cssでスタイルを1つ追加する

htmlをブラウザ表示で見たところ、崩れがおきるのは以下の部分だと分かりました。
(以下の画像を参照ください)

PCサイズでは表示崩れがないので、タブレットサイズ(横幅768px以下)の場合のみ、cssを追加することにしました。

これで、希望通りの表示にキレイにギャラリー画像が並んで表示できるようになりました。

 

この記事を書いた人:

曹 操

あるデザイン会社を勤めています、日々はウェブデザイン関連のコーディングやグラフィックデザインの仕事しています。

関連記事