Webの記録

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

投稿日:

この記事は約 3 分で読めます。

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

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

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



今回起きた現象

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

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


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


やってみたこと

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

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

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

// 記事の自動整形を無効にする
remove_filter('the_content', 'wpautop');
 
// 固定ページ以外は自動整形を復活させる
if ( ! function_exists( 're_wpautop' ) ) {
    add_action('wp', 're_wpautop');
    function re_wpautop() {
        if(!is_page()) add_filter('the_content', 'wpautop');
    }
}

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


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

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


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

@media only screen and (max-width: 767px) {
.single-contents br {
    display: inline!important;
}
}


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

同じような事例の方がいらっしゃないか、検索していましたが見当たらず・・・。みなさん、こんな崩れ方をしていないのかな??

ひとまず解決で、一安心です~。


-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

s3Slider.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのよ …

no image

WordPressで「ブルートフォースアタック」や辞書攻撃にあった時にやってみたこと。

この記事は約 1 分で読めます。 昨年(2013年8月)、ロリポップのレンタルサーバーでWordPressサイトへの改ざん事件がありました。 その後も、「ブルートフォースアタック」や辞書攻撃があってい …

no image

WordPressプラグイン「PhotoDropper」でフリー画像を記事にラクラク挿入♪

この記事は約 1 分で読めます。 photo credit: Remedios205 文字だらけの記事。ちょっと読むのがツライですね。。。 でも、イメージ画像がナイ!そんな時に使えそうなプラグインを探 …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …