検索条件画面は、従来テキストを選択するような形式だったが、画像の利用許可のメドが立ったので、アイコンにて条件を選択するようにしたかった。ＰＣ画面ではまだしも、スマホでは文字数の少ない項目の選択が不便だったから特にそうしたかった。
色々と紆余曲折あったけれど、基本的にはＣＳＳとＨＴＭＬのみで対応できた。
選択前を低輝度(透明度0.5)、選択後にフル輝度(透明度1)という形にしてみたが、思ったよりいい気がする。
今回はアイコン名を自動生成している事もあり、数多くのサイトでお勧めされていた「:after」での実装ではなく、「span」タグ内に直接スタイル句に「content:url(…)」という形でアイコンを表示させている。あまりスマートでは無いよなぁ…とは思うけれど、ひとまずこれで行く事にする。
チェックされたら「class名 input:checked + spanクラス名」という近接修飾子とかを使って透明度を１に変えている。
一切スクリプトなどを使っていないので、検索画面に対しては一切手を入れずに済んだのも嬉しい。一通りの動作も問題なくできたので、この件はこのあたりで収束させる予定。
従来文字だったのを画像に変えたので、マージンやラベル部分の調整も必要だと思うが、同様に画像にすべきかテキストのままで多少修飾をつける程度にしようか検討は必要。
次は、検索結果一覧の表示を更新しようと思う。現状属性やレア度などをテキストで記載しているが、それらをアイコン化しようと思う。これは多少ロジックが必要だと思うが、アイコンも用意する必要がありそうだ。コピーライトの表示方法について回答を貰ってから着手しよう。
とにかく、１日かかったが何とか形になって良かった。