COCOONブログブログ・ゲーム

【Cocoon】カラム設定
本文を2列や3列で表示したい!

COCOON

ブログを書いていて、絵や写真の横に説明文を入れたいと思ったことはありませんか?

私の場合、レシピをアップするのに写真もつけるので、作り方と写真が横並びになるようにしたかったのです。

色々調べてやっとできるようになったので、そのやり方をご説明いたしますヾ(*´∀`*)ノ

この記事を書いた人
この記事を書いた人
kenchico

青森県生まれ。
東京の大学へ進学後、営業・サービス業で日々精進してきました。
現在茨城県在住。小6男児を持つ肝っ玉母さん。
趣味の料理・ソーイング・DIYなどで生活に活力を与えることが出来る情報を発信していきます。

♪フォローしてね♪

カラムとは?

kenchico
kenchico

レシピだと説明の横に写真が欲しいんだよね

その方が作り方とかが、わかりやすいから♪

下の図みたいにしたいんだよね~。

むすこくん
むすこくん

これは、2カラムの構成になっているね。

悩むkenchico
悩むkenchico

息子君は専門用語に詳しいからね~。

カラムって何

カラムとは、列のことである。

カラムとは、行列で表現されるものの縦の列の事です。

2列でのレイアウトの事を、2カラムレイアウトと言い、

3列でのレイアウトの事を、3カラムレイアウトと言います。

よろこぶkenchico
よろこぶkenchico

なるほど!縦の列の事ね!

そうそう、説明文と写真の2列にしたいんだよね♪

kenchico
kenchico

Cocoon設定のカラムの所を見てみたら、メインカラムとサイドバーとなってたよ。

このサイト自体が、2カラムレイアウトなんだね!

だんだん、わかってきたよ(≧▽≦)

カラムのメリット

今回の場合は、2カラム設定にする事で、説明と写真の二つの情報が同時に見ることが出来るようになります。

これが1カラムだと、全体の行が長くなり、スクロールする量も増えるし、説明分の状態がどの写真かわかりずらくなります。

カラムのデメリット

最近のホームページでは、レスポンシブデザイン(表示するデバイスの大きさに応じて自動的にレイアウトが変更する仕組み)になっていて、PCでは2カラムで表示されていてもスマートフォンでは1カラムになる事がほとんどです。

Cocoonもそうなのですが、スマフォで無理矢理やると、文字が小さくなってみづらくなることもあります。

では、カラムの設定をしてみましょう!

Cocoonでカラムを設定する

カラムの種類

Cocoonのブロックエディター(ビジュアルエディター)で設定するカラムには以下の6種類があります。

実際カラムにした状態を表してみます。

2列や3列にすると、どんな感じになる?

実際にカラムを設定してみました。

分割の割合によって見た目の印象がかなり違いますよね。(※スマフォで確認しましたが、今回のやり方では、スマフォは①と④しかできないようです。CSSを変えたら出来るとおもうのですが、、、勉強不足ですいません)

50:50

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

あああああああああああああああまだあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

30:70

いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい

良いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい

70:30

うウウううウウううウウううウウうウウううウウうううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう

うううううううううううううううううううううううううううううううううううううううううううううううううううううううう

33:33:33

ええええええええええええええええええええええええええええええええええええええええええええええええええええ

ええええええええええええええええええええええええええええええええええええええええええええええええええええ

ええええええええええええええええええええええええええええええええええええええええええええええええええええ

25:50:25

おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお

むすこくん
むすこくん

こんな感じに見えるんだね。

kenchico
kenchico

今回レシピの文と写真だから、私は③がいいかな。

カラムを設定してみよう!

今回は、私のレシピを載せるときの設定方法を説明します。

段落を選択し、+をクリックします。→カラムがあったらそこをクリック

カラムが無い場合は、「すべてを表示」をクリックします。

全てを表示をクリックすると、左側にたくさんの項目が出てきます。

カーソルを下にスクロールすると、【デザイン】の所に、「カラム」があります。

そこをクリックします。

※カーソルをカラムに合わせると、ツールチェックが出てくるので、

カラムを設定した時の雰囲気がわかると思います。

ツールチェックの表示は、50:50のカラムですね

よろこぶkenchico
よろこぶkenchico

本の説明とかにも使えそうだね。

「カラム」をクリックすると、カラムの種類を選ぶことが出来ます。

70:30をクリックするとこのようになります。

それぞれのブロックで、段落を選んだり、画像を選らんで入力していきます。

このようになります。(最近のレシピは1:1で表示することが多くなってきました。)

追記

Cocoon更新により、上記カラム設定以外にも設定できるようになりました。

①ブロックエデュタ⊞を押します。

②「すべてを表示」を押して一番下までスクロールすると、「cocoonレイアウト」という項目があります。2カラムと3カラムがあります。

③2カラムは1:1、1:2、2:1、1:3、3:1の5種類、3カラムは1:1:1の1種類です。赤〇の部分で選びます。

こちらは、カラムが色違いで表示されて見やすくなっています。

あとはブロックごとに入力していくだけです。

ただ、先ほどもお伝えしましたが、Cocoonもレスポンシブデザインとなっていますので、このままでは、モバイルでは2カラムになりません。

モバイルにもカラム設定を反映させるには

上でも述べたとおり、モバイルで2カラム・3カラムにすると文字が小さくなり見づらくなるという懸念があります。

きちんと確認してからの設定をおすすめします

モバイルでも2列で表示してみよう

モバイルで2カラムにするには、

.wp-block-columns {
	flex-wrap: nowrap;
}

を追記する必要があります。

しかし、これをCocoonチャイルドのスタイルシートに追記してしまうと、すべての記事がモバイルでもカラム変更してしまいます。

モバイルでカラム変更した方が良いか、しないほうが良いか簡単に確認できるように

投稿編集画面の下の方に、カスタムCSSと言う欄があります。

そこに、

.wp-block-columns {
	flex-wrap: nowrap;
}

をコピペすると、当該記事にだけ対応します。

モバイルもカラム変更対応した方が良いか、

確認してみてから好きな方を選んでください♪

以上で完成です!

最後までお読みくださりありがとうございましたヾ(*´∀`*)ノ❤


人気ブログランキング

コメント

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