『Twenty20 Image Before-After』画像でビフォーアフターを表示するプラグイン

ブログ運営

比較画像が簡単に表示できる、サトシ(@donann310)です。

ビフォーアフター写真を見やすく表示したいなぁーと調べると
『Twenty20 Image Before-After』というプラグインを発見しました。
このプラグインを使用すると、簡単にビフォーアフターを画像で表示することができます。

本日は、
WordPressのプラグイン『Twenty20 Image Before-After』の使い方や画像表示の位置などの設定について紹介していきます。

スポンサーリンク

Twenty20 Image Before-Afterの使い方

このプラグインを使うと何ができるのかと言うと、以下のようなビフォーアフター画像を表示することができます。

中央にバーが表示され、そのバーを動かすことで画像の表示を変えることができます。
ビフォーアフターを表示するのに便利なプラグインです。

このプラグインの使い方とを紹介します。

Twenty20 Image Before-Afterの使い方

WordPressのプラグイン『Twenty20 Image Before-After』の使い方を紹介します。
まずは、WordPressのプラグインから、
『Twenty20 Image Before-After』をインストールし有効化します。

Twenty20 Image Before-After

 

このプラグインを有効化すると、記事作成の画面に以下のアイコンが表示されます。

Twenty20 Image Before-After

[Add Twenty20]をクリックして画像を追加していきます。

クリックすると使用したい画像を選択する画面が現れます。ここで画像を2枚選びます。
最初に選んだ写真が左側、2番目に選んだ写真が右側になります。のちに変更も可能です。

Twenty20 Image Before-After

写真を選択してから、細かい設定をしていきます。

Twenty20 Image Before-Afterの詳細設定

ここでは細かく表示する画像の設定を行うことができます。

Before TextとAfter Text

Before TextとAfter Textは画像の説明などを入れることができます。

以上のように文字を表示させることができます。
何も表示したくない場合は、何も入力する必要はありません。

ここでは、加工前、加工後と文字を入れています。Before、Afterと入力もいいですね。

Width

表示する画像の大きさを設定します。

Widthに60%と入力して表示しています。ピクセル数を入力することも可能です。

Offset

Offsetは、スライドバーの位置を設定することができます。

設定に関して、0.5は中央にスライドバーを表示し、0.1から1.0の間で設定します。
0.1は左側にスライドバーを表示させ、1.0は右側にスライドバーを表示させます。
上の画像では、Offsetは0.3に設定しています。

Direction

Directionはスライドバーの向きを設定することができます。

設定は、HorizontalかVerticalを選択することができます。
Horizontalは、縦のスライドバーで、スライドバーを左右に動かすことができます。
Verticalは、横のスライドバーで、スライドバーを上下に動かすことができます。

ここの画像はVerticalを選択しています。

Alignment

表示する画像の位置を設定します。

None、Right、Leftから選択することができます。
Rightを選択すれば、右寄せ。Leftは、左寄せ。

ここでは、Noneを選択しています。
画像を中央揃えする場合は、CSSに以下のコードを入力することで中央に画像を表示させることができます。

.twenty20 {
  margin-left: auto;
  margin-right: auto;
}

 

私は、CSSに中央揃えのコードを入力しているので画像が中央に表示されています。

Move slider on mouse hover

マウスが表示されている画像の上に来たら自動的にスライドバーが動くようにするかどうかを設定します。

ここではMove slider on mouse hoverをYesにしています。
なので、マウスをのせると自動的にスライドバーがマウスの動きに合わせて動きます。

以上が画像の表示に関する設定です。

insert shortcode

insert shortcodeを押すと記事編集画面に以下のショートコードが表示されます。

ここで、width、offset、before、afterをここで変更することも可能です。
directionは、削除するとHorizontalの状態になります。
alignは、削除するとNone、Leftに書き換えることも可能です。
hoverは、削除するとスライドバーを操作する設定になります。

後からでも、ショートコードを変更することで設定をすることができます。

以上が、プラグインの『Twenty20 Image Before-After』の使い方と設定のやり方です。

 

最後に

プラグインの『Twenty20 Image Before-After』の使い方と設定に関して紹介しました。

ビフォーアフターの表示ができるので使い方次第ではいろんな表現ができると思います。
特に写真の設定の違いを示すときや画像の加工の前後を表すときには、とても便利なプラグインです。

簡単に利用することができるのでぜひ使ってみてください。

ブログ運営
スポンサーリンク
satoshiをフォローする
正直、どーなん?

コメント