Javascriptを使わずCSSだけでタブ切り替えの番組表を作ってみたけど…

 bayfmかずさエフエムラジオ成田市川うららFMSKYWAVE FMの番組表を見ると月曜日から日曜日までのタブで各曜日の番組に切り替わるようになってる。通常はiframeやJavascriptを使って切り替えるのだろうけど、どちらも使わずにCSSだけで切り替えられそうなので試してみて、次のサイトを参考にして作ってみた。


5:00月曜日のミュージック
5:10クラシック
5:30ポップス
12:00ミュージック
12:10クラシック
12:30ポップス
5:00火曜日のミュージック
12:00ミュージック
5:00水曜日のミュージック
12:00ミュージック
5:00木曜日のミュージック
12:00ミュージック
5:00金曜日のミュージック
12:00ミュージック
5:00土曜日のミュージック
12:00ミュージック
5:00日曜日のミュージック
12:00ミュージック

 ソースは別のブログの方に書いておいた。

 idやclassをシンプルな名前にしたかったのだけど、WordPressのカスタムHTMLにソースを埋め込んでも全く表示されなくて、WordPressのテーマが他で使っている名前と被ってしまったのだろうから、オリジナルになるように変更してようやく表示されるようになった。
 でも、tableタグのスタイルもWordPressのテーマで決められちゃっているようで変更しようと試行錯誤したのだけど、なかなか変えられず、使っているテーマによってCSSが変わっちゃうようなら他では使えなくなりそうなことに気付き、さらにカスタムHTMLを使っていると、テキスト部分を書き換える時にミスってタブを変更しちゃう可能性もあって、HTMLソースやCSSの編集ができない人が修正するのは難しいし、避けたがるだろうということに気付いたので、せっかく作ったけれど役立たずだと思った。

 改めて、WordPressで容易にタブ切り替えのブロックが作れたり編集できるようなプラグインがないか検索したら、良さそうなのを一つ見つけた。

 さっそく試してみようとしたら、このWordPressはPHPのバージョンが古くて使えなかった。必要なPHPバージョンは「7.4またはそれ以降」で、XFREEから私に提供されたサーバーのPHPバージョンは7.1.2まで。残念。

コメント

タイトルとURLをコピーしました