![](https://takuweb1.com/wp-content/uploads/2021/06/nelio.compare.images.png)
ダイエットやリフォームなどこういった内容の記事って
ビフォーアフターの写真を使っていることが多いですよね。
視覚的にはっきりとした比較ができるので説得力が増します。
これってブログでも使えますよ。
写真系ならコントラストや色彩、ダイエットならお腹のへこみなどなど
記事にビフォーアフターを使うことでわかりやすくなります。
そこで2枚の写真でスライド式のビフォーアフター画像を作成する
プラグイン「Nelio Compare Images」の紹介です。
ここでは画像付きで設定、使い方を説明してるので参考にしてみてください。
Nelio Compare Imagesとは
WordPressで作成したブログにビフォーアフター画像を作成するプラグインです。
ブロックエディター対応なので
投稿編集中にビフォーの写真、アフターの写真を設定するだけで
簡単にスライド式のビフォーアフター画像を作成できます。
また、タイトル入力も可能になっています。
プラグイン「Nelio Compare Images」のインストール
それでは始めていきましょう。
WordPressにログインしたら
ダッシュボードから「プラグイン」→「新規追加」へとクリックします。
![](https://takuweb1.com/wp-content/uploads/2021/06/1.png)
プラグインを追加のページが表示されたら
キーワード検索欄に「Nelio Compare Images」と入力しましょう。
検索結果は、自動で反映されます。
![](https://takuweb1.com/wp-content/uploads/2021/06/2.png)
Nelio Compare Imagesを見付けたら
「今すぐインストール」をクリックします。
*下の方や右側、または違うページにある場合があります。
![](https://takuweb1.com/wp-content/uploads/2021/06/3.png)
インストールが終わると「有効化」をクリックしましょう。
![](https://takuweb1.com/wp-content/uploads/2021/06/4.png)
有効化すると自動でインストール済みプラグインのページに移動します。
もし、WordPressバージョンの違いで移動しない場合は
自分で「プラグイン」→「インストール済みプラグイン」に移動しましょう。
![](https://takuweb1.com/wp-content/uploads/2021/06/5.png)
これでNelio Compare Imagesのインストールは終わりです。
ビフォーアフター画像の作成・設置
ここでは投稿に2枚の画像からビフォーアフター画像を作成していきます。
ブロックエディターなので簡単ですよ。
それでは管理メニューから
「投稿」→「新規追加」で通常の投稿記事作成ページに移動しましょう。
![](https://takuweb1.com/wp-content/uploads/2021/06/6.png)
投稿作成ページが開いたら適当にタイトルを入力します。
![](https://takuweb1.com/wp-content/uploads/2021/06/7.png)
「+」ボタンをクリックして
ブロック検索で「compare」と入力し
Compare Imagesブロックをクリックしましょう。
![](https://takuweb1.com/wp-content/uploads/2021/06/8.png)
Compare Imagesブロックが表示されたら
上からビフォー画像、アフター画像を設定していきます。
まずはビフォー画像を設定するために
「メディアライブラリ」をクリックしましょう。
*アップロードする場合はアップロードから行ってください。
![](https://takuweb1.com/wp-content/uploads/2021/06/9.png)
メディアライブラリが開いたら
ビフォー画像を選んで「選択」をクリックしましょう。
![](https://takuweb1.com/wp-content/uploads/2021/06/10.png)
画像が設定されるので
続いてアフター画像を設定していきます。
「メディアライブラリ」をクリックしましょう。
![](https://takuweb1.com/wp-content/uploads/2021/06/11.png)
先ほどと同じように
アフター画像を選んで「選択」をクリックします。
![](https://takuweb1.com/wp-content/uploads/2021/06/12.png)
アフター画像も設定したら
下にある箇所にタイトルなどを入力します。
*入力はどちらでもOKですよ。
![](https://takuweb1.com/wp-content/uploads/2021/06/13.png)
画面右側に設定項目があるので簡単に紹介していきます。
*基本的に何も触らないで大丈夫です。
![](https://takuweb1.com/wp-content/uploads/2021/06/14.png)
Settings: 初めに表示されるときのスライドバーの定位置になります。
Before Image: 属性になります。
After Image: 属性になります。
これでビフォーアフター画像の作成・設置は完了です。
ではどのように表示されるのか
「プレビュー」から確認していきましょう。
![](https://takuweb1.com/wp-content/uploads/2021/06/15.jpg)
するとこのようにビフォーアフター画像が表示されます。
スライドバーで自由に動かせることができますよ。
動画を再生して確認してみてください。
これでNelio Compare Imagesの紹介は終わりです。
画像関係のプラグインは他にもいろいろありますよ。
画像をクリックで拡大表示できるものや
インスタグラムの写真をスライド表示するものもあります。
また、タイルを並べたようなギャラリーを設置したり
画像を貼り合わせて3Dキューブを作成するものまでありますよ。
興味のある方はここより参考にしてみてください。
まとめ
簡単にビフォーアフター画像を作成するプラグインでした。
一度作ってみると見やすく楽しいですね。
特に感じたのは風景写真のモノクロ、カラーはきれいでした。
あとはトレーニング、減量系です。
もちろん事前にビフォー、アフターの画像を撮っておく必要がありますが
見ていて説得力がありますよ。
そこでこれをやらなきゃ損をするということで
ブログ維持のためにアフィリエイトを始めてみませんか。
大きく稼ぐには全力で挑む必要がありますが
ブログ維持費なら片手間でも大丈夫!
気になる方はここよりアフィリエイト会社(ASP)の紹介を見てみましょう。