cucinaamica

コンディショニング料理

メニュー

フレックスボックス用ショートコード

コンディショニング料理とは?

食材のよさを最大限に引き出し、美味しい料理をヘルシーに食べていただくため、下処理による余分な脂などの徹底除去や、食材の組み合わせによる栄養素の吸収率UPなど、美味しいものを美味しく食しながらも、できるだけ体のためになるような調理法を施した料理を私共はコンディショニング料理と呼んでいます。

menu

商品開発

料理研究家として、飲食店や自治体に対して地域の特産品を使った商品開発や、大手百貨店や企業・飲食店などへのレシピ提供を行っております。
このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です
22.0〜 19.0〜 11〜 6.1〜 12.10〜 4.4〜 7.1〜

任意の複数コンテンツを横または縦に並べたフレックスボックスを表示できます。

最もシンプルな例(パラメータなし)

※視認性のためサンプルは背景カラーを付けています。

[flexbox class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード
[flexbox]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

水平方向に中央寄せした例

[flexbox alignh=”center” class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード
[flexbox alignh="center"]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

右寄せした例

[flexbox alignh=”right” class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード
[flexbox alignh="right"]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

表示幅いっぱいに等間隔に並べた例

[flexbox alignh=”between” class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

このショートコード
[flexbox alignh="between"]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
[/flexitem]
[/flexbox]

表示幅に合わせて自動で等幅表示した例

※既定では要素間は20pxのマージンがあります。

[flexbox flexchildren=1 class=”box”]
[flexitem class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem class=”bg-pink pd10px”]
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
[/flexitem]
[/flexbox]

このショートコード
[flexbox flexchildren=1]
[flexitem]
1つ目のコンテンツ。
[/flexitem]
[flexitem]
2つ目のコンテンツ。
[/flexitem]
[flexitem]
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
[/flexitem]
[/flexbox]

要素間のマージンをなくして等幅表示した例

[flexbox flexchildren=1 class=”box”]
[flexitem margin=0 class=”bg-blue pd10px”]
1つ目のコンテンツ。
[/flexitem]
[flexitem margin=0 class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
[/flexitem]
[flexitem margin=0 class=”bg-pink pd10px”]
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
[/flexitem]
[/flexbox]

このショートコード
[flexbox flexchildren=1]
[flexitem margin=0]
1つ目のコンテンツ。
[/flexitem]
[flexitem margin=0]
2つ目のコンテンツ。
[/flexitem]
[flexitem margin=0]
3つ目のコンテンツ。
要素の個数に合わせて各要素の表示幅が自動で等幅表示されます。
[/flexitem]
[/flexbox]

3番目の要素を他の2倍の幅で自動表示した例

[flexbox class=”box”]
[flexitem flex=1 class=”bg-blue pd10px”]
1つ目のコンテンツ。
flex=1
[/flexitem]
[flexitem flex=1 class=”bg-lightblue pd10px”]
2つ目のコンテンツ。
flex=1
[/flexitem]
[flexitem flex=2 class=”bg-pink pd10px”]
3つ目のコンテンツ。
この要素のみ他のサイズの2倍の幅で表示されるように指定しています。
flex=2
[/flexitem]
[/flexbox]

このショートコード
[flexbox]
[flexitem flex=1]
1つ目のコンテンツ。
flex=1
[/flexitem]
[flexitem flex=1]
2つ目のコンテンツ。
flex=1
[/flexitem]
[flexitem flex=2]
3つ目のコンテンツ。
この要素のみ他のサイズの2倍の幅で表示されるように指定しています。
flex=2
[/flexitem]
[/flexbox]