WordPressの記事内で段組みを作りたいときは、「Shortcodes by Angie Makes」が便利です。特に画像をきれいに配置したい場合には重宝します。
目次
wordpressの記事内で段組み、画像をきれいに配置したい場合【Shortcodes by Angie Makes】
段組みや画像をきれいに配置と言ってもどのようなことかがわかりにくいかと思いますので、まず、実際の結果から紹介しておきます。
例えば、冒頭の画像をページ内で3分割にして表示してみると下記のようになります。
※スマートフォンで見ている場合、画面サイズによっては横には分割されずに縦に画像が並んで表示されます。
画像だけでなくテキストも使って同じ画像を4分割すると下記のようになります。
1つ目の説明テキストです。説明テキスト説明テキスト説明テキスト
２つ目の説明テキストです。説明テキスト説明テキスト説明テキスト
３つ目の説明テキストです。説明テキスト説明テキスト説明テキスト
４つ目の説明テキストです。説明テキスト説明テキスト説明テキスト
表ではすっきり見えない場合、商品一覧、メニューなどに活用｜画像を分割比率で縮小してくれる点が便利
これをどのように使うのかと言えば、表ではすっきり見せることができない場合に使います。表だと幅や高さが思ったように表示されなかったり、スマホで見た時に崩れたりするケースで、「Shortcodes by Angie Makes」の「Columns」を使うと見栄えが良くなるケースがあります。スマホでもきれいに表示されるというのも良いです。
また、表と異なり、画像を表示させた場合に、分割比率で縮小してくれるので、画像サイズの調整も不要な点が便利です。
どういう場面で活用するかと言えば、商品一覧やメニューなどに利用するとすっきり見えるようになります。実際の活用事例として私がお手伝いさせていただいた宝石店のホームページの商品詳細ページをご紹介します。下記ページの中段下ほどの商品画像を4点表示させているところで活用しています。
分割のバリエーションは10種類
ここまで、3分割と4分割の事例を紹介してきましたが、分割の種類は下記の10種類あります。
下記に表示している分数の割合でページを分割してくれます。
- 2分割（1/2＋1/2）
- 3分割（1/3＋1/3＋1/3）
- 右側が大きい2分割（1/3＋2/3）
- 左側が大きい2分割（2/3＋1/3）
- 4分割（1/4＋1/4＋1/4＋1/4）
- 中央が大きい3分割（1/4＋1/2＋1/4）
- 左が大きい3分割（1/2＋1/4＋1/4）
- 右が大きい3分割（1/4＋1/4＋1/2）
- 左が大きい2分割（1/4＋3/4）
- 右が大きい2分割（3/4＋1/4）
前項で書きましたが、カラムによって比率が異なる分割方法を利用する場合には、画像は縮小されます。下記は、（1/4＋3/4）で同じ画像を表示させた場合の事例です。同じ画像でも縮小率が異なるので高さが段違いになったりしますので、注意です。
使い方は簡単
使い方は簡単です。こちらで使っている画像のようにメニューが表示されますので、使いたいところで使いたい比率のメニューを選択してください。
そうするとエディター画面に下記のようなショートコードが挿入されます。下記を見ていただくとお分かりいただけるかもしれませんが、下記の「Sample Content」と書かれた部分にコンテンツ（画像やテキスト）を普通に書いてください。それだけで設定した分割割合で分割して表示されます。
[wc_row]
[wc_column size="one-half" position="first"]
Sample Content
[/wc_column]
[wc_column size="one-half" position="last"]
Sample Content
[/wc_column]
[/wc_row]
【Shortcodes by Angie Makesの使い方の記事一覧】
