DigiPress

Highly Flexible WordPress Theme

メニュー

imgcompare : 2枚の画像を重ねて比較表示

imgcompare : 2枚の画像を重ねて比較表示

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

ビフォー/アフター用の2枚の画像を重ね合わせて、画像上のコントローラーバーを移動(ドラッグ)することで2枚の画像を見比べることができます。

ビフォー/アフター画像のみ指定した例

Before ImageBefore Image

このショートコード

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

コントローラーカラー変更、ラベルあり

Before ImageBefore Image

このショートコード

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

垂直方向、表示割合の初期値変更、マウスオーバー追随

Before ImageBefore Image

このショートコード

[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;”