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

プラグイン「 TwentyTwenty 」をインストールすることでスライドバーを利用した写真のスプリット表示が可能になります。写真系のサイトを構築していると、色調補正や諧調補正を行った写真を、写真の補正前後で並べて比較をさせたいと思ったことはありませんか?表示させる写真を、紙の写真のように上下で重ねてめくって比較させたいと思ったことは?プラグイン「 TwentyTwenty 」がそれを実現してくれます。

ワードプレスで写真の分割表示 TwentyTwenty

1.TwentyTwenty とは?

TwentyTwentyは画像表示のためのワードプレスプラグインです。

上記画像が TwentyTwenty を利用した写真の設置サンプルになります。画像を分割(スプリット)表示し、真ん中のスライダーをはさんで動的に左右で写真を変えることができます。真ん中の線をもって移動してみてください。上記の例では前後で写真の彩度をアップしています。写真の変化を確認するのに非常に便利です。

2.TwentyTwenty プラグインの追加方法

TwentyTwenty を利用するには、WordPressの「プラグイン」から「新規追加」画面で「TwentyTwenty」と入力して検索します。

下記のようにプラグインが表示されるのでインストールし有効化してください。

3.TwentyTwenty プラグインの利用方法

TwentyTwenty の利用方法は非常にシンプルです。2つの画像の表示コードを並べて、その前後を

[twentytwenty][/twentytwenty]

で挟むだけで設置できます。

ワードプレスのビジュアルエディターで、「+」(ブロックの追加)をクリックします。
「フォーマット」の「カスタムHTML」のブロックを追加し、そこにコードを記載します。

4.実際の比較画像サンプル

TwentyTwenty を設置すると、左右にスライダーを動かすことで画像を切り替え、簡単に写真の補正前後比較を行うことができます。

[twentytwenty]
<img src=”https://websvr.org/wp-content/uploads/2019/05/lightroom-classic-HSL03-600×215.jpg” alt=”” class=”wp-image-2067″/>
<img src=”https://websvr.org/wp-content/uploads/2019/05/lightroom-classic-HSL04-600×215.jpg” alt=”” class=”wp-image-2068″/>
[/twentytwenty]
image-quality-test-imagick-logo

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

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

Responsive Photo Gallery 操作が簡単なワードプレスの無料写真ギャラリー

今回は操作がわかりやすくて使いやすいギャラリープラグインの「Responsive Photo Gallery – Images Gallery...

ワードプレスの素敵なギャラリー Unite Gallery にできること

今回はWordpress(ワードプレス)のギャラリープラグイン「Unite Gallery」について図解説したいと思います。Unite Gallery には無料の「Unite...

サイトの高速化 写真のWebP化の方法 Photoshop利用

サイトの高速化の方法のひとつに、表示させる写真や画像に次世代フォーマットを利用するというものがあります。次世代フォーマットにはいくつか案があるのですが、今回はGoogleが開発している...

Pin It on Pinterest