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

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

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

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

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

目次

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

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

サンプル画像A
サンプル画像B

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

サンプル画像A
サンプル画像B

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

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

  • ギャラリーを使う スマホで横並び可能
  • カラムを増やす スマホで横並び不可

それぞれ解説します。

ギャラリーを使う

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

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

STEP

記事投稿画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

ブロックのデザイン内にあるギャラリーをクリックする

「ギャラリー」がある場所
STEP

ギャラリーブロック内のアップロードもしくはメディアライブラリをクリックして、画像を挿入する

「アップロード」「メディアライブラリ」がある場所
STEP

1枚目の画像が挿入された!

画像A
かめコンパス

画像をもう1枚挿入していくよ

STEP

先ほど挿入した画像をクリックし、出てきたツールバーのギャラリーを選択をクリック

「ギャラリーを選択」がある場所
STEP

ツールバーの追加をクリック⇒アップロードもしくはメディアライブラリをクリックして、もう1枚画像を挿入する

「アップロード」「メディアライブラリ」がある場所
STEP

2枚の画像が横並びに表示された!

画像A
画像B

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

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

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

STEP

1枚の画像を選択し、ギャラリー設定の順にクリックする

設定がある場所
STEP

ブロックの設定内にある「カラム」を2以上にする

カラム数を変更する場所
STEP

2枚の画像が横並びに表示された!

画像A
画像B

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

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

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

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

画像を3枚横並びに設定した場合のパソコンでの表示の仕方
パソコン画面
画像を3枚横並びに設定した場合のスマホでの表示の仕方
スマホ画面

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

カラムを増やす

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

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

STEP

記事投稿画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

ブロックのデザイン内にあるカラムをクリックする

「カラム」がある場所
STEP

カラムブロック内のパターン50/50を選ぶ

「50/50」がある場所
STEP

表示されたカラムブロックの+をクリック⇒検索窓に「画像」と入力⇒画像をクリックする

「画像」がある場所
STEP

左側に画像が表示される。右側もSTEP4と同じ手順をふむ

左側に画像が表示された様子と「画像」がある場所
STEP

2枚の画像が横並びに表示された!

画像A
画像B

スマホでは画像が横並びに表示されません。

スマホでも画像を横並びにさせたい場合は、先ほど紹介したギャラリーを使ってください。

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

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

メリット
デメリット
  • 画像で比較説明したいとき、横並びだと見やすい
  • 画面を上下にスクロールせず、複数枚の画像をいっぺんに見れる
  • スマホだと画像が小さくなりすぎて見づらくなる
  • 画像が小さくなるので、画像内の文字が読みづらくなる

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

まとめ

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

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonで画像を横並びに表示させる方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次