Cocoonなら記事内で簡単に画像やテキストを横並びにできる!

WordPress

WordPressのテーマをCocoonに移行してからというもの、その使い勝手のよさに感動する毎日です。

ここまでくると自分でカスタマイズする必要すらなくなってきます…。ブログ執筆に必要な機能はほぼ揃ってますね、マジで。

しかもこのテーマはまだβ版ということで、どんどん新しい機能が増えていっているんですよ。

 

その中で地味にうれしいのが「2カラム」「3カラム」タグ

先代テーマのSimplicityにはない機能だったので、当時自分で実装していたのを思い出します…。

「やりたくてもできない」って人も沢山いたんじゃないでしょうか?

 

上手く使いこなせば、より記事の内容を伝えやすくなる便利な機能です。

スポンサーリンク

web制作における「カラム」ってなに?

まず初めに「カラムってそもそも何なの?」ってとこから見ていきましょう。

この”カラム”という表現はweb制作でよく使われる言葉なんですが、簡単に言うと「要素を表示させる時のデザイン(レイアウト)」の事です。

 

実は今あなたが見ているこのページにもカラムが存在します。

記事本文」と、その横にある「サイドバー」の”2カラム”によってページ全体が構成されているのが分かるでしょうか。

サイトによっては、サイドバーが存在しない本文のみの”1カラム”デザインや、サイドバーが本文の両脇に存在する”3カラム”デザインもありますよね。

 

つまり「いくつの要素が横並びに表示されているか」という話です。

スポンサーリンク

【Cocoon】記事内で画像やテキストを横並びに表示する方法

それでは、実際にCocoonで要素を横並びにする方法を見てみましょう。

 

エディターのなかに「タグ」というメニューがありますよね。

その中を見ると「2カラム」「3カラム」というタグが出てきます。

Cocoon カラム

これをポチッと押すだけで、要素を横並びさせるための枠組みが表示されるんです。

「ビジュアルエディター」で見ると、下記の通り分かりやすく出てきますね。これ完全に無料テーマの粋を越えてます…。

Cocoon カラム

ビジュアルエディタ上の色付けは、あくまで編集しやすいようにされているだけで、実際にブラウザで見ると枠も色も付いていません。

あとはここに、画像なり文字なりを埋め込んでいく作業。超簡単。

 

テーブル(表)を使わずに横並びにするのは、web初心者にとってはなかなか難しい作業です。

それがワンクリックで実装できるんですから…。ほんと凄いの一言。

実際に使ってみるとこんな感じ

3カラムで表示してます。

Cocoon(コクーン)

Cocoon 記事枠線

スマホで見ると縦1列に並ぶので注意

スマホで見た時に、自動で縦一列に並び替えてくれるのも便利ですよね。

テーブル(表)を使わずに横並びにしたことによるメリットです。

 

逆に、常に横並びにしたいときはテーブルを使うことで解決できますよ。

PCで見たら横並び、スマホで見たら縦並び

ブログをやっていたら、一度は画像やテキストを横並びにレイアウトしたい時が来ると思います。

何度も言いますが、「PCで見たら横並び、スマホで見たら縦並びになる」というのが、カラムタグ最大の特徴です。

画像を3つ横に並べると、さすがにスマホで見た時、小さくて見づらくなってしまいますからね。

場面に応じて「テーブル(表)」と「カラム」を上手く使い分けていきましょう。