リリース後より多くの既存ユーザー様にも導入いただいている DigiPressテーマ専用のショートコード集プラグインに新たに「ハイライトコンテンツ用ショートコード」が追加されました。
ハイライトコンテンツショートコード使用例1
表示中のコンテンツがフェードアウトしてから次のコンテンツをフェードインさせる場合。
このショートコード
[highlighter time=2000 fadetime=1200] [highlight class="ft18px b"] 最初の<span class="ft22px pink">ハイライトコンテンツ</span>。18ピクセルで太字。 [/highlight] [highlight class="ft20px blue b"] 20ピクセルのフォントでブルー、太字のハイライトコンテンツ。 [/highlight] [highlight class="ft18px b icon-raceflag"] 先頭にアイコンを表示。<a href="#" class="icon-new-tab">これはリンク</a>です。 [/highlight] [/highlighter]
ハイライトコンテンツショートコード使用例2
フェードイン、フェードアウトを同時に行ってコンテンツを切り替えた場合。
※コンテンツに画像を指定することで簡易スライドショーとしても利用できます。
このショートコード
[highlighter type=1 time=2800] [highlight] <img src="https://digipress.info/themes/dp7/wp-content/uploads/sites/2/iSGu85T8TXS9zXJ20iBU__MG_9585-620x314.jpg" alt="iSGu85T8TXS9zXJ20iBU__MG_9585" width="620" height="314" class="aligncenter size-large wp-image-1742" /> [/highlight] [highlight] <a href="https://digipress.info/themes/dp7/wp-content/uploads/sites/2/kVEPcWcfSA2tgOpRz9Za__DSC0765.jpg"><img src="https://digipress.info/themes/dp7/wp-content/uploads/sites/2/kVEPcWcfSA2tgOpRz9Za__DSC0765-620x410.jpg" alt="kVEPcWcfSA2tgOpRz9Za__DSC0765" width="620" height="410" class="aligncenter size-large wp-image-1743" /></a> [/highlight] [highlight] <img src="https://digipress.info/themes/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg" alt="This is caption" width="620" height="422" class="size-large wp-image-1738" /> [/highlight] [highlight] <img src="https://digipress.info/themes/dp7/wp-content/uploads/sites/2/camera-man-620x413.jpg" alt="camera-man" width="620" height="413" class="aligncenter size-large wp-image-1737" /> [/highlight] [/highlighter]
また、プラグインの最新バージョンではこれ以外に、PRボックス用ショートコードをさらに拡張しマウスホバー時にアイコンを回転したりズームアニメーションを指定できるオプションが追加されました。
PRボックス用ショートコード(ホバーアニメーション有効)
このハイライトコンテンツ用ショートコードとホバーアニメーションを活用したPRボックス用ショートコードの具体的な使用イメージは、以下「el plano」のデモサイトのトップページでご覧いただけます。
DigiPressテーマの導入をご検討の方は、併せてこのショートコード集プラグインの導入も是非ご検討ください！