~「信」の一字からはじめよう~

協同組合 信|仙台の一般監理団体(優良基準適合)

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://images.unsplash.com/photo-1616628198591-eaa25811775b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxODc4NA&ixlib=rb-1.2.1&q=85']
[cssslide imgurl='https://images.unsplash.com/photo-1616627974584-fe184eee3645?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTA3OA&ixlib=rb-1.2.1&q=85']
[cssslide imgurl='https://images.unsplash.com/photo-1616464916356-3a777b2b60b1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTA3OA&ixlib=rb-1.2.1&q=85']
[cssslide imgurl='https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTExOQ&ixlib=rb-1.2.1&q=85']
[cssslide imgurl='https://images.unsplash.com/photo-1634497885778-152eb6fd543d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1Mw&ixlib=rb-1.2.1&q=85']
[cssslide imgurl='https://images.unsplash.com/photo-1616627781431-23b776aad6b2?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1Mw&ixlib=rb-1.2.1&q=85']
[cssslide imgurl='https://images.unsplash.com/photo-1616628198585-6add765244e0?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1OA&ixlib=rb-1.2.1&q=85']
[/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://images.unsplash.com/photo-1616628198591-eaa25811775b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxODc4NA&ixlib=rb-1.2.1&q=85'
 title='スライドタイトル #1']
[cssslide
 imgurl='https://images.unsplash.com/photo-1616627974584-fe184eee3645?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTA3OA&ixlib=rb-1.2.1&q=85'
 title='スライドタイトル #2']
[cssslide
 imgurl='https://images.unsplash.com/photo-1616464916356-3a777b2b60b1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTA3OA&ixlib=rb-1.2.1&q=85'
 title='スライドタイトル #3']
[cssslide
 imgurl='https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTExOQ&ixlib=rb-1.2.1&q=85'
 title='スライドタイトル #4']
[cssslide
 imgurl='https://images.unsplash.com/photo-1634497885778-152eb6fd543d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1Mw&ixlib=rb-1.2.1&q=85'
 title='スライドタイトル #5']
[cssslide
 imgurl='https://images.unsplash.com/photo-1616627781431-23b776aad6b2?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1Mw&ixlib=rb-1.2.1&q=85'
 title='スライドタイトル #6']
[cssslide
 imgurl='https://images.unsplash.com/photo-1616628198585-6add765244e0?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1OA&ixlib=rb-1.2.1&q=85'
 title='スライドタイトル #7']
[/cssslider]

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

  • Slide image

    スライドタイトル #1

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

  • Slide image

    スライドタイトル #1

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

  • Slide image

    スライドタイトル #2

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

  • Slide image

    スライドタイトル #2

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

  • Slide image

    スライドタイトル #3

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

  • Slide image

    スライドタイトル #3

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

  • Slide image

    スライドタイトル #4

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

  • Slide image

    スライドタイトル #4

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

  • Slide image

    スライドタイトル #5

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

  • Slide image

    スライドタイトル #5

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

  • Slide image

    スライドタイトル #6

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

  • Slide image

    スライドタイトル #6

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

  • Slide image

    スライドタイトル #7

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

  • Slide image

    スライドタイトル #7

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

このショートコード

[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://images.unsplash.com/photo-1616628198591-eaa25811775b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxODc4NA&ixlib=rb-1.2.1&q=85'
 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://images.unsplash.com/photo-1616627974584-fe184eee3645?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTA3OA&ixlib=rb-1.2.1&q=85'
 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://images.unsplash.com/photo-1616464916356-3a777b2b60b1?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTA3OA&ixlib=rb-1.2.1&q=85'
 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://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTExOQ&ixlib=rb-1.2.1&q=85'
 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://images.unsplash.com/photo-1634497885778-152eb6fd543d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1Mw&ixlib=rb-1.2.1&q=85'
 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://images.unsplash.com/photo-1616627781431-23b776aad6b2?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1Mw&ixlib=rb-1.2.1&q=85'
 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://images.unsplash.com/photo-1616628198585-6add765244e0?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0OTkxOTE1OA&ixlib=rb-1.2.1&q=85'
 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]
022-357-0924