SANGO では、SANGO Landからブロックをコピーし、記事内に貼り付けることで以下のような画像比較の表現を記事内で実現することが可能です!
画像を加工する前と加工した後の比較などで重宝するかと思います。
![before画像](https://image-compare-viewer.netlify.app/public/before-3.jpg)
![after画像](https://image-compare-viewer.netlify.app/public/after-3.jpg)
目次 非表示
使い方
以下のリンクより画像比較ブロックをコピーします!
コピーする場合は画面右上のコピーボタンをクリックします
![](https://saruwakakun.com/sango/wp-content/uploads/2022/08/copy-btn.png)
コピーした状態で記事内に貼り付けます。
貼り付けた後は、画面右メニューより比較前後の画像を選択します。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/08/78589488bcb237dc199c3d49d1dc4af0.png)
各種設定
こちらのつまみの色を調整できます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/08/557d29401c004f2c685b1782e4c96087.png)
つまみを円にする場合はチェックを入れます。チェックが入っていない場合は、矢印だけが表示されます。
つまみに影を表示するかしないかを設定できます。
つまみにブラー効果をつけて、すりガラスのような表現ができます。
それぞれの加工前画像、加工後画像に以下のようなラベルをつけることができます。
![](https://saruwakakun.com/sango/wp-content/uploads/2022/08/5078d7d3c78ff43cd6a48c9886af1e89.png)
カスタムバリエーションに登録して効率化しよう
頻繁にこのブロックを使う場合はSANGOのカスタムバリエーション機能を使って、オリジナルブロック化しておくと次回からSANGO Landに訪れる手間が省けるので便利です!
キーワード検索で簡単にブロックを呼び出すことができます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/10/contents-160x160.png)
コメントを残す