route PHOTOSTUDIO

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

ハイ、チーズ


みんな知っている魔法の言葉
写ったのは家族を繋ぐ満面の笑顔
写真って魔法。
あの頃に戻って
何度も笑顔にしてくれるから
今日も「ハイ、チーズ」
写すのは大切な想い

写すのは大切な想い

大切な人と出会い
大事なあなたを授かった
大切で 大事な 時間が流れる
幸せなふとした時に思い出す
幼い頃の父と母の優しい笑顔

二度とは戻らないこの瞬間を
大切に 大事に　写します。

撮影プラン

暖かく小さな奇跡

2016年以来国内外で活躍するニューボーンフォト
グラファーのセミナーに参加。
新生児撮影400人を超える実績。
赤ちゃんの安全は勿論、出産間も無いママにも
安心を与えるそんな撮影を心がけています
新しい命の誕生を一緒にお祝いさせてもらいます
暖かく、優しい世界で1番可愛い一枚を
安心安全に撮影します。

詳しくはこちら
暖かく小さな奇跡

一瞬を永遠に

写真を眺めると当時の様子、想い、そして匂いまで感じたことはありませんか。
甦る私の大切な思い出
そんな一枚を残したいとroute PHOTOSTUDIOは2015年土佐市で誕生しました
一枚の写真が明日への一歩へ　そっと背中を押してくれると信じて

ルートフォトスタジオの
カメラマン

専門学校で保育士資格を取得後　日本写真映像専門学校映像専門学校へ

卒業後、現在創業90年を超える老舗写真館で修行
後、夢を叶えるべく東南アジア、アフリカ大陸、トルコへ
バックパッカーの旅へ
帰国後フリーランスを経験後

2015年土佐市にroute PHOTOSTUDIO立ち上げ
2020年河ノ瀬町へ移店

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

Access