THE THOR ザ・トール 画像を横に並べる カラムが便利！

このサイトでは THE THOR というテーマを利用しています。

THE THOR は機能が豊富で便利。その中でもお気に入りの機能【カラム】を利用して画像を横並びにする方法を紹介。

THE THOR 画像を横に並べる カラム

例えば↑こんな感じですね。

これがスマホでもPCでも同じように横並びで表示されます。

便利でしょ？

カラムという機能を使わなくても実現する方法はあると思いますが、お手軽なので僕はいつもカラム機能を使ってしまいます。

もちろん文章を追加すれば、それぞれに説明書きをつけることができます。

カラムの種類

カラムは8種類あります。使い方次第で様々な表現可能。

カラム各種とサンプル

ここではABCDの4種類のボックスを使ってカラムの挙動を見てみましょう。

カラムを使わない4種類のボックス

以上の4種類は横幅100%で縦幅は文字サイズにより成り行きとなっています。

この4種類をカラムにそのまま当てはめていきます。

カラム 2カラム1:1(PC+スマホ)

一番良く使う2カラム1:1(PC+スマホ)

PCでもスマホでも同じ表示になります。カラムのサイズは1:1です。

トップページを固定ページにするときなどにも役立ちます。

カラム 2カラム3:7(PC+スマホ)

カラムは2つで左右のサイズが異なります。

左側が横幅30%サイズ、右側が横幅70%サイズ。PC/スマホ共通の表示になります。

なかなか使いどころが難しいです。

左側をサイドバーのように使うのもありかと思います。

カラム 2カラム7:3(PC+スマホ)

先ほどのカラムの逆バージョンです。カラムは2つで左右のサイズが異なります。

左側が横幅70%サイズ、右側が横幅30%サイズ。PC/スマホ共通の表示になります。

こちらもなかなか使いどころが難しいです。

サイドバーとしての利用や、説明文＋画像のような使い方も良いかも知れません。

カラム 2カラム1:1(PC)

カラム数は2つ。PC表示のときは1:1で横並びに表示、スマホ表示では左から順に縦並びになります。

スマホで見てる人がほとんどだと思うので恐らく縦に２つのボックスが並んでいると思います。ブラウザの表示をPC表示に切り替えると横並びになるので試してみてください。

スマホで横並びにするとコンテンツが小さくなりすぎてしまう、PC表示で１つのコンテンツが横一杯は大きすぎるといった場合に使えるカラムです。

個人的には2カラム1:1(PC+スマホ)の次によく使うカラムです。

カラム 2カラム3:7(PC)

カラム数は２つ。PC表示のときは3:7で横並びに表示、スマホ表示では左から順に縦並びになります。

こちらもスマホでは縦表示でPC表示だと横に並びます。

ブラウザの表示をPC表示に切り替えると横並びになるので試してみてください。

カラム 2カラム7:3(PC)

カラム数は２つ。PC表示のときは7:3で横並びに表示、スマホ表示では左から順に縦並びになります。

比率違い。こちらもスマホでは縦表示でPC表示だと横に並びます。

ブラウザの表示をPC表示に切り替えると横並びになるので試してみてください。

カラム 3カラム(PC)

カラム数は3つ。PC表示のときは1:1:1で横並びに表示、スマホ表示では左から順に縦並びになります。

画像などコンテンツが多いときに便利です。

カラム 4カラム(PC)

カラム数は4つ。PC表示のときは1:1:1:1で横並びに表示、スマホ表示では左から順に縦並びになります。

こちらも画像などコンテンツが多いときに便利です。

カラムを作るときの操作方法

カラム自体はビジュアルエディタのカラムから使いたいカラムを選ぶだけで設置されるので簡単です。

カラムの内容を作るときにカラム内で作業をすると操作が繊細になるのでカラムの外でコンテンツを作り、作ったコンテンツをテキストエディタでカラムの中にコピペする方法がオススメです。

例

カラムを設置すると上記のようなコードができます。（2カラム1:1(PC+スマホ)の場合）

テキストと書いてある場所に作ったコンテンツのコードをコピペします。

先ほどのボックスAとBのコード

テキストと書かれた場所にコピペ

完成！

あわせて読みたい

THE THOR ザ・トール カラムをカスタマイズ THE THOR のカラムをカスタマイズ。背景色をつける、ボーダーを設定する、カラム間の隙間を変更するです。

あとがき