画像を横並び(最大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列)」でした。