highlighter / highlight : テキストなどをフェードイン・アウトさせてハイライト表示

このショートコードを使用するには「Shortcodes for DigiPress」または「DigiPress Ex – Shortcodes」プラグインが必要です

フェードアウトしてからフェードインする場合の例

最初のハイライトコンテンツ。18ピクセルで太字。

20ピクセルのフォントでブルー、太字のハイライトコンテンツ。

先頭にアイコンを表示。これはリンクです。

このショートコード

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

フェードイン・フェードアウトを同時にした場合の例

以下のようにハイライトコンテンツとして画像を指定し、フェードイン・アウトを同時に行うようにすると簡易スライドショーとして利用できます。

このショートコード

[highlighter type=1 time=2800]
[highlight]
<img src="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/iSGu85T8TXS9zXJ20iBU__MG_9585-620x314.jpg" width="620" height="314" class="aligncenter" />
[/highlight]
[highlight]
<img src="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/Z3LXxzFMRe65FC3Dmhnp_woody_unsplash_DSC0129.jpg" width="620" height="410" class="aligncenter" />
[/highlight]
[highlight]
<img src="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/girl-flowers1-620x422.jpg" alt="This is caption" width="620" height="422" class="aligncenter" />
[/highlight]
[highlight]
<img src="https://demo.dptheme.net/dp7/wp-content/uploads/sites/2/camera-man-620x413.jpg" alt="camera-man" width="620" height="413" class="aligncenter" />
[/highlight]
[/highlighter]

注意事項

このショートコードは親用のコード(highlighter)と子用のコード(highlight)でネスト(入れ子)にする必要があり、子(highlight)で括ったコンテンツが1つあたりのハイライトコンテンツの内容となります。

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

class

ハイライトコンテンツの親となるブロック(div)に指定する任意の CSSクラスを指定できます。

例 : class=”mg40px-btm”

style

ハイライトコンテンツの親となるブロック(div)に指定する任意のスタイルを直接指定できます。

例 : style=”margin:20px 0 40px 0;”

type

ハイライトコンテンツのトランジション(入れ替わり)の際のフェード動作について指定します。
未指定の場合(type=0)は表示中のコンテンツが完全にフェードアウトしてから次のコンテンツがフェードインして表示されます。

「1」または「slideshow」を指定すると、トランジションの際はフェードインとフェードアウトが同時に行われます。

例 : type=1, type=”slideshow”

time

ハイライトコンテンツが切り替わるまでの表示時間をミリ秒(1秒 = 1000)で指定します。
未指定の場合は「3000」(3秒)がセットされます。

例 : time=5800

fadetime

ハイライトコンテンツのトランジション(切り替わり)時のフェード時間をミリ秒(1秒 = 1000)で指定します。
未指定の場合は「2000」(2秒)がセットされます。

例 : fadetime=2800

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

class

個々のハイライトコンテンツのブロック全体(div)に指定する任意の CSSクラスを指定できます。

例 : class=”ft30px b icon-crown”

style

個々のハイライトコンテンツのブロック全体(div)に指定する任意のスタイルを直接指定できます。

例 : style=”font-size:48px;”