こっしーんち

3人家族の日々の記録。

セールスパネルショートコード

このショートコードを使用するにはDigiPressテーマ専用のプラグイン(有料)が必要です

最小限のパラメータのみで表示した例(3パネル)

[spanel
row1colnum=’3′
row2colnum=’0′]
[spanelitem
title=’メインタイトル1′
caption=’これはキャプション’
hovertitle=’ホバータイトル’
hovercaption=’マウスオーバー時のキャプション’
bgimg=’https://drive.google.com/uc?export=view&id=12pe8WYPvyvHbUoET1QheRqWgYCmoC_sB’
url=’#遷移先のURL’]
[spanelitem
title=’メインタイトル2′
caption=’これはキャプション’
hovertitle=’ホバータイトル’
hovercaption=’マウスオーバー時のキャプション’
bgimg=’https://drive.google.com/uc?export=view&id=1vN2qQQ1pdqQyDN58wlNnEYmFUj0yP0Li’
url=’#遷移先のURL’]
[spanelitem
title=’メインタイトル3′
caption=’これはキャプション’
hovertitle=’ホバータイトル’
hovercaption=’マウスオーバー時のキャプション’
bgimg=’https://drive.google.com/uc?export=view&id=1b4szhNJNJMzMwK5ZwkeWasQn1M2HOksf’
url=’#遷移先のURL’]
[/spanel]

Code

[spanel
 row1colnum='3'
 row2colnum='0']
[spanelitem
 title='メインタイトル1'
 caption='これはキャプション'
 hovertitle='ホバータイトル'
 hovercaption='マウスオーバー時のキャプション'
 bgimg='https://drive.google.com/uc?export=view&id=12pe8WYPvyvHbUoET1QheRqWgYCmoC_sB'
 url='#遷移先のURL']
[spanelitem
 title='メインタイトル2'
 caption='これはキャプション'
 hovertitle='ホバータイトル'
 hovercaption='マウスオーバー時のキャプション'
 bgimg='https://drive.google.com/uc?export=view&id=1vN2qQQ1pdqQyDN58wlNnEYmFUj0yP0Li'
 url='#遷移先のURL']
[spanelitem
 title='メインタイトル3'
 caption='これはキャプション'
 hovertitle='ホバータイトル'
 hovercaption='マウスオーバー時のキャプション'
 bgimg='https://drive.google.com/uc?export=view&id=1b4szhNJNJMzMwK5ZwkeWasQn1M2HOksf'
 url='#遷移先のURL']
[/spanel]

1行目2カラム + 2行目3カラムで様々なオプション付きで表示した例

[spanel
row1colnum=’2′
row2colnum=’3′
hoverfx=’4′
overlayopacity=’2′
hoveroverlayopacity=’5′
txtshadow=’0′]
[spanelitem
title=’AMP対応’
titlesize=’30px’
titlebold=”
titleitalic=’1′
caption=’デザインと機能を損なわないAMP’
captionsize=’13px’
txtcolor=’#fff’
overlaycolor=’#337fea’
hovertitle=’高度で柔軟なAMPモード’
hovercaption=’詳細はこちら’
hovertxtcolor=’#fff’
hoveroverlaycolor=’#154d91′
bgimg=’https://drive.google.com/uc?export=view&id=12pe8WYPvyvHbUoET1QheRqWgYCmoC_sB’
url=’https://digipress.digi-state.com/about-amp-function/’
newwindow=’1′]
[spanelitem
title=’pjax’
titlesize=’30px’
titlebold=”
titleitalic=’1′
caption=’非同期通信による高速なページ遷移’
captionsize=’13px’
txtcolor=’#fff’
overlaycolor=’#49d17f’
hovertitle=’Ajax + pushState’
hovercaption=’詳細はこちら’
hovertxtcolor=’#fff’
hoveroverlaycolor=’#1c3526′
bgimg=’https://drive.google.com/uc?export=view&id=15s05GoPqIYlEXJccJTfL1_5_7FZICaCi’
url=’https://demo.dptheme.net/dp18/archives/3996′]
[spanelitem
title=’Shortcodes’
titlesize=’27px’
titlebold=”
titleitalic=’1′
caption=’豊富で実用的なショートコード’
captionsize=’13px’
txtcolor=’#fff’
overlaycolor=’#d61156′
hovertitle=’for DigiPress’
hovercaption=’ショートコード一覧をみる’
hovertxtcolor=’#fff’
hoveroverlaycolor=’#9b122e’
bgimg=’https://drive.google.com/uc?export=view&id=1vN2qQQ1pdqQyDN58wlNnEYmFUj0yP0Li’
url=’https://demo.dptheme.net/dp18/archives/1648′]
[spanelitem
title=’メディアスライダー’
titlesize=’25px’
titlebold=”
titleitalic=’1′
caption=’自動再生する動画と画像のスライダー’
captionsize=’13px’
txtcolor=’#fff’
overlaycolor=’#9b9412′
hovertitle=’エフェクトは10種類’
hovercaption=’YouTube, Vimeo, MP4対応’
hovertxtcolor=’#fff’
hoveroverlaycolor=’#4f4b04′
bgimg=’https://drive.google.com/uc?export=view&id=1b4szhNJNJMzMwK5ZwkeWasQn1M2HOksf’
url=’https://demo.dptheme.net/dp18/archives/4121′]
[spanelitem
title=’豊富なレイアウト’
titlesize=’25px’
titlebold=”
titleitalic=’1′
caption=’ハイセンスなアーカイブデザイン’
captionsize=’13px’
txtcolor=’#fff’
overlaycolor=’#0c9eb5′
hovertitle=’+ widget’
hovercaption=’専用ウィジェットも搭載’
hovertxtcolor=’#fff’
hoveroverlaycolor=’#065966′
bgimg=’https://drive.google.com/uc?export=view&id=1-7NeteUOMtiA7DQtu8msXGyRA6Xf8jN8′
url=’https://demo.dptheme.net/dp18/archives/3490′]
[/spanel]

Code

[spanel
row1colnum='2'
row2colnum='3'
hoverfx='4'
overlayopacity='2'
hoveroverlayopacity='5'
txtshadow='0']
[spanelitem
title='AMP対応'
titlesize='30px'
titlebold=''
titleitalic='1'
caption='デザインと機能を損なわないAMP'
captionsize='13px'
txtcolor='#fff'
overlaycolor='#337fea'
hovertitle='高度で柔軟なAMPモード'
hovercaption='詳細はこちら'
hovertxtcolor='#fff'
hoveroverlaycolor='#154d91'
bgimg='https://drive.google.com/uc?export=view&id=12pe8WYPvyvHbUoET1QheRqWgYCmoC_sB'
url='https://digipress.digi-state.com/about-amp-function/'
newwindow='1']
[spanelitem
title='pjax'
titlesize='30px'
titlebold=''
titleitalic='1'
caption='非同期通信による高速なページ遷移'
captionsize='13px'
txtcolor='#fff'
overlaycolor='#49d17f'
hovertitle='Ajax + pushState'
hovercaption='詳細はこちら'
hovertxtcolor='#fff'
hoveroverlaycolor='#1c3526'
bgimg='https://drive.google.com/uc?export=view&id=15s05GoPqIYlEXJccJTfL1_5_7FZICaCi'
url='https://demo.dptheme.net/dp18/archives/3996']
[spanelitem
title='Shortcodes'
titlesize='27px'
titlebold=''
titleitalic='1'
caption='豊富で実用的なショートコード'
captionsize='13px'
txtcolor='#fff'
overlaycolor='#d61156'
hovertitle='for DigiPress'
hovercaption='ショートコード一覧をみる'
hovertxtcolor='#fff'
hoveroverlaycolor='#9b122e'
bgimg='https://drive.google.com/uc?export=view&id=1vN2qQQ1pdqQyDN58wlNnEYmFUj0yP0Li'
url='https://demo.dptheme.net/dp18/archives/1648']
[spanelitem
title='メディアスライダー'
titlesize='25px'
titlebold=''
titleitalic='1'
caption='自動再生する動画と画像のスライダー'
captionsize='13px'
txtcolor='#fff'
overlaycolor='#9b9412'
hovertitle='エフェクトは10種類'
hovercaption='YouTube, Vimeo, MP4対応'
hovertxtcolor='#fff'
hoveroverlaycolor='#4f4b04'
bgimg='https://drive.google.com/uc?export=view&id=1b4szhNJNJMzMwK5ZwkeWasQn1M2HOksf'
url='https://demo.dptheme.net/dp18/archives/4121']
[spanelitem
title='豊富なレイアウト'
titlesize='25px'
titlebold=''
titleitalic='1'
caption='ハイセンスなアーカイブデザイン'
captionsize='13px'
txtcolor='#fff'
overlaycolor='#0c9eb5'
hovertitle='+ widget'
hovercaption='専用ウィジェットも搭載'
hovertxtcolor='#fff'
hoveroverlaycolor='#065966'
bgimg='https://drive.google.com/uc?export=view&id=1-7NeteUOMtiA7DQtu8msXGyRA6Xf8jN8'
url='https://demo.dptheme.net/dp18/archives/3490']
[/spanel]

Carousel Slider