ワードプレス(WordPress)で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。 Divi でもそのプラグインは利用できるのですが、さらに便利にした「Before + After Images for Divi」が使えます。今回はそのご紹介をしたいと思います。

Divi チップス
Before + After Images for Divi のインストール

1.Before + After Images for Divi のインストール

Before + After Images for Divi をインストールするには、ワードプレスダッシュボードの「プラグイン」>「新規追加」で、「 Before 」と入力して下記を検索します。

「今すぐインストール」をクリックしてインストールし、「有効化」します。

2.Before + After Images for Divi を利用する

1)Before + After Images のモジュールを追加する

Before + After Images for Divi を利用するには、

モジュールを挿入で「Before + After Images」をクリックします。

2)前後比較を行う画像を追加する

前後で比較したい画像2つを、 Before + After Images モジュールに追加します。モジュールの設定を開き、 Before Image(前画像) 、 After Image(後画像) のそれぞれの「+ Add Image」をクリックします。

メディアライブラリが開くので、設定したい画像を選択して、

右下の添付ファイルの表示設定で画像のサイズを選んで「Upload an Image」をクリックします。

Befor と After の画像がそれぞれ配置されます。

「✔(チェックマーク)」をクリックし承認(保存)すると、サイトに下記のようにバーが配置された画像が追加されます。

しかし、既定のサイズでは画像のサイズと合っていません。

3)画像の表示サイズを変更する

画像の表示サイズを変更するには、

「詳細」タブを開き「Attibutes」をクリックします。 
Image Size で画像のサイズを選びます。いろいろなサイズから選べます。
ただ、好きなサイズにはできないので、表示させたい大きさの画像を用意しておいて Full Size を選択するのが良いでしょう。

3.Before + After Images for Divi の表示サンプル

画像上のスライドバーを動かしてみてください。前後で画像の表示が切り替わります、

表示サイズは Full Size としています。

4.もしエラー(警告)が出てしまったら

サーバの PHP バージョンによって、「 Warning: A non-numeric value encountered in 」というエラー(警告)が出てしまうことがあります。エラーが出てしまう場合は下記の対策を実施ください。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。


Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648

Warning: A non-numeric value encountered in /home/sweb/www/websvr2/wp-includes/media.php on line 648
image-quality-test-imagick-logo

ImageMagick の設定方法と写真画質比較

さくらのレンタルサーバーを使い WordPress(ワードプレス)のクイックインストールを行うと、標準で ImageMagick...

Pin It on Pinterest