ラジオ局の番組表を作る時にWordPressのプラグインを使って表を作るのが一番に思い浮かぶ方法だと思うが、月曜日～日曜日を横に並べる必要はないのかもしれない。
プラグインなしのデフォルトの機能で表を作ると次のような感じで、プラグインを使えば上下のセルを結合できてワイド番組にも対応できる。
| 時刻 | 月曜日 | 火曜日 | 水曜日 | 木曜日 | 金曜日 | 土曜日 | 日曜日 |
|---|---|---|---|---|---|---|---|
| 6:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 8:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 10:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 12:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 14:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 16:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 18:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 20:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 22:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
| 24:00 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 | 番組名 番組の紹介 |
ただ、このような表だと、スマホで見た時に各セルが狭くなって見難く醜い。セルの幅を固定して横スクロールしてもらう方法もあるけれど…。
私の作った「ラジオ局サイト雛形」の番組表のようにGoogleスプレッドシートの表を埋め込んだり、画像ファイルやpdfファイルで作って埋め込んだりする方法もあるが、「ラジオ局サイト雛形」の月曜日の番組表のように曜日ごとに作って縦に並べる方法もある。私はページ内の見出しを拾う目次機能を使って、番組名をクリックすれば詳細情報付きの所までスクロールするようにしたが、このサイトの視聴予定表のページのようにGoogleカレンダーを埋め込む方法もあり、番組名をクリックするとすぐ下に詳細情報が表示される仕組みもある。
ページをスクロールして詳細情報付きの番組一覧を見られるようにするか、詳細情報なしで番組名の一覧が見られる方が良いか、好みが分かれると思うが、Googleカレンダーは後者である。Googleカレンダーには古い番組表も見られるメリットがあるが、現在の番組表だけで良いのなら、Googleカレンダーのように番組名をクリックしたら直下に詳細情報が表示される仕組みはWordPressでも作れる。htmlとcssの知識があれば、普通のWebページでも作れて、私が自分用として主に使っている私のサイトでも同じ機能を使っている。
Googleカレンダーのように番組名をクリックしたら直下に詳細情報が表示される仕組みは、このサイトのリンクのページと同じである。このサイトと同じCocoonのテーマで作ると次のようになる。
月曜日
番組の詳細情報
番組の詳細情報
火曜日
番組の詳細情報
番組の詳細情報
と、ここまで書いてみて、Cocoonの「アコーディオン（トグル）」はWordPressの標準機能ではなく、Cocoonでは番組名の所を左寄せにできない！
やっぱり、番組表の作成にはGoogleカレンダーで作って、ラジオ局のサイトに埋め込むのがベストかもしれない。ちなみに、Googleサイトの方は「折りたたみ可能なグループ」という機能があって、Googleカレンダーと同じようなことができる。
Cocoonの「アコーディオン（トグル）」で番組名を左寄せにする方法が見つかった。
月曜日
番組の詳細情報
番組の詳細情報
番組の詳細情報
番組名が、編集画面では中央にあるけれど、プレビューすると左に寄っている。
これならば利用できると思えそうだけど、実は他にも問題がある。
番組表を作成したり修正したりする際に頻繁に複製を利用する。例えば、上の「月曜日」の番組表を次の「火曜日」に複製したらどうなるか、試してみる。面倒なので、グループ化してからコピーしたのだけど、グループ化しなくても同じ。下の7:30は7:15をコピーしたものである。
番組名をクリックした際に開く場所が変になってるはず。
火曜日
番組の詳細情報
番組の詳細情報
番組の詳細情報
番組の詳細情報
残念だけど、このままでは使えない。
この不具合は報告されていて、直すのは難しいとのこと。
ちなみに、アコーディオンはプラグインでも実現できる。試してないけれど、「CoBlocks」というプラグインが使いやすそうである。
アコーディオン以外のブロックも作成できるみたいだけど、Cocoon以外のテーマならインストールしても良いかもしれない。
プラグイン「CoBlocks」を試してみる。
月曜日
6:00 番組名
番組の詳細情報
7:00 番組名
番組の詳細情報
8:00 番組名
番組の詳細情報
8:30 番組名
番組の詳細情報
9:00 番組名
番組の詳細情報
火曜日
6:00 番組名
番組の詳細情報
7:00 番組名
番組の詳細情報
8:00 番組名
番組の詳細情報
8:30 番組名
番組の詳細情報
9:00 番組名
番組の詳細情報
複製しても問題が生じない。これならば使えるかもしれない。
プラグイン「CoBlocks」のアコーディオンは入れ子状態にもできる。
月曜日
6:00 番組名
6:00～7:00 毎週月曜日
番組の詳細情報
7:00 番組名
7:00～8:00 毎週月曜日
番組の詳細情報
8:00 番組名
8:00～9:00 毎週月曜日
番組の詳細情報
9:00 番組名
9:00～10:00 毎週月曜日
番組の詳細情報
10:00 番組名（長い番組名の場合に時刻の下に回り込むのが嫌な場合は追加CSSで.wp-block-coblocks-accordion-item__titleに対して「padding-left:70px;text-indent: -60px;」などと指定する。）
10:00～11:00 毎週月曜日
番組の詳細情報
11:00 番組名
11:00～12:00 毎週月曜日
番組の詳細情報
12:00 番組名
12:00～13:00 毎週月曜日
番組の詳細情報
13:00 番組名
13:00～14:00 毎週月曜日
番組の詳細情報
14:00 番組名
14:00～15:00 毎週月曜日
番組の詳細情報
15:00 番組名
15:00～16:00 毎週月曜日
番組の詳細情報
16:00 番組名
16:00～17:00 毎週月曜日
番組の詳細情報
17:00 番組名
17:00～18:00 毎週月曜日
番組の詳細情報
18:00 番組名
18:00～19:00 毎週月曜日
番組の詳細情報
19:00 番組名
19:00～20:00 毎週月曜日
番組の詳細情報
20:00 番組名
20:00～21:00 毎週月曜日
番組の詳細情報
21:00 番組名
21:00～22:00 毎週月曜日
番組の詳細情報
22:00 番組名
22:00～23:00 毎週月曜日
番組の詳細情報
23:00 番組名
23:00～24:00 毎週月曜日
番組の詳細情報
火曜日
6:00 番組名
6:00～7:00 毎週火曜日
番組の詳細情報
7:00 番組名
7:00～8:00 毎週火曜日
番組の詳細情報
8:00 番組名
8:00～9:00 毎週火曜日
番組の詳細情報
9:00 番組名
9:00～10:00 毎週火曜日
番組の詳細情報
10:00 番組名
10:00～11:00 毎週火曜日
番組の詳細情報
11:00 番組名
11:00～12:00 毎週火曜日
番組の詳細情報
12:00 番組名
12:00～13:00 毎週火曜日
番組の詳細情報
13:00 番組名
13:00～14:00 毎週火曜日
番組の詳細情報
14:00 番組名
14:00～15:00 毎週火曜日
番組の詳細情報
15:00 番組名
15:00～16:00 毎週火曜日
番組の詳細情報
16:00 番組名
16:00～17:00 毎週火曜日
番組の詳細情報
17:00 番組名
17:00～18:00 毎週火曜日
番組の詳細情報
18:00 番組名
18:00～19:00 毎週火曜日
番組の詳細情報
19:00 番組名
19:00～20:00 毎週火曜日
番組の詳細情報
20:00 番組名
20:00～21:00 毎週火曜日
番組の詳細情報
21:00 番組名
21:00～22:00 毎週火曜日
番組の詳細情報
22:00 番組名
22:00～23:00 毎週火曜日
番組の詳細情報
23:00 番組名
23:00～24:00 毎週火曜日
番組の詳細情報
水曜日
6:00 番組名
6:00～7:00 毎週水曜日
番組の詳細情報
7:00 番組名
7:00～8:00 毎週水曜日
番組の詳細情報
8:00 番組名
8:00～9:00 毎週水曜日
番組の詳細情報
9:00 番組名
9:00～10:00 毎週水曜日
番組の詳細情報
10:00 番組名
10:00～11:00 毎週水曜日
番組の詳細情報
11:00 番組名
11:00～12:00 毎週水曜日
番組の詳細情報
12:00 番組名
12:00～13:00 毎週水曜日
番組の詳細情報
13:00 番組名
13:00～14:00 毎週水曜日
番組の詳細情報
14:00 番組名
14:00～15:00 毎週水曜日
番組の詳細情報
15:00 番組名
15:00～16:00 毎週水曜日
番組の詳細情報
16:00 番組名
16:00～17:00 毎週水曜日
番組の詳細情報
17:00 番組名
17:00～18:00 毎週水曜日
番組の詳細情報
18:00 番組名
18:00～19:00 毎週水曜日
番組の詳細情報
19:00 番組名
19:00～20:00 毎週水曜日
番組の詳細情報
20:00 番組名
20:00～21:00 毎週水曜日
番組の詳細情報
21:00 番組名
21:00～22:00 毎週水曜日
番組の詳細情報
22:00 番組名
22:00～23:00 毎週水曜日
番組の詳細情報
23:00 番組名
23:00～24:00 毎週水曜日
番組の詳細情報
木曜日
6:00 番組名
6:00～7:00 毎週木曜日
番組の詳細情報
7:00 番組名
7:00～8:00 毎週木曜日
番組の詳細情報
8:00 番組名
8:00～9:00 毎週木曜日
番組の詳細情報
9:00 番組名
9:00～10:00 毎週木曜日
番組の詳細情報
10:00 番組名
10:00～11:00 毎週木曜日
番組の詳細情報
11:00 番組名
11:00～12:00 毎週木曜日
番組の詳細情報
12:00 番組名
12:00～13:00 毎週木曜日
番組の詳細情報
13:00 番組名
13:00～14:00 毎週木曜日
番組の詳細情報
14:00 番組名
14:00～15:00 毎週木曜日
番組の詳細情報
15:00 番組名
15:00～16:00 毎週木曜日
番組の詳細情報
16:00 番組名
16:00～17:00 毎週木曜日
番組の詳細情報
17:00 番組名
17:00～18:00 毎週木曜日
番組の詳細情報
18:00 番組名
18:00～19:00 毎週木曜日
番組の詳細情報
19:00 番組名
19:00～20:00 毎週木曜日
番組の詳細情報
20:00 番組名
20:00～21:00 毎週木曜日
番組の詳細情報
21:00 番組名
21:00～22:00 毎週木曜日
番組の詳細情報
22:00 番組名
22:00～23:00 毎週木曜日
番組の詳細情報
23:00 番組名
23:00～24:00 毎週木曜日
番組の詳細情報
金曜日
6:00 番組名
6:00～7:00 毎週金曜日
番組の詳細情報
7:00 番組名
7:00～8:00 毎週金曜日
番組の詳細情報
8:00 番組名
8:00～9:00 毎週金曜日
番組の詳細情報
9:00 番組名
9:00～10:00 毎週金曜日
番組の詳細情報
10:00 番組名
10:00～11:00 毎週金曜日
番組の詳細情報
11:00 番組名
11:00～12:00 毎週金曜日
番組の詳細情報
12:00 番組名
12:00～13:00 毎週金曜日
番組の詳細情報
13:00 番組名
13:00～14:00 毎週金曜日
番組の詳細情報
14:00 番組名
14:00～15:00 毎週金曜日
番組の詳細情報
15:00 番組名
15:00～16:00 毎週金曜日
番組の詳細情報
16:00 番組名
16:00～17:00 毎週金曜日
番組の詳細情報
17:00 番組名
17:00～18:00 毎週金曜日
番組の詳細情報
18:00 番組名
18:00～19:00 毎週金曜日
番組の詳細情報
19:00 番組名
19:00～20:00 毎週金曜日
番組の詳細情報
20:00 番組名
20:00～21:00 毎週金曜日
番組の詳細情報
21:00 番組名
21:00～22:00 毎週金曜日
番組の詳細情報
22:00 番組名
22:00～23:00 毎週金曜日
番組の詳細情報
23:00 番組名
23:00～24:00 毎週金曜日
番組の詳細情報
土曜日
6:00 番組名
6:00～7:00 毎週土曜日
番組の詳細情報
7:00 番組名
7:00～8:00 毎週土曜日
番組の詳細情報
8:00 番組名
8:00～9:00 毎週土曜日
番組の詳細情報
9:00 番組名
9:00～10:00 毎週土曜日
番組の詳細情報
10:00 番組名
10:00～11:00 毎週土曜日
番組の詳細情報
11:00 番組名
11:00～12:00 毎週土曜日
番組の詳細情報
12:00 番組名
12:00～13:00 毎週土曜日
番組の詳細情報
13:00 番組名
13:00～14:00 毎週土曜日
番組の詳細情報
14:00 番組名
14:00～15:00 毎週土曜日
番組の詳細情報
15:00 番組名
15:00～16:00 毎週土曜日
番組の詳細情報
16:00 番組名
16:00～17:00 毎週土曜日
番組の詳細情報
17:00 番組名
17:00～18:00 毎週土曜日
番組の詳細情報
18:00 番組名
18:00～19:00 毎週土曜日
番組の詳細情報
19:00 番組名
19:00～20:00 毎週土曜日
番組の詳細情報
20:00 番組名
20:00～21:00 毎週土曜日
番組の詳細情報
21:00 番組名
21:00～22:00 毎週土曜日
番組の詳細情報
22:00 番組名
22:00～23:00 毎週土曜日
番組の詳細情報
23:00 番組名
23:00～24:00 毎週土曜日
番組の詳細情報
日曜日
6:00 番組名
6:00～7:00 毎週日曜日
番組の詳細情報
7:00 番組名
7:00～8:00 毎週日曜日
番組の詳細情報
8:00 番組名
8:00～9:00 毎週日曜日
番組の詳細情報
9:00 番組名
9:00～10:00 毎週日曜日
番組の詳細情報
10:00 番組名
10:00～11:00 毎週日曜日
番組の詳細情報
11:00 番組名
11:00～12:00 毎週日曜日
番組の詳細情報
12:00 番組名
12:00～13:00 毎週日曜日
番組の詳細情報
13:00 番組名
13:00～14:00 毎週日曜日
番組の詳細情報
14:00 番組名
14:00～15:00 毎週日曜日
番組の詳細情報
15:00 番組名
15:00～16:00 毎週日曜日
番組の詳細情報
16:00 番組名
16:00～17:00 毎週日曜日
番組の詳細情報
17:00 番組名
17:00～18:00 毎週日曜日
番組の詳細情報
18:00 番組名
18:00～19:00 毎週日曜日
番組の詳細情報
19:00 番組名
19:00～20:00 毎週日曜日
番組の詳細情報
20:00 番組名
20:00～21:00 毎週日曜日
番組の詳細情報
21:00 番組名
21:00～22:00 毎週日曜日
番組の詳細情報
22:00 番組名
22:00～23:00 毎週日曜日
番組の詳細情報
23:00 番組名
23:00～24:00 毎週日曜日
番組の詳細情報
プラグイン「CoBlocks」のアコーディオンのスタイルを変更する追加CSS（Cocoon）。
/*CoBlocksアコーディオンカスタム*/
.wp-block-coblocks-accordion-item__title {
padding: 2px 0 2px 70px!important;
margin: 0px!important;
cursor: pointer;
list-style: none;
text-indent: -60px;
}
.wp-block-coblocks-accordion-item__title::-webkit-details-marker {
display: none;
}
.wp-block-coblocks-accordion-item {
margin-bottom:5px!important;
}
/*CoBlocksアコーディオンカスタム*/
コメント