【WordPress】「krc-cast-manager」で作るキャスト詳細画面のスケジュール表をレスポンシブにしてみた

開発

おはようございます。

久々の krc-cast-manager プラグインネタ。

krc-cast-manager公式で紹介されているキャスト詳細画面に表示するスケジュール表が、

スマホ表示した際に狭まってレイアウト調整が難しかったので、スマホ表示に最適化してみました。

krc-cast-manager については次の記事を見てみてください。

【Wordpress】Lightningテーマで在籍キャスト管理プラグイン「krc-cast-manager」を使ってみる

スポンサーリンク

対応前後

元々のサンプルは dl dd dt 要素で構成されたスケジュール表で、スマホ表示した際に次のような表示になってしまいます。

変更前
変更前

なんとか、5日分くらいなら表示ができますが、これ以上表示するとスケジュールも折り返してちょっと見にくくなってしまうため(上図もヘッダ―折り返してますが・・)、テーブルに変更してCSSで行列を入れ替えるという表示にしてみました。

変更後
変更後

プログラム

php

function.php

スケジュール表を出力する関数をコピーし、テーブルを出力するように修正。

content-cast.php(抜粋)

スケジュール表呼び出しを追加した関数に変更。

css

テーブル用に新しくルールを追加

 

スマホサイズの時に行列を入れ替えるようにする。

まとめ

他にもいい方法はあるかもしれませんが、ひとまずこれでPC、スマホのどちらでもいい感じに表示することができました。

何かのお役に立てれば。

ではでは。

サイトはこちら

スポンサーリンク


関連するコンテンツ