当ブログ愛用のWordPressテーマ
広告
＼乗り換え先おすすめテーマ！／
／ブロガーとして本格的に取り組む＼
SWELLの評判レビュー記事
【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判...
Cocoonで画像を横並びにする方法3選｜スマホ・PC別で並びを切り替えできる！
「画像を横並びにしたい…」
「デバイスごとに横並びを指定できる？」
「スマホで画像を横並びにするには？」
この記事では、そんな方に向けて、Cocoonで画像を横並びにする方法を解説します。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
この記事を読めば、あなたも簡単に
- PC・スマホ別で画像を横並びにできる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、デバイスごとの見やすさを意識した画像の配置ができるようになりました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
あわせて読みたい
【Cocoon】使い方と初期設定を初心者向けに解説【WordPressテーマ】
「Cocoonの使い方が知りたい」 「Cocoonで行うべき初期設定は？」 「ブログ初心者でも分かりやすく説明してほしい」 この記事では、そんな方に向けて、WordPressテーマ…
本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！
目次
Cocoon画像を横並びにする方法3選
Cocoonで画像を横並びにする方法は以下の3つあります。
- カラムブロックを使う ※おすすめ
- ギャラリーブロックを使う
- 2カラム・3カラムブロックを使う
使用するブロックによって画像以外のコンテンツを横並びにできたり、スマホ表示でも横並びにできます。
さきにこれら3つのブロックの特徴をかんたんにまとめました。
スクロールできます
| ブロック名 | 画像の横並び | その他コンテンツの横並び | 2列表示 | 3列表示 | 4列表示 | 最大表示数 |
|---|---|---|---|---|---|---|
| カラム | 可 | 可 | PC…可 | PC…可 | PC…可 | 6列 |
| スマホ…可 | スマホ…可 | スマホ…可 | ||||
| ギャラリー | 可 | 不可 | PC…可 | PC…可 | PC…可 | 5列 |
| スマホ…可 | スマホ…不可 | スマホ…不可 | ||||
| 2カラム 3カラム | 可 | 可 | PC…可 | PC…可 | PC…不可 | 2列 |
| スマホ…不可 | スマホ…不可 | スマホ…不可 | 3列 |
※上のリンクをクリックすると気になるブロックへ移動します。
では、それぞれ詳しく解説します。
カラムブロックを使う
Cocoonのカラムブロックで画像を横並びにする方法は下記のとおりです。
STEP
+⇒カラムの順にクリックする
STEP
ページに挿入されたカラムのレイアウトを決める
今回は「50/50」を選びます。
STEP
+⇒画像の順にクリックする
STEP
以下の3つの項目から画像を挿入する
- アップロード
- メディアライブラリ
- URLから挿入
これで左側のカラムに画像を挿入できます。
右側のカラムにも同じ手順で画像を挿入しましょう。
STEP
これで画像を横並びにできます。※PC・スマホで2列表示になります。
STEP
画像を3列表示以上にしたい場合やスマホで縦並びにしたい場合
カラムブロックを選択し、設定⇒ブロックの順にクリックする
表示列数の変更…「カラム」を3~6から選ぶ
スマホで縦並びに変更…「モバイルでは縦に並べる」をONにする
これで画像を3列表示以上やスマホで縦並びにできます。
ギャラリーブロックを使う
Cocoonのギャラリーブロックで画像を横並びにする方法は下記のとおりです。
STEP
+⇒ギャラリーの順にクリックする
STEP
以下の2つの項目から画像を挿入する
- アップロード
- メディアライブラリ
メディアライブラリの場合、画像を複数選択して挿入できます。
これで画像を横並びにできます。※PC・スマホで2列表示になります。
2カラム・3カラムブロックを使う
Cocoonの2カラム・3カラムブロックで画像を横並びにする方法は下記のとおりです。
STEP
+⇒2カラムまたは3カラムの順にクリックする
今回は2カラムを使います。
STEP
ページに挿入された2カラムの左カラム内の段落ブロックを選択し、+⇒画像の順にクリックする
STEP
以下の3つの項目から画像を挿入する
- アップロード
- メディアライブラリ
- URLから挿入
これで左側のカラムに画像を挿入できます。
右カラムでも同じ手順で画像を挿入すると、PCで画像を横並びにできます。
【注意】Cocoonスマホ表示で画像の横並びは“見やすさ”に気をつける
Cocoonで画像の横並びをする場合、スマホ表示での見やすさも注意してください。
スマホで2列表示にした場合、画像が小さくなりすぎて見づらくなってしまうからです。
かめコンパス基本的にスマホでは縦並びがおすすめ！
PCでは横並び、スマホでは縦並びに設定したい場合はカラムブロックを使い、「モバイルでは縦に並べる」をONにしましょう。
どうしてもスマホ表示で画像を横並びにしたい場合は、画像のクリック拡大機能を使って見やすく確認できるようにしましょう。
当ブログ愛用「SWELL」は画像の横並びと横スクロール設定もできる！
WordPressテーマ「SWELL」ではリッチカラムブロックで画像の横並びができますが、Cocoonよりも設定できるデバイスの種類が多いです。
Cocoon
- PC
- スマホ
SWELL
- PC
- スマホ
- タブレット
デバイスごとの表示列数も指定できるので、PCでは4列・スマホやタブレットでは2列という設定も可能です。
※PC画面では4列、タブレット・スマホ画面では2列で表示されます。
かめコンパス画面の大きさが異なるデバイスごとに列数を指定できるのはありがたい！
さらに、SWELLのリッチカラムブロックには「横スクロール」機能も付いているので、例えば10列に並んだ画像を横スクロールで表示させることもできます。
スクロールできます
かめコンパスSWELLのブロック機能はとても優秀です！
SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。
Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。
Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。
引用：Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト
デバイスごとで画像の表示列数を変えたり横スクロールで表示させたい方は、SWELLをチェックしてみてください。
当ブログ愛用のWordPressテーマ「SWELL」
- プロのデザイナーが作ったかのようなオシャレなデザイン性！
- SWELL独自のブロックエディターが優秀！
- 専門家との提携でサイトの表示速度が圧倒的に速い！
- 専用プラグインでSEO評価が向上！
- 記事を書くスピードが1段階アップする！
- 計測機能付きでアフィリエイトで稼ぎやすい！
＼Cocoonからの乗り換え先おすすめテーマ！／
／使い心地バツグン！独自のブロックで利便性UP＼
Cocoon画像の横並びまとめ
今回は、Cocoonで画像を横並びにする方法を紹介しました。
本記事のおさらい
横並びにした画像のサイズがバラバラの場合は、サイズを統一させると見栄えが良くなります。
画像のサイズを変更する方法は、下の記事を参考にしてください。
当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです！
・ ・ ・
本記事はWordPressテーマ「SWELL」で作成したので、デザインが抜群にオシャレです！
当ブログ愛用のWordPressテーマ「SWELL」
- プロのデザイナーが作ったかのようなオシャレなデザイン性！
- SWELL独自のブロックエディターが優秀！
- 専門家との提携でサイトの表示速度が圧倒的に速い！
- 専用プラグインでSEO評価が向上！
- 記事を書くスピードが1段階アップする！
- 計測機能付きでアフィリエイトで稼ぎやすい！
＼もっと早く乗り換えればよかった…／
／テーマ移行も5ステップのみ！＼
この記事が気に入ったら
フォローしてね！
コメント