カラムって何?
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i3f69ee6a02669b5a/version/1574408497/image.png)
カラムでは、横幅を好きな分割にすることができます。
PC表示で、右と左に画像を並べたいな、右に写真・左に文章にしたいな。というときにも便利です。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i6d2c799ca20d3645/version/1574418119/image.png)
カラム上にマウスをもっていくと(クリックしないで)「カラムを編集」という青いバーが出てきます。
そこをクリックすると、列を増やしたり、減らしたり、列の幅を変えたり(境界線を左右)することができます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/iadda4dce4e51aee3/version/1574418491/image.png)
カラムを使いこなせるようになると、ぐっとホームページでの表現の幅も広がります。
カラムで一覧を作る
▶︎一覧をつくるときにカラムを利用することも
以下のように横3列にホームページ制作事例をお見せしている箇所があります。https://www.lyckstill.jp/web/jimdo-wix/design/
制作事例・商品一覧のようなものに使うこともあります。
今回はこの一覧としてカラムを利用するときについて、取り上げたいと思います。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/id378035f37d891b2/version/1574409573/image.png)
問題は一覧の更新のとき!
▶︎新しいサイトを作り、新しく追加したい!となったときにどうする?
ホームページは日々更新するものです。新しいものは一番上の段、一番左に追加したいですよね。
そんなときの賢い?更新の仕方をご紹介します。
カラムにマウスを重ねると(クリックしない)「カラムを編集」という青いバーが出現します。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i74e46818b57c32bc/version/1574409797/image.png)
▶︎カラムを編集をクリック!
青い「カラムを編集」をクリックすると、カラム全体を選択することができます。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i03f0a84babd6444a/version/1574410663/image.png)
▶︎一旦、1列増やして4列にしましょう。
カラムを編集を押して、カラム全体が選択されると、カラム操作に関するボタンが出てきます。
左下「列を追加」を押して、4列にします。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i1821432941a6a209/version/1574410827/image.png)
▶︎一列お隣をコピーしてとりあえず空の列を埋める
左側に1つ空の列ができました。右隣のこの例で言えば、「Glass sana」様のコンテンツ<画像><ボタン><文章>をそれぞれコピーした上で、左の空の列にドラッグ&ドロップで移動させます。
すると、下のような状態になります。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i237456e3569fd1a6/version/1574411198/image.png)
▶︎一番左の列の画像やリンクを更新しましょう。
一番左は、新しくできたサイト用につくったので、新しいサイトの画像や、ボタンリンク・テキストに更新します。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i3a6b70ad120f2406/version/1574411382/image.png)
▶︎3列に戻すために、次のカラムを4列にしよう。
4列になりました。新しいリンクもはれました。が、3列で他のカラムは表示されているので、このカラムも3列にしたいですよね。
そうなると、右端の列にいる「Romantic Rose」様を次の行に移動させたいです。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i4bdb824c16ff2b45/version/1574411716/image.png)
▶︎次の行を4列にしよう。
列の追加については冒頭でやりましたね。忘れてしまった方はこちら。
次のカラムの左端に列を追加します。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i42d81fb117abb6bc/version/1574411765/image.png)
▶︎コンテンツをお引越し
移動させたいコンテンツをドラッグ&ドロップして、1段目の右端から、2段目の左端へお引越しさせました。
ドラッグ&ドロップとは、移動したいコンテンツをクリックしたまま、希望の位置に移動させ、希望の位置でクリックしている指を離す動作です。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/ica261bc5bd26e724/version/1574411905/image.png)
▶︎1段目を3列に戻します。
1段目を4列から3列に戻します。「カラムを編集」から空の列をゴミ箱マーク(右下)で削除します。
ただし、削除は慎重に。どこが削除対象となっているのか、きちんと確認しながら行いましょう。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/i4d33e23be5c2b832/version/1574412023/image.png)
▶︎あとはところてん方式です。
あとはここまでの繰り返しで、4列になってしまった2段目についても同じ作業をしていきます。
3段目の左側に空の列を作成し4列に > 2段目の右端のコンテンツを3段目左端に移動 > 空になった2段目の右側の列を削除
と繰り返してください。
![](https://image.jimcdn.com/app/cms/image/transf/dimension=990x10000:format=png/path/s567941caec77116e/image/iede80da590373d35/version/1574412434/image.png)
理屈がわかればあとは応用
▶︎読むと大変!でもやってみると簡単かも?
長いですねー説明。画像を交えるととても長くなってしまいます。でも理屈がわかれば簡単です。
そしてこちらをマスターすると、下の方にあるものを上にもってきたい!となった場合にも、応用が利きます。表示したいところに新しい列を追加し、押し出す場所をつくって、押し出すものを移動させればよいのです。
律儀に個々のコンテンツを1個ずつ右に右にとずらすような膨大な作業量は生まれません。
ぜひ挑戦してみてください。
カラムの使い方を発想の転換で楽に!はこちらから