初心者向け Cocoonで画像やテキストを横並びにする方法

スポンサーリンク

こんにちは。気マぐレクローバーです🍀

ブログで
画像やテキストを横並びにする方法ってないのかなぁ…

画像やテキストを横並びをご希望ですね。

カラムを使用することで実現できますよ💡

今回はカラムについて紹介しますね。

今回は、
初心者向け Cocoonで画像やテキストを横並びにする方法について
記載していきたいと思います。

この記事を読んでわかること
①Cocoonで画像やテキストを横並びにする方法
②カラムの使い方
スポンサーリンク

Cocoonで画像やテキストを横並びにする方法

Cocoonで画像やテキストを横並びにするには、
カラム機能を使用します。

Cocoonでは、
2カラムもしくは、3カラムレイアウトをしやすくする機能が実装されています。

カラム=段組み
一枚の用紙に文章などをレイアウトする際にブロックを分けることです。

カラムの使用時の注意点

スマホからだとカラム設定をしても横並び表示になりません。
スマホの画面を横にして横画面が広くなった場合に横並びになります。
※iPhone 12 ProとiPhone 12 Pro MAXで確認

PCからの訪問者が多い方におすすめです。

カラムの使い方

記事作成画面にあるビジュアルエディターの
「タグ」ドロップダウンリストから選択ができます。

「タグ」ドロップダウンリスト

カラムの種類

  • 2カラム(1:1)
  • 2カラム(1:2)
  • 2カラム(2:1)
  • 2カラム(1:3)
  • 2カラム(3:1)
  • 3カラム
  • 応用編 4カラム
記事作成画面では背景色が表示されていますが
実際の画面では表示されません。

2カラム(1:1)

2ブロックが均等になります。

2カラム(1:1)

2カラム(1:2)

2ブロックで1対2の割合で左側が広くなります。

2カラム(1:2)

2カラム(2:1)

2ブロックで2対1で左側が広くなります。

2カラム(2:1)

2カラム(1:3)

2ブロックで1対3の割合になります。

2カラム(1:3)

2カラム(3:1)

2ブロックで3対1の割合になります。

2カラム(3:1)

3カラム

3ブロックが均等になります。

3カラム

応用編 4カラム

4カラムにしたい場合は、
2カラム(1:1)を組み合わせることで作成可能です。

4カラム

カラムの使用用途

1カラムだと画面が縦長になります。
2カラムだと画面のスクロールが減ります。
ただし、不用意に使用しすぎると逆に見づらくなります。

下記のような場合に使用するのがおすすめです。

  • 「まとめサイト」のように多様な情報を表示する場合
  • 情報を比較したい場合
  • PCからの訪問者が多い

カラム使用例

当ブログ内にて実際に使用した例です。

カラム例

わかりやすいように枠で囲っています。
デフォルトでは表示されません。

最後に

今回は、
・Cocoonで画像やテキストを横並びにする方法
・カラムの使い方
について記載しました。

ブログ歴4ヶ月目にしてやっとカラムの存在を知りました…

横並びの表示は見たことがあったので
どうやってやるのかなと思いつつも
実際に使う機会がありませんでした。

調べたらとても簡単だったので
今後活用していきたいと思います。

今回の記事が
ブログ活動のお役に立てたら幸いです。

最後までお読みいただきありがとうございました。

気マぐレクローバー🍀
更新日 2022/09/28 現在

コメント

タイトルとURLをコピーしました