写真・画像をスプリット表示させるプラグインTwenty20を使ってみる

画像 スプリット表示 ビフォー・アフター プラグイン

こんにちわ。@hinkyakuraiderです

HDRに興味を持つと、必ずPhotomatixやTopazソフトのホームページに辿り着くことになりますが、それらのホームページでよく見かけるスプリット表示されている画像の真ん中にスライダーがあって、スライダーをスライドさせることで画像を比較するやつ(正式名称とか知らない)が、WordPressだと簡単に導入できるので使ってみることにしました
Twenty20と言うプラグイン(正式名称はTwenty20 Image Before-After)ですが、ビフォー・アフターを比較する時に、わざわざ画像を上下に並べずに楽に比較できます

画像 スプリット表示プラグイン大阪駅 時の広場

ビフォー・アフター画像に使うテキスト表示の有無や、スライダー移動をドラッグかホバーのみでも移動可など、設定からの自由度は高そう

慣れてくれば、1から10までエディタで作成しなくても、画像を2つ選んだ後はコードのみで色々な表示設定を自由に変更できるのも便利そうです。

Twenty20 使い方

このブログは人様へ向けて情報発信をするためでなく、自分が写真を撮った記録用ブログなので、あまり細かいことは書きません。あくまで自分用へのメモなのでかなりハショッて書いてます
Twenty20をインストール・有効化するとエディタ上部にAdd Twenty20ボタンが追加される(①)。基本的にはそのボタンを押せばメディアライブラリが開くので、画像を2つ選ぶだけでスプリット表示させることができる
画像 スプリット表示プラグイン

有効化して表示されたTwenty20ボタンの横にHELPボタンも同時に追加されていて、このヘルプボタンを押せばTwenty20の設定が全て表示される(②)。
用途上、複雑な設定などもなく、英単語さえ知っていれば誰でも問題なく使える感じで、英単語を知らなかったとしてもリストから選んでプレビューすればどうなるかすぐに理解できます

Twenty20使い方
  • Before Text – 左画像のテキスト
  • After Text – 右画像のテキスト
  • With – 画像サイズ
  • Offset – スライダー位置
  • Direction – スライダーの方角(上下・左右)
  • Allgnment – 画像位置
  • Move slider on mouse hover? – スライダーをドラッグ操作かカーソル移動だけで可か

これらの設定を任意で入力すればショートコードが作成される

[twenty20 img1="674" img2="593" offset="0.5" before="Photomatixのみ" after="Topaz Adjust使用" hover="true"]

作成したスプリット画像の設定を後から変更

画像を2つ選んでしまえば後(上)の設定は全てコードの追加や削除だけで変更できるので、少し変更を加えたいからといってまたゼロから作る必要がないのは便利。

テキストは表示無しなら記述不要で、テキストを表示させたいときは before=”テキスト” after=”テキスト”
Offset(スライダー位置)は0.1から1までの数字だがデフォの0.5で問題ない
Direction(スライダーの上下左右方向)はデフォルトが左右。上下にしたい場合はショートコードにdirection=”vertical”を追加
Alignment(画像位置)はデフォルトで問題ないが、右寄せ・左寄せにするなら align=”right、left”のどちらか
mouse hover(ホバー操作)はデフォルト(無記述)でドラッグ操作。ホバー操作を可にするなら hover=”true”

これらをショートコード内に追加したり消すだけ。
コードもbeforeやafter、hoverなど、マニアックな専門用語ではないのも使いやすい

Twenty20で作成した比較画像に影や枠をつける

Chromeのデベロッパツールを使って、Twenty20で作成したスプリット画像のidを調べると”twentytwenty-container”となっていた。
style.cssを汚すのは嫌いなので追加CSSに画像や枠などのCSSを加えるとどうとでもできる

.twentytwenty-container {
border: 5px solid #ccc; 
box-shadow: 4px 4px;
}

など。
今どき画像に影とか必要ないかなとも思ったが一応記録。

明らかな違いがある画像ならスクリーン上に画像を2つ左右に並べても比較できるが、微妙な違いの場合、Twnty20で作成したスプリット表示できる画像の方が比較しやすいと思う。
もうすぐTopaz Adjustなど、使っているアプリケーションのお試し期間が終わるので、別のアプリケーションを使うか購入するかの検討時期にきているため、当分活躍してくれそう

にほんブログ村 写真ブログ HDR写真へ
にほんブログ村

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。