WordPressのカラム(Columns)について

この記事を読むのに必要な時間は約 6 分です。

WordPressに限らずすべてのWEBサイトにあるカラムとは、Wordなどで言う段組のことです。

基本的にWEBサイトのページや記事は、四角の枡の集合体が1つのページになっているのです。スタイルシートが出てからも最初の頃は、それをTableタグで工夫してレイアウトしていました。

そういう背景があったので以前は、スペーサーGIFなるものも存在していました。そして今は、スタイルシートもCSS3になってTableタグやスペーサーGIFでやっていたことをスタイルシートでレイアウトするのが当たり前になってきました。

カラムとは、ページの中でレイアウトさせるための1つの方法なのです。

 

目 次

ページ全体のカラムについて

[wc_row] [wc_column size=”one-half” position=”first”]

WordPress2カラム

一般的なWordPressは、上記のようなレイアウトでサイトの幅などが違うくらいというのが多いように思います。2カラムのレイアウトです。

①は、Headerで②が、メインコンテンツ③がサイドバーになってます。

[/wc_column] [wc_column size=”one-half” position=”last”]

3カラム

こちらは、アメブロですが3カラムの例として表示しています。①は、左サイドバーで②がメインコンテンツで③が右サイドバーです。

[/wc_column] [/wc_row]

ただ、このカラムについてはスマホでは適用されずに左側から順番に縦に表示されるという特性があります。スマホで見られることが多い今日ではあまり意味がないように思えるかもしれないですが、PCやタブレットではちゃんとレイアウトされているのです。

カラムのいろいろ

ページ内のカラム

カラムは、何もサイト全体のレイアウト構成だけではありません。冒頭にも書いた通りWEBページは、四角の枡の集合体なのです。そういう意味でメインコンテンツ部分にもカラムを使ったレイアウトができるのです。
上記は、ページ内で2カラムにした例になります。

 

カラムは、どうやって作るのか?

3カラム

カラムについては、ソースを覚えるよりプラグインを使ってショートコードで挿入する方が簡単で早いです。
もちろん、オススメのプラグインもあってソースを覚えるより断然早い作成が可能になります。

Shortcodes by Angie Makes

Shortcodes by Angie Makes  

Shortcodes by Angie Makes  は、カラム作成やアコーディオンなどが簡単に作成できるショートコードプラグインです。

Shortcodes Ultimate

Shortcodes Ultimate  

Shortcodes Ultimate  は、54種類のコンテンツをショートコードで実装できるプラグインです。カルーセルの設置やボタン作成などは、このプラグイン使う方が便利ですね。 また、投稿の埋め込みや投稿リストを入れるのも使いやすく便利です。

くまはちLABでは、両方インストールして使っています。2つ入れると被る部分も出てきますがどちらが使いやすいのかということを選択するのは、ユーザー自身です。その辺りを実際に使ってみて使わなければアンインストールすることも可能です。

ショートコードの使い方

Shortcodes by Angie Makes  でカラムを作成するには、上記画像のように操作します。まず、どのような配置にするのかを決めてください。半分ずつ分けるなら1/2+1/2を選択します。
ショートコード挿入
すると投稿画面にショートコードが挿入されるので「Sample Content」を削除してその部分にコンテンツを埋め込みます。上に表示される部分は、左側に下に表示されたものは右側に配置されます。

Shortcodes Ultimate
コードセットアップ
ショートコード挿入

Shortcodes Ultimate  は、上記のようにボタン操作でやっていくのですが、工程的に間違えやすいので注意が必要です。クリックするのは、あくまでcolumnsでカラムではありません。2枚目の部分でサイズは、自由に変更可能です。3枚目画像でショートコードの中の「列のコンテンツ」を作成するコンテンツと差しかえします。

まとめ

カラムについての解説いかがだったでしょうか?
カラムとは段組のことであると覚えておいてください。
作成については、方法の説明見ていただけるとわかると思いますが、間違えにくく工数の少ないShortcodes by Angie Makes  でカラムを作成する方が便利で簡単であると思います。
どちらか使いやすい方で使ってください。

YouTubeチャンネル

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
]]>

くまはちLABのご利用ありがとうございます!くまはちLABの最新情報をフォローしてゲットしてください!