DigiPress

Highly Flexible WordPress Theme

メニュー

cssslider : CSSのみで動作する超軽量なサムネイル付きスライダー

cssslider : CSSのみで動作する超軽量なサムネイル付きスライダー
このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です

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

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

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

  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image
  • Slide image

このショートコード

[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]

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

  • Slide image

    スライドタイトル #1

  • Slide image

    スライドタイトル #1

  • Slide image

    スライドタイトル #2

  • Slide image

    スライドタイトル #2

  • Slide image

    スライドタイトル #3

  • Slide image

    スライドタイトル #3

  • Slide image

    スライドタイトル #4

  • Slide image

    スライドタイトル #4

  • Slide image

    スライドタイトル #5

  • Slide image

    スライドタイトル #5

  • Slide image

    スライドタイトル #6

  • Slide image

    スライドタイトル #6

  • Slide image

    スライドタイトル #7

  • Slide image

    スライドタイトル #7

このショートコード

[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枚表示させた例

  • Slide image

    スライドタイトル #1

    スライド #1 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #1

    スライド #1 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #2

    スライド #2 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #2

    スライド #2 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #3

    スライド #3 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #3

    スライド #3 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #4

    スライド #4 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #4

    スライド #4 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #5

    スライド #5 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #5

    スライド #5 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #6

    スライド #6 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #6

    スライド #6 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #7

    スライド #7 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #7

    スライド #7 のキャプションをここに表示します。

このショートコード

[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]

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

  • Slide image

    スライドタイトル #1

    スライド #1 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #1

    スライド #1 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #2

    スライド #2 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #2

    スライド #2 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #3

    スライド #3 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #3

    スライド #3 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #4

    スライド #4 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #4

    スライド #4 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #5

    スライド #5 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #5

    スライド #5 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #6

    スライド #6 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #6

    スライド #6 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #7

    スライド #7 のキャプションをここに表示します。

  • Slide image

    スライドタイトル #7

    スライド #7 のキャプションをここに表示します。

このショートコード

[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) と 子要素(cssslide) でネスト(入れ子)にする必要があり、子要素で括ったコンテンツが1スライド分のコンテンツとなります。
  • Table of Contents Plus」(TOC)プラグインを利用し、スムーズ・スクロールを有効にしている場合は、サムネイルをクリックすると対象スライドの位置に自動的にスクロールされてしまいます。該当プラグインにてスムーズ・スクロールを無効にしてください。
  • その他、プラグイン等によりハッシュリンク(#〜)をクリックするとページ内の任意の要素へスクロールさせるような制御を行っている場合は、.to_target_slide セレクタに関してはスムーズ・スクロールの対象外とするようにしてください。

指定可能なパラメータ(cssslider ※親)

fx
このスライダーのスライドが切り替わるトランジション効果のタイプを「hslide」(水平スライド)、「vslide」(垂直スライド)、「fede」(フェードイン)から指定します。

未指定の場合は 「hslide」(水平スライド)で表示します。

指定可能な値

  • 1 または hslide : 水平にスライドして切り替えます(既定値)。
  • 2 または vslide : 垂直にスライドして切り替えます。
  • 3 または fade : フェードインで切り替えます。

例 : fx=fade, fx=3, fx=vslide など。

height
このスライダー自体の高さを、CSS で指定可能な単位付き(px, vw, vh など)で指定します。

未指定の場合は 「34vw」(ビューポート(表示幅)に対して34%の幅を高さとしてレスポンシブ) で表示します。

パーセンテージ(%)は利用できません。

例 : height=34vw, height=40vh, height=500px など。

navwidth
サムネイルナビゲーションの表示幅を CSS で指定可能な単位付き(%, px, vw など)で指定します。
このパラメータは、スライダー全体の高さ(height)との兼ね合いで調整してください。
このスライダー全体の表示幅に対するパーセンテージ(%)での指定を推奨します。

未指定の場合は、スライダー全体の表示幅に対して「22%」の幅でサムネイルナビゲーションが表示されます。

例: navwidth=20%, navwidth=220px, navwidth=18vw など

navitemsatonce
サムネイルナビゲーションのスライドを、可視エリアに一度に何枚まで表示するかを 2〜6 の間(2〜6枚まで)で指定します。

未指定の場合は、一度にサムネイルスライドは5枚まで表示し、6枚以上は下にスクロールして表示可能になります。

例: navitemsatonce=4

id
スライダーコンテンツ全体を括る div 要素に固有のIDを明示したい場合に、その値を指定します。

例 : id=’my-id’

class
スライダーコンテンツ全体を括る div 要素に指定するclassがある場合にそのクラス名を指定します。

例 : class=”my-class”

style
スライダーコンテンツ全体を括る div 要素に指定する任意のスタイルを直接指定できます。

例 : style=”border:1px solid #ccc;”

指定可能なパラメータ(cssslide ※子)

imgurl (必須)
対象スライドに表示する画像 URL を指定します。このパラメータは必須です。

例: imgurl=’https://yoursite.com/img/slide.jpg’

title
対象スライド上に表示されるメインタイトルを指定します。

例 : title=’メインタイトル’

titlesize
対象スライド上に表示されるタイトルのフォントサイズを規定値(35ピクセル)から変更する場合に、そのサイズをCSSで解釈可能な単位付きの値(24px, 1.8em, 140% など)で指定します。

例 : titlesize=24px, titlesize=2.1em, titlesize=140% など。

titlebold
対象スライド上に表示されるタイトルの太字を無効にする場合に、「0」または「false」を指定します。

未指定の場合は「1」(= true)で表示します。

例 : titlebold=0

titleitalic
対象スライド上に表示されるタイトルをイタリック調(斜体)にする場合に、「1」または「true」を指定します。

例 : titleitalic=1

titlecolor
対象スライド上に表示されるタイトルのフォントカラーHEX値のカラーコードやRGBA値で指定できます。

このカラーは直下に表示されるキャプションにも反映されます。

例 : titlecolor=#444, titlecolor=’rgba(255,255,255,0.82)’ など。

titlebgcolor
対象スライドのタイトルエリアの背景カラーHEX値のカラーコードやRGBA値で指定できます。

例 : titlebgcolor=#eee, titlebgcolor=’rgba(0,0,0,0.52)’ など。

titlepos
対象スライド上に表示されるタイトルの表示位置を「left」(左側)、「right」(右側)、「center」(中央)から指定します。

未指定の場合は、「left」(左側)で表示されます。

指定可能な値

  • 1 または left : タイトルを左側に表示します(既定値)。
  • 2 または right : タイトルを右側に表示します。
  • 3 または center : タイトルを中央に表示します。

例 : titlepos=2, titlepos=center など。

caption
対象スライド上に表示されるタイトル直下のキャプションを指定します。

例 : caption=’Highly Flexible WordPress Theme’

captionsize
対象スライドのタイトル直下に表示されるキャプションのフォントサイズを規定値(13.5ピクセル)から変更する場合に、そのサイズをCSSで解釈可能な単位付きの値(14px, 0.92em, 92% など)で指定します。

例 : captionsize=14px, captionsize=0.92em, captionsize=92% など。

btnurl
対象スライドのタイトルエリアの最後に、関連ページや詳細ページへのアクセスを促すための参照リンクボタン用のURLを指定します。

例: btnurl=’https://digipress.info/’

btntxt
対象スライドのタイトルエリアの最後に、関連ページや詳細ページへのアクセスを促すための参照リンクに表示するボタンテキストを指定します。

このオプションは「btnurl」パラメータで参照先のURLが指定されている場合のみ有効です。

例: btntxt=’詳しくはこちら’, btnbgcolor=’参考’ など。

btnbgcolor
対象スライドのタイトルエリアの最後に、関連ページや詳細ページへのアクセスを促すための参照リンクに表示するリンクボタンの背景カラーを指定します。

未指定の場合は「#57a7d6」のボタンカラーになります。

このオプションは「btnurl」パラメータで参照先のURLが指定されている場合のみ有効です。

リンクボタンのフォントカラーは白(#fff)が規定値であるため、白以外のボタンテキストが見にくくならない背景カラーを指定してください。
class
対象スライドを括る li 要素に指定する class がある場合にそのクラス名を指定します。

例 : class=”my-class”

style
対象スライドを括る li 要素に指定する任意のスタイルを直接指定できます。

例 : style=”border:1px solid #ccc;”