このショートコードを使用するには「DigiPress Ex – Shortcodes」プラグインが必要です。
ビフォー／アフター用の2枚の画像を重ね合わせて、画像上のコントローラーバーを移動(ドラッグ)することで2枚の画像を見比べることができます。
ビフォー／アフター画像のみ指定した例
このショートコード
[imgcompare beforeimgurl='https://digipress.info/_wp/wp-content/uploads/2021/03/eye-2-1.jpg' afterimgurl='https://digipress.info/_wp/wp-content/uploads/2021/03/eye-1-2.jpg']
コントローラーカラー変更、ラベルあり
このショートコード
[imgcompare beforeimgurl='https://digipress.info/_wp/wp-content/uploads/2021/03/eye-2-1.jpg' afterimgurl='https://digipress.info/_wp/wp-content/uploads/2021/03/eye-1-2.jpg' controllercolor='#f78da7' controllerarc='1' beforelabel='ビフォー' afterlabel='アフター' labelcolor='#ffffff' labelbgcolor='#f78da7' labelbgopacity='44']
垂直方向、表示割合の初期値変更、マウスオーバー追随
このショートコード
[imgcompare beforeimgurl='https://digipress.info/_wp/wp-content/uploads/2021/03/eye-2-1.jpg' afterimgurl='https://digipress.info/_wp/wp-content/uploads/2021/03/eye-1-2.jpg' controllercolor='#ffffff' controllerpos='35' controllervertical='1' hoverstart='1' controllershadow='1' controllerarc='1' controllersmoothness='100' beforelabel='ビフォー' afterlabel='アフター' labelcolor='#ffffff' labelbgcolor='#000000' labelbgopacity='40' labelonhover='1' maxwidth='860' margintop='0' marginbtm='50']
指定可能なパラメータ
- beforeimgurl (※必須)
-
左側(または上)に表示されるビフォー用画像のURLを指定します。
この項目は必須です。例 : beforeimgurl=’https://hogehoge.com/wp-content/uploads/before.jpg’
- afterimgurl (※必須)
-
右側(または下)に表示されるアフター用画像のURLを指定します。
この項目は必須です。例 : afterimgurl=’https://hogehoge.com/wp-content/uploads/after.jpg’
- controllercolor
-
ビフォー／アフター画像の表示割合を切り替える境界線となるコントローラーバーのカラーをHEX値のカラーコードで指定します。
未指定の場合はホワイト(#ffffff)が適用されます。例 : controllercolor=’#000000′
- controllerpos
-
コントローラーバーの初期状態の表示位置(ビフォー画像の表示割合)を半角数値(パーセンテージ)で指定します。
未指定の場合は「50」(50%)が適用されます。例 : controllerpos=38, controllerpos=68% など
- controllerarc
-
コントローラーバーの中心に表示される矢印を円形マーク内に表示するデザインにする場合に「1」または「true」を指定します。
例 : controllerarc=1, controllerarc=true
- controllershadow
-
コントローラーバーにボックスシャドウを表示しない場合に「0」または「false」を指定します。
例 : controllershadow=0, controllershadow=false
- controllervertical
-
コントローラーバーを水平にし、垂直方向(上下)にスライドするスタイルにする場合に「1」または「true」を指定します。
例 : controllervertical=1, controllervertical=true
- controllersmoothness
-
コントローラーバーが移動する際のモーションの滑らかさをミリ秒で指定します。
未指定の場合は「100」ミリ秒が適用されます。例 : controllersmoothness=300
- hoverstart
-
ビフォー／アフター画像上をカーソルがマウスオーバーするとコントローラーバーが追随して移動するスタイルにする場合に「1」または「true」を指定します。
未指定の場合はマウスオーバーではコントローラーバーは移動しません(カーソルのドラッグで移動)。例 : hoverstart=1, hoverstart=true
- beforelabel
-
ビフォー用画像上にラベルを表示する場合にそのテキストを指定します。
このオプションは「afterlabel」パラメータとセットで指定する必要があります。例 : beforelabel=’Before’, beforelabel=’ビフォー’
- afterlabel
-
アフター用画像上にラベルを表示する場合にそのテキストを指定します。
このオプションは「beforelabel」パラメータとセットで指定する必要があります。例 : afterlabel=’After’, afterlabel=’アフター’
- labelcolor
-
ビフォー／アフター画像上に表示されるラベルのフォントカラーをHEX値のカラーコードで指定します。
未指定の場合はホワイト(#ffffff)が適用されます。例 : labelcolor=’#000000′
- labelbgcolor
-
ビフォー／アフター画像上に表示されるラベルの背景カラーをHEX値のカラーコードで指定します。
未指定の場合はブラック(#000000)が適用されます。例 : labelcolor=’#ffffff’
- labelbgopacity
-
ビフォー／アフター画像上に表示されるラベルの背景カラーの不透明度(0〜100%)を半角数値で指定します。
未指定の場合は「33」%が適用されます。例 : labelbgopacity=45, labelbgopacity=52%
- labelonhover
-
ビフォー／アフター画像上のラベルはマウスオーバー時のみに表示させるようにする場合に「1」または「true」を指定します。
例 : labelonhover=1, labelonhover=true
- maxwidth
-
このショートコードのコンテンツ全体の最大表示幅を既定値から変更する場合に半角数値のピクセル値で指定します。
未指定の場合は「860」ピクセルが適用されます。例 : maxwidth=980, maxwidth=1180px など
- margintop
-
このショートコードのコンテンツ上部の余白を半角数値のピクセル値で指定します。
未指定の場合は余白はありません。例 : margintop=50, margintop=40px など
- marginbtm
-
このショートコードのコンテンツ下部の余白を半角数値のピクセル値で指定します。
未指定の場合は「50」ピクセルの余白がとられます。例 : marginbtm=60, marginbtm=80px など
- id
-
このショートコードコンテンツ全体を括るdiv要素に固有のIDを明示したい場合に、その値を指定します。
例 : id=”my-fade-text”
- class
-
このショートコードコンテンツ全体を括るdiv要素に指定するclassがある場合にそのクラス名を指定します。
例 : class=”my-fade-text”
- style
-
このショートコードコンテンツ全体を括るdiv要素に追加する任意のCSSを直接記述できます。
例 : style=”margin-bottom:50px;”