このサイトでは THE THOR というテーマを利用しています。
THE THOR は機能が豊富で便利。その中でもお気に入りの機能【カラム】を利用して画像を横並びにする方法を紹介。
THE THOR 画像を横に並べる カラム
例えば↑こんな感じですね。
これがスマホでもPCでも同じように横並びで表示されます。
便利でしょ？
カラムという機能を使わなくても実現する方法はあると思いますが、お手軽なので僕はいつもカラム機能を使ってしまいます。
もちろん文章を追加すれば、それぞれに説明書きをつけることができます。
サイドメニューのCLOSEボタンがめっちゃ使いやすくなるオススメのカスタマイズ
このサイトで使用している THE THOR について感想を書いてみました。
カラムの種類
カラムは8種類あります。使い方次第で様々な表現可能。
・2カラム1:1(PC+スマホ)
・2カラム3:7(PC+スマホ)
・2カラム7:3(PC+スマホ)
・2カラム1:1(PC)
・2カラム3:7(PC)
・2カラム7:3(PC)
・3カラム(PC)
・4カラム(PC)
カラム各種とサンプル
ここでは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/スマホ共通の表示になります。
こちらもなかなか使いどころが難しいです。
サイドバーとしての利用や、説明文＋画像のような使い方も良いかも知れません。
3:7や7:3のように比率が違う場合は特に縦幅に注意。
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で横並びに表示、スマホ表示では左から順に縦並びになります。
こちらも画像などコンテンツが多いときに便利です。
カラムを作るときの操作方法
カラム自体はビジュアルエディタのカラムから使いたいカラムを選ぶだけで設置されるので簡単です。
カラムの内容を作るときにカラム内で作業をすると操作が繊細になるのでカラムの外でコンテンツを作り、作ったコンテンツをテキストエディタでカラムの中にコピペする方法がオススメです。
例
<div class=”column__item”>テキスト</div>
<div class=”column__item”>テキスト</div>
</div>
カラムを設置すると上記のようなコードができます。（2カラム1:1(PC+スマホ)の場合）
テキストと書いてある場所に作ったコンテンツのコードをコピペします。
先ほどのボックスAとBのコード
<div class=”ep-box bgc-Lblue ftc-white es-FbigL es-center”>B</div>
テキストと書かれた場所にコピペ
<div class=”column__item”><div class=”ep-box bgc-Lred ftc-white es-FbigL es-center”>A</div></div>
<div class=”column__item”><div class=”ep-box bgc-Lblue ftc-white es-FbigL es-center”>B</div></div>
</div>
完成！
THE THOR ではこのように広い作業スペースからコピペで持っていくやり方を使った方が効率的な場合が良くあります。
特に改行などが思ったように出来ないときはオススメの方法です。
THE THOR の便利な機能のひとつ「カラム」を少々カスタマイズします。 カラムの基本的な使い方やバリエーションは前回記事をご覧ください。 [sitecard subtitle=基本事項 url=https[…]
あとがき