FRANKIES

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

ご挨拶

2020年、行徳駅にオープンした「Frankies International Bar」のマスター Frank(フランク)です。

長年、日本でのバーテンダーとしてのキャリアがあり日本語も話せます。
もちろんスタッフは全員英語が通じます。

フランキーズはお一人様から団体様、また男性から女性まで自由に楽しめる空間を提供しています。
お客様同士の出会いを求めたり、ゆっくり一人で飲みたい方も、ぜひお気軽にお越しください。

皆さまとお話できるのを楽しみに待っています。
ぜひ気軽に遊びに来て下さい。


このショートコードを使用するには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]