ブログで写真を比較できるプラグイン「Twenty20 Image Before‐After」の使い方を解説

twenty20の使い方blog
スポンサーリンク
もっちゃん
もっちゃん

今回は、写真のビフォーアフターを
分かりやすく表示できるプラグインを紹介します!

ブログに写真を載せるときって、通常だと2カラムにして表示したり、1つの画像を中心で切って表現したりしますよね。

夏
夏2

ですがこれだと視覚的に変化が分かりにくいと思いませんか?

そこで今回紹介するプラグインを使えば、画像内でスライドすることで色や明るさのの変化がとても良く実感できます。

そんな「Twenty20 Image Before-After」の使い方を解説します!

写真を多く使ってるブロガーさんにおすすめですよ。

記事での使用例はこちら↓

プラグインのインストールと有効化

まずは、プラグインの新規追加から「Twenty20 Image Before-After」と検索します。

twenty20インストール

そうしたら、インストールして「有効化」までしましょう。

プラグインの画面に設定画面などはありません。

少し使い方がややこしいので、細かく解説していきます。

Twenty20 Image Before-Afterの使い方

このプラグインは現状だと、Gurtenbelg(ブロックエディター)に対応していません。

ですが使えないわけではなく、ショートコードを使うことで出来ます

なので、

  • クラシックエディター
  • ブロックエディタ―

この2つで分けて解説してきます。

Classic Editorでの使い方

こちらで使う場合は、比較的簡単に作成できます。

twenty20-1

このようにボタンが表示されるのでそれをクリックします。

twenty20-2

次に比較したい画像をbefore→afterの順に選択して、右下のinsertをクリックします。

twenty20-3

するとこのような画面になります。
ここでは赤文字で書いてあるように、必要な情報を入力していきます。

これはコードにあたる部分なのですが、詳しくはブロックエディタの方で紹介してます。

入力したら、左下にある「Insert shortcode」ボタンをクリック。

twenty20-4

するとこのようにショートコードが自動で挿入されます。

この設定だと、下の画像のようになります。

夏夏2

もっちゃん
もっちゃん

これで完了です!

Gurtenbelg(ブロックエディタ―)での使い方

Classic Editorの場合は自動でショートコードが入力されましたが、Gurtenbergの場合は手動でショートコードを入力する必要があります。

ブロックエディタ―での使い方

  1. ショートコードを入力
  2. 画像のIDを調べる
  3. 必要ならコードを追記する

こういった流れです。順にみていきますね。

1.ショートコードを入力

こちらのコードですが、貼り付けるとこうなります。

夏夏2

この“画像ID”の部分を次に紹介するID番号に書き換えます

画像のIDを調べる

記事を書いてる途中ならば、メディアライブラリを別タブで開いて画像のIDを確認します。

IDとは下の写真の赤枠部分にある item=○○の数字部分です。

twenty20-5

これを比較するでそれぞれの写真で確認します。

先ほどのひまわりの画像はIDが2898だったので、
左側に写真を入れる場合(左側画像ID)の部分を消して数値を入れます。

画像のalt属性は入れておこう

ショートコードで入力する際には、alt属性もきちんとhtmlに反映してくれるので「メディアライブラリ」であらかじめ画像の名称は入れておきましょう

というのも、ブロックエディタ―のように編集画面で画像にalt属性を入れるのはできないからです。

3.必要ならコードを追加する

コードを追加することで、バーの位置や画像に記載される文字などを変更できます。

具体的には、

入力値パラメーター
(この範囲で””の間に入力)
初期値変わること
offset=””0~10.5バーの初期位置が変わります
(1で右端から)
direction=””horizontal・verticalhorizontalバーを縦か横か変更します
(horizontalは横)
before=””テキストbefore画像に名称を入れます
(例.加工前、修正前など)
after=””テキストafter画像に名称を入れます
align=””none・right・leftnone要素の表示位置です
width=””pxまたは%100%要素の横幅です
hover=””true・falsefalseバーの動かし方
true:カーソルに自動で付く
false:クリックで動かす

このような感じです。変更したい部分のみ、offset=”0.5″の横に書いてください

「vertical」と「hoverをtrue」に変更した場合こうなります。

夏夏2

バーが縦向きになったのに加えて、カーソルを合わせるだけで移動するようになりました。

もっちゃん
もっちゃん

offsetの値は小数単位で調整できます

まとめ 画像比較で視覚的に分かりやすく

まとめ

写真を並べるだけでは分かりにくい情報も、
今回のように視覚的に分かりやすくすることでより魅力的になります。

もっちゃん
もっちゃん

ちょっとした工夫ですが、出来るブログ感ありますよね!

写真ブログや、部屋のインテリアブログなどに使えそうなツールなのでぜひ利用してみてくださいね!

コメント

タイトルとURLをコピーしました