広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【WordPress】「モバイルでは縦に並べる」うっかりオンにしてた件。修正大変

WordPress

「WordPress」のアイコン画像

この記事では、WordPressのブロックエディターでこれまで「メディアとテキスト」の「モバイルでは縦に並べる」をオンにしちゃってた件について書きます。

オフにすることで僕の理想通りの見た目になりました。

【WordPress】「モバイルでは縦に並べる」うっかりオンにしてた件。修正大変

僕がWordPressで書いている当サイト(ナポリタン寿司のPC日記)は、記憶上必ず冒頭に「メディアとテキスト」ブロックを挿入しています。多分例外の記事はないと思います。

WordPressのブロックエディターで「ナポリタン寿司のPC日記」が毎回冒頭に挿入している「メディアとテキスト」画像

画像と文章を横並びで配置できるブロックです。

調べたところテーマの違いなのか分かりませんが、カラムブロックって呼んでいる方も結構いらっしゃいました。僕が使っているLuxeritasテーマ上では「メディアとテキスト」という表記なので本記事でもそう呼びます。

記事の最初に挿入して、画像は紹介しているソフトや拡張機能などのアイコン、文章は「本記事では」から始まる一言メッセージにしています。

すごく便利で重宝しているブロックですが、スマホで見た時に一点困ったことがありました。これまではごまかして何とか使っていて、2024年12月にふと設定を見たところ「ふぁーw」となったので記事にします。

メディアとテキストの「モバイルでは縦に並べる」をオンにした場合

スマホで見た時大きくて見にくかった

「メディアとテキスト」ブロックはPCで見た時は特に違和感ありません。問題はスマホ(モバイルデバイス)で見た時です。

下記画像のように画像と文章が横並びではなく縦並びになり、さらに画像が文章の横幅に合うよう拡大されています。

WordPressのブロックエディターで挿入した「メディアとテキスト」がスマホ表示では縦並びになって見にくい画像

当サイトが使うメディアとテキストの画像部分は記事に関連している物のアイコン画像と決めているので基本小さいです。小さくていい画像になっています。拡大して見たい時なんかないです。

それなのに強制的にスマホの横幅いっぱいに拡大されてしまい、その分スクロール(スワイプ)量が増えてしまいます。見にくいし記事本文の邪魔だしで、当サイトの相性的にはいいこと一つもないです。

CSSで無理やり小さくしていた

当サイトはPC関連の記事ばかりなので、読者さんのそうも基本PCです。今のブログはスマホから見る読者が多いのが一般的らしいですが、当サイトの場合はデータを見る限りPCからの閲覧が多いです。

そのためスマホから見た時のデザインは最悪後回しでもいい…って、んなわけないです。優先度的にはやっぱり大多数のPCですが、できることならスマホから見た時も快適にしたいです。全体の割合的には少ないけど月に数十人もいたら人数的には見過ごせないです。

以上の考えから色々試行錯誤はしていたんですが、どうにもスマホだけ縦並びを解除するというのが当時の僕の力では無理でした。

これまでどうしてたかというと、以下のようなCSS(サンプル)で無理やりスマホから見た時、アイコン画像のサイズを小さくしていました。

CSS
@media screen and (max-width: 670px) {
    .wp-block-media-text>.wp-block-media-text__media img {
        width: 3em
    }
}

@media screen」で発動条件を指定の横幅以下のデバイスで見た時に制限して、「メディアとテキスト」の画像(.wp-block-media-text__media img)の横幅(width)を小さくする…という形です。

スマホ(モバイルデバイス)で見た時、画像がぎゅっと縮小されて表示されます。スクロール量に影響しないようにしていました。

WordPressのブロックエディターで挿入した「メディアとテキスト」をスマホから見た時だけCSSでサイズ調整した画像

記事本文からはみ出た左上という場所に表示されていたので、見た目的にはちょっと違和感だったかもしれません。少なくとも僕はそう思っていました。

できることなら文章の横にぎゅっと押し込みたかったです。理想はWord(ドキュメント)であるドロップキャップっていう機能です。一文字目を大きくする装飾のやつ。

