WordPress：Lightweight Grid Columns
wordpressでレスポンシブなグリッドを作りたいがため、いろいろ探してみた。しかし、投稿をグリッド上に並べるものは、ふんだんに見つかるのだが、「任意の内容」をグリッド状に表示し、レスポンシブに配置を変更するものは、今のところこれしか見つからなかった。
プラグインとしては、単純な分だけフレキシビリティは高いと思われる。やることは以下だ。
- プラグインをインストールする
- グリッドにしたい部分にショートコードを追加する
これを順に見ていく
プラグインのインストール
単純に「Lightweight Grid Columns」をプラグイン検索して、インストール、有効化すればよい。
使用方法
実際にはエディタ画面に以下のようなボタンが表示されるのだが、あまり意味はない。結局は編集しなくてはならないからだ。
このボタンを押せば、ショートコードを挿入してくれるだけの話だ。
やることは、単純にグリッドの「セル」としたいものを、[lgc_column][/lgc_column]で囲んでやる。lgc_columnのパラメータは後述する。
動き
ブラウザ幅によって以下のように表示が変更される。
パラメータの意味
さて、lgc_colmnのパラメータとしては以下のようなものである。
[lgc_column grid="30" tablet_grid="50" mobile_grid="100" last="false"]
gridのパラメータは、デスクトップでの比率、tablet_gridはタブレット、mobile_gridはスマフォだというのだが、どの程度の解像度を各デバイスとみなしているのかは不明。
上記の例では、デスクトップ用を30%としており、最大に広げた場合は3つが横並びになっている。
last=trueは「行の最後の列とみなす」、つまりこのセルで強制的に改行するということだ。
先の例で「猫」にlast=trueを設定し、横幅を一杯に広げると、以下の表示になる。猫で改行される。