画像をスマホでも横並びにする(最大4列)

画像を横並び(最大4列まで)にできるショートコードです。スマホでも横並びを維持できます。

「ボタンの横並び」にも使っているカラムショートコードにnumberという属性を追加します。

使用例(4列、aタグあり)

コピペ用

[[colmun number="4"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/niwatori-06-400x400-1.png"><img class="alignnone size-full wp-image-15996" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/niwatori-06-400x400-1.png" alt="" width="400" height="400" /></a><a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/lesser-panda-400x400-1.png"><img class="alignnone size-full wp-image-15997" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/lesser-panda-400x400-1.png" alt="" width="400" height="400" /></a><a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png"><img class="alignnone size-full wp-image-15998" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png" alt="" width="400" height="400" /></a><a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png"><img class="alignnone size-full wp-image-15999" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png" alt="" width="400" height="400" /></a>
[/colmun]]

使い方

「number」部分に数字(2〜4まで対応)を入れると、その数で折り返して表示するようになります。numberを指定しないと従来のcolmunショートコードの挙動(全ての要素を横一列に並べる)になります。

注意

ショートコード内のHTML要素は改行を入れずに書いてください。
ウィジェット(見出し付きテキストボックス)で使う場合は、「自動的に段落を追加」もオフにしてください。

4列(aタグなし)

コピペ用

[[colmun number="4"]
<div><img class="alignnone size-full wp-image-15996" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/niwatori-06-400x400-1.png" alt="" width="400" height="400" /></div>
<div><img class="alignnone size-full wp-image-15997" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/lesser-panda-400x400-1.png" alt="" width="400" height="400" /></div>
<div><img class="alignnone size-full wp-image-15998" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png" alt="" width="400" height="400" /></div>
<div><img class="alignnone size-full wp-image-15999" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png" alt="" width="400" height="400" /></div>
[/colmun]]

画像をaタグで囲まない(リンクしない)場合は、画像をひとつずつdivタグで囲ってください。囲まないと、画像幅が記事幅より小さい場合に自動で拡大されて、画像がボヤケてしまいます。

3列(aタグあり)

コピペ用

[[colmun number="3"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/lesser-panda-400x400-1.png"><img class="alignnone size-full wp-image-15997" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/lesser-panda-400x400-1.png" alt="" width="400" height="400" /></a><a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png"><img class="alignnone size-full wp-image-15998" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png" alt="" width="400" height="400" /></a><a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png"><img class="alignnone size-full wp-image-15999" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png" alt="" width="400" height="400" /></a>
[/colmun]]

3列(aタグなし)

コピペ用

[[colmun number="3"]
<div><img class="alignnone size-full wp-image-15997" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/lesser-panda-400x400-1.png" alt="" width="400" height="400" /></div>
<div><img class="alignnone size-full wp-image-15998" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png" alt="" width="400" height="400" /></div>
<div><img class="alignnone size-full wp-image-15999" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png" alt="" width="400" height="400" /></div>
[/colmun]]

2列(aタグあり)

コピペ用

[[colmun number="2"]
<a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png"><img class="alignnone size-full wp-image-15998" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png" alt="" width="400" height="400" /></a><a href="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png"><img class="alignnone size-full wp-image-15999" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png" alt="" width="400" height="400" /></a>
[/colmun]]

2列(aタグなし)

コピペ用

[[colmun number="2"]
<div><img class="alignnone size-full wp-image-15998" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/dolphin-Illust-400x400-1.png" alt="" width="400" height="400" /></div>
<div><img class="alignnone size-full wp-image-15999" src="https://hannya-builder.com/guide/wp-content/uploads/2020/03/saru-01-400x400-1.png" alt="" width="400" height="400" /></div>
[/colmun]]

以上「画像をスマホでも横並びにする(最大4列)」でした。

般若ビルダー専用ショートコード一覧に戻る