G-686EXGH7TL

route PHOTOSTUDIO

CSSスライダーショートコード

ハイ、チーズ


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

写すのは大切な想い

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

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

暖かく小さな奇跡

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

暖かく小さな奇跡

一瞬を永遠に

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

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

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

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

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

このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です

サムネイルナビゲーション付きの CSS のみで動作する超軽量な簡易スライダーを表示できます。

表示幅が 920 ピクセル以下になるとレスポンシブ表示となり、サムネイルナビゲーションはメインスライドの直下に移動します。

画像のみを指定した最もシンプルな表示例

[cssslider] [cssslide imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg’] [cssslide imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg’] [cssslide imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg’] [cssslide imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg’] [cssslide imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-25.jpg’] [cssslide imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg’] [cssslide imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg’] [/cssslider]

このショートコード

[cssslider]
[cssslide imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg']
[cssslide imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg']
[cssslide imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg']
[cssslide imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg']
[cssslide imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-25.jpg']
[cssslide imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg']
[cssslide imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg']
[/cssslider]

垂直にスライド、高さを変更、スライドにタイトルを表示した例

[cssslider
fx=’vslide’
height=’480px’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg’
title=’スライドタイトル #1′] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg’
title=’スライドタイトル #2′] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg’
title=’スライドタイトル #3′] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg’
title=’スライドタイトル #4′] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-25.jpg’
title=’スライドタイトル #5′] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg’
title=’スライドタイトル #6′] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg’
title=’スライドタイトル #7′] [/cssslider]

このショートコード

[cssslider
  fx='vslide'
  height='480px']

[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg'
 title='スライドタイトル #1']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg'
 title='スライドタイトル #2']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg'
 title='スライドタイトル #3']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg'
 title='スライドタイトル #4']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-25.jpg'
 title='スライドタイトル #5']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg'
 title='スライドタイトル #6']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg'
 title='スライドタイトル #7']

[/cssslider]

フェードイン、キャプションを指定、サムネイルナビの幅を28%にして一度に4枚表示させた例

[cssslider
fx=’fade’
navitemsatonce=4
navwidth=28%
height=’30vw’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg’
title=’スライドタイトル #1′
caption=’スライド #1 のキャプションをここに表示します。’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg’
title=’スライドタイトル #2′
caption=’スライド #2 のキャプションをここに表示します。’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg’
title=’スライドタイトル #3′
caption=’スライド #3 のキャプションをここに表示します。’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg’
title=’スライドタイトル #4′
caption=’スライド #4 のキャプションをここに表示します。’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-25.jpg’
title=’スライドタイトル #5′
caption=’スライド #5 のキャプションをここに表示します。’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg’
title=’スライドタイトル #6′
caption=’スライド #6 のキャプションをここに表示します。’] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg’
title=’スライドタイトル #7′
caption=’スライド #7 のキャプションをここに表示します。’] [/cssslider]

このショートコード

[cssslider
  fx='fade'
  navitemsatonce=4
  navwidth=28%
  height='30vw']

[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg'
 title='スライドタイトル #1'
 caption='スライド #1 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg'
 title='スライドタイトル #2'
 caption='スライド #2 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg'
 title='スライドタイトル #3'
 caption='スライド #3 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg'
 title='スライドタイトル #4'
 caption='スライド #4 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-25.jpg'
 title='スライドタイトル #5'
 caption='スライド #5 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg'
 title='スライドタイトル #6'
 caption='スライド #6 のキャプションをここに表示します。']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg'
 title='スライドタイトル #7'
 caption='スライド #7 のキャプションをここに表示します。']

[/cssslider]

その他複数のパラメータを指定した表示例

[cssslider
fx=’hslide’
navitemsatonce=6
navwidth=22%
height=’32vw’
id=’my-cssslider’
class=’my-cssslider’
style=”] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg’
title=’スライドタイトル #1′
titlesize=34px
titlebold=0
titleitalic=1
titlecolor=#333
titlebgcolor=’rgba(255,255,255,0.82)’
titlepos=center
caption=’スライド #1 のキャプションをここに表示します。’
captionsize=14px
btntxt=’詳しくはこちら’
btnurl=’https://digipress.info/’
btnbgcolor=’#778393′
class=”
style=”] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg’
title=’スライドタイトル #2′
titlesize=34px
titlebold=1
titleitalic=1
titlecolor=#fff
titlebgcolor=’rgba(0,0,0,0.62)’
titlepos=right
caption=’スライド #2 のキャプションをここに表示します。’
captionsize=14px
btntxt=’詳しくはこちら’
btnurl=’https://digipress.info/’
btnbgcolor=’#778393′
class=”
style=”] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg’
title=’スライドタイトル #3′
titlesize=34px
titlebold=0
titleitalic=1
titlecolor=#333
titlebgcolor=’#fff’
titlepos=left
caption=’スライド #3 のキャプションをここに表示します。’
captionsize=14px
btntxt=’詳しくはこちら’
btnurl=’https://digipress.info/’
btnbgcolor=’#778393′
class=”
style=”] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg’
title=’スライドタイトル #4′
titlesize=34px
titlebold=1
titleitalic=1
titlecolor=#fff
titlebgcolor=’rgba(0,0,0,0.62)’
titlepos=center
caption=’スライド #4 のキャプションをここに表示します。’
captionsize=14px
btntxt=’詳しくはこちら’
btnurl=’https://digipress.info/’
btnbgcolor=’#778393′
class=”
style=”] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-35.jpg’
title=’スライドタイトル #5′
titlesize=34px
titlebold=0
titleitalic=1
titlecolor=#333
titlebgcolor=’#fff’
titlepos=right
caption=’スライド #5 のキャプションをここに表示します。’
captionsize=14px
btntxt=’詳しくはこちら’
btnurl=’https://digipress.info/’
btnbgcolor=’#778393′
class=”
style=”] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg’
title=’スライドタイトル #6′
titlesize=34px
titlebold=1
titleitalic=1
titlecolor=#fff
titlebgcolor=’rgba(0,0,0,0.62)’
titlepos=left
caption=’スライド #6 のキャプションをここに表示します。’
captionsize=14px
btntxt=’詳しくはこちら’
btnurl=’https://digipress.info/’
btnbgcolor=’#778393′
class=”
style=”] [cssslide
imgurl=’https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg’
title=’スライドタイトル #7′
titlesize=34px
titlebold=0
titleitalic=1
titlecolor=#333
titlebgcolor=’rgba(255,255,255,0.82)’
titlepos=center
caption=’スライド #7 のキャプションをここに表示します。’
captionsize=14px
btntxt=’詳しくはこちら’
btnurl=’https://digipress.info/’
btnbgcolor=’#778393′
class=”
style=”] [/cssslider]

