2枚の写真でビフォーアフターを作成「Nelio Compare Images」の使い方

ダイエットやリフォームなどこういった内容の記事って
ビフォーアフターの写真を使っていることが多いですよね。
視覚的にはっきりとした比較ができるので説得力が増します。
これってブログでも使えますよ。
写真系ならコントラストや色彩、ダイエットならお腹のへこみなどなど
記事にビフォーアフターを使うことでわかりやすくなります。
そこで2枚の写真でスライド式のビフォーアフター画像を作成する
プラグイン「Nelio Compare Images」の紹介です。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。

Nelio Compare Imagesとは

WordPressで作成したブログにビフォーアフター画像を作成するプラグインです。
ブロックエディター対応なので
投稿編集中にビフォーの写真、アフターの写真を設定するだけで
簡単にスライド式のビフォーアフター画像を作成できます。
また、タイトル入力も可能になっています。

プラグイン「Nelio Compare Images」のインストール

それでは始めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。

プラグインを追加のページが表示されたら
キーワード検索欄に「Nelio Compare Images」と入力しましょう。
検索結果は、自動で反映されます。

Nelio Compare Imagesを見付けたら
「今すぐインストール」をクリックします。
＊下の方や右側、または違うページにある場合があります。

インストールが終わると「有効化」をクリックしましょう。

有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。

これでNelio Compare Imagesのインストールは終わりです。

ビフォーアフター画像の作成・設置

ここでは投稿に2枚の画像からビフォーアフター画像を作成していきます。
ブロックエディターなので簡単ですよ。

それでは管理メニューから
「投稿」→「新規追加」で通常の投稿記事作成ページに移動しましょう。

投稿作成ページが開いたら適当にタイトルを入力します。

「＋」ボタンをクリックして
ブロック検索で「compare」と入力し
Compare Imagesブロックをクリックしましょう。

Compare Imagesブロックが表示されたら
上からビフォー画像、アフター画像を設定していきます。

まずはビフォー画像を設定するために
「メディアライブラリ」をクリックしましょう。
＊アップロードする場合はアップロードから行ってください。

メディアライブラリが開いたら
ビフォー画像を選んで「選択」をクリックしましょう。

画像が設定されるので
続いてアフター画像を設定していきます。
「メディアライブラリ」をクリックしましょう。

先ほどと同じように
アフター画像を選んで「選択」をクリックします。

アフター画像も設定したら
下にある箇所にタイトルなどを入力します。
＊入力はどちらでもOKですよ。

画面右側に設定項目があるので簡単に紹介していきます。
＊基本的に何も触らないで大丈夫です。

Settings：　初めに表示されるときのスライドバーの定位置になります。
Before Image：　属性になります。
After Image：　属性になります。

これでビフォーアフター画像の作成・設置は完了です。

ではどのように表示されるのか
「プレビュー」から確認していきましょう。

するとこのようにビフォーアフター画像が表示されます。
スライドバーで自由に動かせることができますよ。
動画を再生して確認してみてください。

これでNelio Compare Imagesの紹介は終わりです。

画像関係のプラグインは他にもいろいろありますよ。
画像をクリックで拡大表示できるものや
インスタグラムの写真をスライド表示するものもあります。
また、タイルを並べたようなギャラリーを設置したり
画像を貼り合わせて3Dキューブを作成するものまでありますよ。
興味のある方はここより参考にしてみてください。

ブログにある写真をクリックで拡大表示「Zoom img」の使い方

ブログ記事にある画像・写真で大きくして見てもらいたいこってありますよね。 そこでクリックすると拡大表示ができる プラグイン「Zoom img」の紹介です。 複雑な設定がないので簡単ですよ。 画像付きで使い方を説明してるので参考にしてみて下さい。

takuweb1.com

インスタグラムの写真をスライドで表示「Social Slider Widget」の使い方

WordPress製のブログならインスタの写真を連動で表示できる。 「Social Slider Widget」の紹介です。 使いやすくてスライドショーにもなる優れもの。 ここでは画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

ギャラリープラグインで写真をタイルのようにレイアウトできるMeow Gallery Block(WordPress)

Meow Gallery BlockというWordPressのプラグインを使うと 画像をタイルのように並べてギャラリーが作れます。 違ったサイズの画像を混ぜるとスタイリッシュですよ。 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

画像を貼り合わせて立体キューブで表示する「Cube 3D Slider」の使い方

ブログで写真を表示するのにギャラリー機能が一般的ですが 他との差別化で楽しく表示するのもいいですよ。 そこで画像を貼り合わせて3Dキューブで回転して表示する プラグイン「Cube 3D Slider」の紹介です。 画像付きで設定、使い方を説明してるので参考にしてみて下さい。

takuweb1.com

まとめ

簡単にビフォーアフター画像を作成するプラグインでした。
一度作ってみると見やすく楽しいですね。
特に感じたのは風景写真のモノクロ、カラーはきれいでした。
あとはトレーニング、減量系です。
もちろん事前にビフォー、アフターの画像を撮っておく必要がありますが
見ていて説得力がありますよ。