【WordPress】軽量で使い易いグリッドフレームワークLightweight Grid Columns

lightweight_grid_columns_s
Lightweight Grid Columnsは軽量で使い易いグリッドフレームワークプラグイン。使用方法もショートコードを使い、デスクトップ、タブレット、モバイルの幅を指定できます。

Lightweight Grid Columnsプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Lightweight Grid Columnsを検索
有効化にするとエディタにAdd Columnsが追加されます。

エディタ

lightweight_grid_columns_1
ビジュアルの状態の時にAdd Columnsが追加されているのでクリックします。

lightweight_grid_columns_2

  1. Desktop grid percentageにはデスクトップグリッド幅
  2. Tablet grid percentageにはタブレットグリッド幅
  3. Mobile grid percentageにはモバイルグリッド幅
  4. Contentはここで入力しなくても一度OKを押した後でもいいかと思います。
  5. Last column in row?は最後のものにチェックを入れます。

ショートコード

OKをクリックするとショートコードが挿入されます。
[lgc_column grid=”50″ tablet_grid=”50″ mobile_grid=”100″ last=”false”]コンテンツ内容[/lgc_column]

lightweight_grid_columns_3
上記画像が完成の例です。このショートコードは下記のようになります。

50% + 50%

[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/lgc_column]
[lgc_column grid="50" tablet_grid="50" mobile_grid="100" last="false"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/lgc_column]

33% + 33% + 33%

[lgc_column grid="33" tablet_grid="50" mobile_grid="100" last="false"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/lgc_column]
[lgc_column grid="33" tablet_grid="50" mobile_grid="100" last="false"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/lgc_column]
[lgc_column grid="33" tablet_grid="50" mobile_grid="100" last="false"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/lgc_column]

35% + 65%

[lgc_column grid="35" tablet_grid="50" mobile_grid="100" last="false"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/lgc_column]
[lgc_column grid="65" tablet_grid="50" mobile_grid="100" last="true"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/lgc_column]
 
Lightweight Grid Columns

【WordPress】軽量で使い易いグリッドフレームワークLightweight Grid Columns

  • LATEST
  • RELATED
  • POPULAR