このショートコード

[cssslider
  fx='hslide'
  navitemsatonce=6
  navwidth=22%
  height='32vw'
  id='my-cssslider'
  class='my-cssslider'
  style='']

[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-29.jpg'
 title='スライドタイトル #1'
 titlesize=34px
 titlebold=0
 titleitalic=1
 titlecolor=#333
 titlebgcolor='rgba(255,255,255,0.82)'
 titlepos=center
 caption='スライド #1 のキャプションをここに表示します。'
 captionsize=14px
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393'
 class=''
 style='']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-7.jpg'
 title='スライドタイトル #2'
 titlesize=34px
 titlebold=1
 titleitalic=1
 titlecolor=#fff
 titlebgcolor='rgba(0,0,0,0.62)'
 titlepos=right
 caption='スライド #2 のキャプションをここに表示します。'
 captionsize=14px
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393'
 class=''
 style='']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-6.jpg'
 title='スライドタイトル #3'
 titlesize=34px
 titlebold=0
 titleitalic=1
 titlecolor=#333
 titlebgcolor='#fff'
 titlepos=left
 caption='スライド #3 のキャプションをここに表示します。'
 captionsize=14px
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393'
 class=''
 style='']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-60.jpg'
 title='スライドタイトル #4'
 titlesize=34px
 titlebold=1
 titleitalic=1
 titlecolor=#fff
 titlebgcolor='rgba(0,0,0,0.62)'
 titlepos=center
 caption='スライド #4 のキャプションをここに表示します。'
 captionsize=14px
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393'
 class=''
 style='']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-35.jpg'
 title='スライドタイトル #5'
 titlesize=34px
 titlebold=0
 titleitalic=1
 titlecolor=#333
 titlebgcolor='#fff'
 titlepos=right
 caption='スライド #5 のキャプションをここに表示します。'
 captionsize=14px
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393'
 class=''
 style='']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-48.jpg'
 title='スライドタイトル #6'
 titlesize=34px
 titlebold=1
 titleitalic=1
 titlecolor=#fff
 titlebgcolor='rgba(0,0,0,0.62)'
 titlepos=left
 caption='スライド #6 のキャプションをここに表示します。'
 captionsize=14px
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393'
 class=''
 style='']
[cssslide
 imgurl='https://skin.dptheme.net/fresco-wc/wp-content/uploads/sites/33/2019/02/sample-18.jpg'
 title='スライドタイトル #7'
 titlesize=34px
 titlebold=0
 titleitalic=1
 titlecolor=#333
 titlebgcolor='rgba(255,255,255,0.82)'
 titlepos=center
 caption='スライド #7 のキャプションをここに表示します。'
 captionsize=14px
 btntxt='詳しくはこちら'
 btnurl='https://digipress.info/'
 btnbgcolor='#778393'
 class=''
 style='']

[/cssslider]

Access