このショートコードを使用するには「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]
垂直にスライド、高さを変更、スライドにタイトルを表示した例
[csssliderfx=’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枚表示させた例
[csssliderfx=’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]
その他複数のパラメータを指定した表示例
[csssliderfx=’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]