Skip to content

wildhawk

WordPressのショートコードで
ページを分割し情報を整理して表示するカラム分けを使う方法

「Shortcodes Ultimate」でカラムわけしたサイトを作ろう

WordPressの無料プラグイン「Shortcodes Ultimate」で簡単にカラム分けしたサイトを作る手順を解説します。

こんな人にオススメ

WordPressのページで簡単にカラム分けしたい
WordPressで情報をわかりやすいデザインで表現したい
WordPressのレスポンシブデザインで、PCはカラム表示、スマホは一列で表示したい

ページ内で2列や3列のカラムを作っても、スマホは一列で表示させるのは面倒
無料テーマ「Customizr」を使って簡単にカラム分けしたデザインのサイトをつくろう

もくじ

「Shortcodes Ultimate」でカラム分けしたデザインを設置
　　「Shortcodes Ultimate」でカラム分けの基本的な使い方
　　カラム分けのオプション

「Shortcodes Ultimate」でカラム分けしたデザインを設置

「Shortcodes Ultimate」でカラム分けの基本的な使い方

ショートコードは、エディタのHTMLに、以下の様なコードを入力することで、実行することが可能です。
[su_row]
　[su_column size="1/3"]<img src="ichigo_01.jpg" width="100%" />一列目のイチゴ[/su_column]
　[su_column size="1/3"]<img src="ichigo_02.jpg" width="100%" />二列目のイチゴ[/su_column]
　[su_column size="1/3"]<img src="ichigo_03.jpg" width="100%" />三列目のイチゴ[/su_column]
[/su_row]
一列目のイチゴ
二列目のイチゴ
三列目のイチゴ

以下の様に、分割の割合を変えることも可能です。
[su_row]
　[su_column size="1/3"]<img src="ichigo_01.jpg" width="100%" />一列目のイチゴ[/su_column]
　[su_column size="2/3"]<img src="ichigo_02.jpg" width="100%" />二列目のイチゴ[/su_column]
[/su_row]
一列目のイチゴ
二列目のイチゴ

[su_row]と[su_column]の2つのショートコードを使用します。
[su_row]から[/su_row]で1つのブロックになり、
[su_column]から[/su_column]に1列で表示したい内容を表記します。
[su_column]は必要な列の数が必要です。

表示が崩れる場合は、改行を削除すると上手く表示されることがあります。

カラム分けのオプション

[su_row]

class カラム分けのブロック全体のclass属性を設定

[su_column]

size 列のサイズと数を以下から選択します。
1/1（全幅）
1/2（2分の1）
1/3（3分の1）
2/3（3分の2）
1/4（4分の1）
3/4（4分の3）
1/5（5分の1）
2/5（5分の2）
3/5（5分の3）
4/5（5分の4）
1/6（6分の1）
5/6（6分の5）
Default value: 1/2
center 列の中をセンター表示
設定値: yes, no
Default value: no
class 列のclass属性を設定

その他の記事

関連カテゴリー

More

最新記事

素材サイトのご紹介

このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。

写真素材素材【写真AC】

無料イラスト素材【イラストAC】

白黒素材【シルエットAC】

HD・4Kの高品質な動画素材サイト【動画AC】

wildhawkからも写真素材を提供しています。是非ご活用ください

photoACのwildhawk作品一覧