小文字のキーボード練習ができるページをjQueryで作っていて、基本的な動作はだいぶ完成しました。
が、１つだけ困っていることがあります。ボタンの色が変えられないこと。まだ未解決ですが、後日解決したら掲載できるよう記録しておきます。
まずjQueryとjQueryUIをローカルで読み込んで作成
キーボード練習の開発は最初、ローカル環境（パソコンの中にファイルを保存している状態）でやっていました。
フォルダにjQueryとjQueryUIのソースを保存して読み込んで作成しました。
まず、上半分を問題を表示するエリア、下半分をキーボードを表示するエリアにしました。
問題は小文字のアルファベットと数字の中から１文字をランダムで選んで表示します。これについては特に問題なく実現できました。
もう１つ、キーボードのエリアのほうは、１文字ずつアルファベットや数字を入れた枠を作って、jQueryUIのボタンにしました。ボタンの色は、白。ボタンをクリックしたときに、問題と同じ文字だったらボタンを薄い緑色にして問題を変える、間違いだったら薄いピンク色にして、白に戻す、という動きにしました。
Google API で読み込んだらうまく動かない
ローカルで最低限のものができたので、まずここで一度試したいなと思ってWordPressに載せました。その時、jQueryとjQueryUIをGoogle APIで読み込む方法にしたんです。
しかし、そうするとボタンの色が変わらなくなってしまいました。jQueryUIのボタンとして設定をすると光沢感のある灰色になるんですが、そこから変えられない。ローカルのファイルとバージョンも合わせているのに、読み込む場所を変えたらできなくなってしまいました。
クラスを使ったり、セレクタで指定したりとやり方を変えてみても変わらず…。
クリックしたボタンが正解だった時に問題は変わっているので、クリックイベントが起きていない、というわけではなさそうです。
使えるようにするためにやること
ボタンの色については引き続き違う方法を試したり、調べてみたりしていきます。
他に、今のままではあまりにも殺風景なので、もう少し親しみやすいビジュアルにしたいと思っています。ゴチャゴチャして気が散らない程度に。
