COCOONブログブログ・ゲーム

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

COCOON


こんにちはkenchicoです♪

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

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

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


💡この記事でわかる事💡

カラムについて。

Cocoonでのカラムの設定方法。

モバイルでのカラムの設定の仕方。

この記事では
こんなことが
わかるよ♪


画像に alt 属性が指定されていません。ファイル名: 8bf15e0b31403054fe8391658cc0deed-800x400.gif


スポンサーリンク

カラムとは?

kenchico
kenchico

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

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

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


むすこくん
むすこくん

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

悩むkenchico
悩むkenchico

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

カラムって何


カラムって、何なの?というところから私はわかりませんでした(;^ω^)。

column【kɑləm】を調べると、縦の欄・縦の列という意味でした。


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

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

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

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

よろこぶkenchico
よろこぶkenchico

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

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

kenchico
kenchico

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

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

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


Cocoon設定・カラム


カラムのメリット

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

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


カラムのデメリット

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

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

※文字が小さすぎると、モバイルフレンドリーではないとサチコ(Google Search Console)でエラーがかかることがありますので注意!


続いて、カラムの設定をしてみましょう。


スポンサーリンク

Cocoonでカラムを設定する

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

カラムの設定をする際に、どのような割合のカラムにするか考える必要があります。

見てみましょう。


カラムの種類

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

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


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

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

100は1カラムなので省きます。

分割の割合によって見た目の印象がかなり違いますよね。(※スマフォで確認しましたが、スマフォは①と④しかできないようです。)


50:50


30:70


70:30


33:33:33


25:50:25


むすこくん
むすこくん

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

kenchico
kenchico

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


それではカラムを設定してみましょう。

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

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

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

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


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

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

そこをクリックします。

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

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

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


よろこぶkenchico
よろこぶkenchico

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

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



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


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

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


追記

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

kenchico
kenchico
どちらのやりかたでも設定できます。新しい方法を説明しますね。


①新しいブロックを選択して、ブロックエデュタ⊞を押します。


②「すべてを表示」をクリックします。


③下の方までスクロールすると、「cocoonレイアウト」という項目があります。2カラムと3カラムがあります。


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


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

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

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


kenchico
kenchico
モバイルでカラムを反映させるにはどうするのかも下記で説明していきますよ♪


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

モバイルにもカラム設定を反映させるためにはCSSで追記します。

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

設定した場合どのように表示されるのか、きちんと確認してからの設定をおすすめします


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

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

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

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

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


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

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


そこに、

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

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


かしましめしコラボのCOOKPADレシピコンテスト応募作品詳細の記事はモバイルもカラム変更してます。

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

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

以上で完成です!

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


CocoonでTwitterカードを設定する方法はこちらからどうぞ。



人気ブログランキング


PVアクセスランキング にほんブログ村
スポンサーリンク
♪フォローしてね♪
スポンサーリンク
kenchico☆生活力

コメント

switchのLボタン、壊れちゃったの?そんな時には
switchのLボタン修理方法はコチラ
switchのLボタン、壊れちゃったの?そんな時には
switchのLボタン修理方法はコチラ
タイトルとURLをコピーしました