【Cocoon】画像の横並びをスマホでも可能にする方法

「画像を横並びで表示できるの？」

「パソコンでは横並び表示になるが、スマホでは縦並び表示になってしまう」

「HTMLやCSSを使わず、スマホで横並び表示させる方法はないのか？」

この記事では、そんな方に向けて、CocoonでHTML/CSSを使わずに、スマホでも画像を横並びに表示させる方法をお話しします。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

画像を「横並び」と「縦並び」にしたときの表示の仕方

2枚の画像を挿入した場合、下のように縦並びになります。

2枚の画像を横並びにすると…

Cocoonで画像を横並びで表示させる方法2選

Cocoonで画像を横並びで表示させる方法は2つあります。

それぞれ解説します。

ギャラリーを使う

スマホでも画像の横並び可能

ギャラリーの使い方は、下記の通りです。

画像が横並びにならないときの対処法

先ほど紹介した方法で画像が横並びにならない場合、カラム数を2以上に変更すると解決します。

カラム数の変更方法は、下記の通りです。

ちなみに、画像を3枚以上の横並び表示は、

• パソコンは可能
• スマホは不可

例）ギャラリーを使って、画像を3枚横並びにした場合

左側は「パソコン」画面で見た場合、右側は「スマホ」画面で見た場合です。

ギャラリーのカラム数を3以上にしても、スマホでは最大2枚までしか画像を横並びにできません。

カラムを増やす

スマホで画像の横並び不可

カラムの増やし方は、下記の通りです。

当ブログ使用「SWELL」は画像の横並びをデバイスごとで設定可能！

当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。

SWELLでは、デバイスごとに画像を何列で横並びにするか自由に設定できます。

デバイス…PC、タブレット、スマホ

例えば、以下4枚の画像を、PC4列・タブレット2列・スマホ2列のように設定できます。

※PC画面で見ると4列、タブレット・スマホ画面で見ると2列で表示されます。

また、画面の小さいスマホで2列以上に設定すると画像が小さくなってしまいます。

画像が小さくならないようスマホでも2列以上に設定したい人向けに、横スクロールで表示する機能もあります。

デバイスごとに画像の横並びの列数を細かく設定したい人は、SWELLもおすすめですよ。

スマホやPCで画像を横並びにするメリット/デメリット

スマホやPCで画像を横並びで表示させるメリット・デメリットを、私なりに考えてみました。

画像を横並びで表示させる場合、画像が小さくなるので、クリックで拡大させるよう設定しましょう。

まとめ

今回は、CocoonでHTML/CSSを使わずに、スマホでも画像を横並びに表示させる方法を紹介しました。

画像サイズがバラバラな場合は、サイズを統一して挿入しましょう。

当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。