サイトって全体がある程度できて「ま、いっか」状態で落ち着いちゃうと、なかなか新しいことをしなくなってしまうあるあるなんだけど、前々からいつか使ってみようと思っていたビフォーアフター画像のプラグインを導入してみた。
真ん中にスライダーがあって、2枚の画像を比較できるやつ。よく、写真の現像とかLUTの違いとかを視覚的に分かりやすく表示する際に使われてるプラグインで、何かないかなーと探していたところ定番プラグインらしき「Twenty20 Image Before-After」に出会った。
この手のプラグインを探してみると分かるんだけど、無限に見つかるくらいいろんなプラグインがあるんだよね。基本的にやってることは同じなんだけどUIとか見た目が若干違っている感じ。んでもって「Twenty20 Image Before-After」は無料でシンプルという点で、とりあえず導入してみることに。
ショートコードで簡単設置
プラグインを有効化したら、ショートコードのブロック内に、下記のような呪文を書き込めばOK。
[twenty20 img1=“比較する元画像のID" img2=“比較する新画像のID" direction="horizontal" offset="0.5" align=“none” width=“100%” before=“ビフォー名" after=“アフター名" hover=“false”]
めちゃめちゃ簡単なんだけど、画像のIDをメディアライブラリで事前に確認しておかなきゃいけないのがちょっと面倒。んで、上記のコードを入力した実際の表示は下記の通り。
ものすごいシンプルなんだけど、やりたいことはできてるから無問題。ただ、SWELLのテーマを導入していると、上記のような表示にならないので少し細工が必要だった。そしてそれが地味に面倒だったので備忘録として書いておこう。
左の矢印がずれる問題
もはや原因不明なんだけど、SWELLのテーマを使っていると、なぜか左の矢印がずれてしまう。
これは.twentytwenty-left-arrowの項目に追記することで直る。記述の仕方は最後にまとめてあるので、結果だけ知りたい人は一番下までジャンプ！
画像が角丸にならない
このサイトは画像の四隅を角丸にしたデザインにしていて、style.cssに以下の記述をしているんだけど、それが適応されない。
/* 投稿画像を角丸*/
.wp-block-image img {
border-radius:10px;
}
まあクラスが違うから当然っちゃー当然なんだけど。これも.twentytwenty-container imgの項目に追記することで直る。記述の仕方は最後にまとめてあるので、結果だけ知りたい人は一番下までジャンプ！
SP表示で記述が反映されなくなる
上記のふたつの問題は下記のような内容をstyle.cssに記述すれば直るんだけど、なぜかスマホ表示にすると左の矢印もずれてしまい、角丸も元に戻ってしまう。
ということで、原因が分からないので直接twenty20.cssに書き込んでしまうことにした。
twenty20.cssを編集して万事解決
デザインをつかさどってる元のcssを直接編集しちゃえば直るんじゃない？ ってことであんまり推奨されないけど、twenty20.cssに直接追記することにした。
twenty20.cssの場所は「wp-content/plugins/twenty20/assets/css/twenty20.css」になるので、FTPクライアントで直接アクセス。
ひとまずこれで直った！
困ったらスーパーリロード
cssを変更した後、いざブラウザで確認してみるとなかなか内容が反映されず、その記述が合ってるのか間違ってるのかすら不安になる時あるよね。そういう時はスーパーリロードで無理やりサーバーから新データを読み込む方法がおすすめ。
Chrome系ならshiftボタン+F5（更新ボタン）とかでできる。ブラウザによってショートカットが微妙に違うみたいなので、気になる人はググってみてー。