ただまぁひとまずこれで我慢していました。

オフにしたら僕の理想の表示になった

設定の存在に気づいた

2024年12月にふっとよく「メディアとテキスト」の設定を見てみたんですよね。そしたらサイドバーの設定内に「モバイルでは縦に並べる」という項目があることに気づきました。

WordPressの「メディアとテキスト」設定にある「モバイルでは縦に並べる」項目画像

気づいた…というかこれまでも多分ずっとありました。あった気がしています。

ブログを始めたばかりの僕は当時書かれている内容がよく理解できておらず、とりあえずオンにしていました。もしかしたらデフォルトでオンだったかも。

とにかくオンの状態でそれ以降、WordPressのパターン機能(あらかじめ複数のブロックを組み立てて一発で呼び出せる機能)や、「Yoast Duplicate Post」プラグインの複製機能を使って記事を書いていました。

そのためゾンビみたいにどんどん感染(複製)して、結果当サイトの記事は全て「メディアとテキスト」の「モバイルでは縦に並べる」がオンになっていました。はぁ…くそぉ~…。

サイドバーの設定から個別にオンオフできる

WordPressの記事編集画面(ブロックエディター)を開きます。ブロックの追加→一覧に「メディアとテキスト」がなかったら「すべて表示」をクリックします。

WordPressのブロックエディターで利用可能な全てのブロックを表示する手順画像

左側サイドバーですべての利用可能なブロックが表示されるので「メディアとテキスト」を探してクリックします。

WordPressのブロックエディターで「メディアとテキスト」を挿入する手順画像

挿入できたらブロックを選択します。右側サイドバーが表示されるので上部の投稿タブではなくブロックタブが選択されていることを確認します。設定内にある「モバイルでは縦に並べる」をオフにします。

WordPressのブロックエディターで挿入した「メディアとテキスト」の「モバイルでは縦に並べる」をオンオフする手順画像

理想の表示

オフにした記事を確認してみたら以下画像のような見た目になりました。「メディアとテキスト」ブロックがPCから見た時と同様横並びで表示されます。

「メディアとテキスト」の「モバイルでは縦に並べる」をオフにしたスマホ表示画像

僕的には「これやん。これが僕のまぁまぁの理想状態やん。これまで設定に気づかず無理やりCSSでどうにかしようとしてたけど最初からこれで良かったやん」となりました。

しいていうならスマホというただでさえ横幅が狭いデバイスなのに、縦並びではなく横並びにすることでよりテキストがぎゅっとなってしまい見にくくなってしまう問題点があります。PCとはわけが違います。

WordPressの「メディアとテキスト」のテキスト部分左右にある余白具合画像

対策としてテキストの左右にあった余計な余白をCSSで削りました。以下はあくまで僕の環境(テーマとか)で使えるCSSなので皆さんの環境で使えるかは不明です。

CSS
@media screen and (max-width:670px) {
    .wp-block-media-text {
        grid-template-columns: 10% auto !important;

        &>.wp-block-media-text__content {
            padding: 0 3% !important
        }

        &>.wp-block-media-text__media img {
            width: 3em
        }
    }
}

width: 3em」は「モバイルでは縦に並べる」設定項目を知らなかった時の苦肉の策で書き込んだものなので、設定の存在を知った今消したいんですが、今消してしまうと修正しきれてない過去の膨大な記事がスマホで見た時大きくて見にくかった見出しで紹介した見た目になってしまうので消していません。

修正が完成したら…というか完成する見通しが全くないので多分仕方ないけど書きっぱなしかなぁ…。

感想

以上、WordPressのブロックエディターでこれまで「メディアとテキスト」の「モバイルでは縦に並べる」をオンにしちゃってた件でした。

これからの記事はいいとして過去記事をほんとにどうするか…。一括でオンオフ設定できたら最高なんですが、ブロックの設定に関しては文章置換プラグイン「Search Regex」みたいなのはないですよねぇ…。困ったもんだ。

WordPress

Posted by ナポリタン寿司