写真を2枚3枚横に並べる「カラムブロック」

カラムブロック追加Cocoonカスタマイズ

ブログ記事を作っていて、「写真を横並びに表示させたい!」と思うことがあります。
2枚の写真を比較したり、写真の横に言葉を入れたいこともありますね。

「カラムブロック」を使うと、簡単に横並びに表示させることが出来ます。

この記事では、カラムブロックを使って本文エリアで写真を横並びにする方法を紹介します。

例えばこの記事では2カラムを使って絵の隣に文字を入れています。

https://yumako428.com/cocoon-customized-items/
スポンサーリンク

カラムブロックの使い方

写真を横並びをしたい場所の「+」を押します。

ブロック追加

検索画面に「カラム」と入力します。

カラムブロック追加

分けられるのは3カラムまでですが、カラムの中にカラムを入れると細かい分割が可能です。

ここでは2カラムで説明をしていきますね。
先ほどの画面で、「2カラム」を選択します。

こんな画面が出てきたら、左と右それぞれに画像を入れます。

カラムブロック追加

編集画面ではわかりやすいように色がついていますが、読者さんが見るページでは色はつかなくなります。

それぞれのカラムの中の「+」を押して、コンテンツを挿入していきます。

左右に画像を入れました。
編集画面では色がついています(私の画面をキャプチャしました)。

※タブレットやモバイル(スマホ)では、カラムではなく縦に表示されることがありますので、プレビュー等で確認してください

カラムブロック画像追加

実際には色がついていませんね。

読者さんいちご
読者さんひよこ

右の設定画面で画像の大きさを調整して、さらに中央寄せしました。
右側の設定画面が見えてない!というかたは、この記事を参考に。

WordPress右側の設定画面が消えた!ときの対処法
ワードプレスの投稿画面の右側に通常出ている設定画面。消えちゃったら困りますよね。焦ります。そんなときに設定画面を表示する方法をお伝えします。

私の画面はこんな感じ。

カラムブロック画像追加

実際の画面はこれ。

読者さんいちご
読者さんひよこ

カラムブロック応用編

カラムブロックの使い方がわかったら、あとは応用して、自分でアレンジしていきましょう。
いくつかの例を紹介します。

上がゆまこの設定画面(色付き)、下が実際の見え方です。

3カラム+文字

カラムは写真だけではなく、文字も入れることが出来ます。
3カラムで、一番右は文字だけにしました。

3カラム文字
読者さんひよこ
読者さんいちご




仲良し

3カラム+文字+画像と文字

カラムブロックの中にも複数のコンテンツを入れることが出来ます。
画像+文字を同じカラムに入れました。
普段の投稿画面と同じように「+」ボタンを押して追加していきます。

3カラム文字
読者さんひよこ

喧嘩しちゃった




仲悪し

読者さんいちご

早く仲直りしたい

カラムの中にカラム+吹き出し

2カラム → 左のカラムにはさらに3カラムを追加。右には吹き出し。
カラムが細かく分かれるとぎゅうぎゅう感が出てきます。

2カラムに3カラム
読者さんいちご
読者さんひよこ
読者さん四つ葉
ゆまこ
ゆまこ

カラムの中にカラムを入れることもできます。

カラム(幅)比率変更

カラムの幅の比率を変更することもできます。
カラム全体をクリックし、右側の設定画面の「ブロック」の「スタイル設定」で比率変更設定可能です。

カラム割合分割
比率1;3
読者さんいちご

1:3の比率のカラムを選びました。
お料理の写真&レシピや、写真の説明を書くのに便利そう。

まとめ

この記事では、本文エリアで、2枚の写真を横並びに、写真の横に言葉を入れる「カラムブロック」を使った方法を紹介しました。

吹き出しのカスタマイズをして、サイトをワンランクアップさせるにはこちらの記事をどうぞ。

【Cocoon】吹き出しの枠線と形の全4種類の設定徹底比較
Cocoonの標準機能で、とても便利な「吹き出し」。吹き出しで気持ちを表現すると表現が多彩になりますよね。でも、初期設定のままだとイラストの周りに丸い枠線が入って、アイコンが切れてしまうことも。この記事では、吹き出しの枠線を消して、アイコン全体を表示させる方法を説明します。
吹き出しを使うときは顔の向きに気を付けよう!
Cocoonの機能で標準搭載されている「吹き出し」をより自然に使うためには『アイコンの顔の向きに気を付ける』必要があります。顔の向きを揃える方法を説明します。
タイトルとURLをコピーしました