これまで、ページだけは作っててろくに進展のなかった、上記の創作キャラ一覧ページですが、冒頭の画像のように、以前はブロックエディター標準で備わっている、カラムというブロックで一覧表を作成していました。
PCのときは3列、スマホのときは1列になります。
ただ、下の段にも続けて項目をつなげることができない問題があります。
そのため、段ごとにわざわざカラムのブロックを作成しないとならず、もし並び替えが必要になった際も、非常に手間がかかります。
cssのgridみたいに、並び替えが用意でなおかつ等幅のグリッドレイアウトを簡単に実現できるプラグインがないか探し回ったのですが、標準と同様に1段だけだったり、投稿一覧だけに対応だったりと、どれもズレたものばっかり。
2時間も探し回った末にようやく見つけたのが、こちらの「Snow Monkey Blocks」。
様々な機能をもった多数のブロックの詰め合わせなのですが、その中の一つに「項目」というブロックがあります。
それを使うことでようやく、中身が自由なグリッドレイアウトを実現することができました。
もちろん、1段がいっぱいになっている状態で、ブロックの右下に出てくるプラスボタンを押すことで、その下に新しい要素が続いてくれます。
標準のカラムみたいに、スマホで表示して折り返されたときに、各列でグループになってしまっているなんてことはありません。
そのうえ、PC・タブレット・スマホそれぞれで、1段につき要素を何列表示させるかといった指定も可能で、とても直感的。
つまりレスポンシブってことです。
このプラグインはけっこう知名度の高いもののはずなのですが、こんな非常に便利な機能があったなんて、思いもよらず。
これからも重宝するプラグインになりそうです。
ただ、一つ問題がありまして、上の画像だと1段につき要素を3個表示する設定にしているはずなのに、2個で表示されてしまいました。
つまり、「行あたりのカラム数」が指定どおりになっていません。
「各項目をくっつける」をオンにすれば解消されるのですが、それだと余白のないグリッドになってしまいます。
|
1 2 3 |
.c-row__col { box-sizing: border-box; } |
対処法としては、cssに上記のコードを追加するだけです。
管理画面にも反映させる場合は、「Simple Custom CSS and JS」を使って、管理画面用のcssを作成できるようにすれば良いでしょう。
クルマやバイクのゲーム、ニッチな端末いじり、ランチ・モーニング巡りにお熱です。