最小限のパラメータのみで表示した例(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]