カーブスの出席カレンダーをNumbersで作ったんですよー。それはそれはめっちゃ可愛いのん。
で、TablePressにインポートするも、失敗。
そもそもNumbersそのものは受け付けてくれない。XLSに変換してもレイアウト崩れてる。CSVの区切り値なんてわけわからん。HTML変換してみたものの、CSSの書き出しかたをすっかり忘れてる。。。
で、とりあえず妥協案としたのが下図です。
TablePress＞新規追加で、７行７列でテーブル作成。
最初の行をテーブル見出しにするので、1-A にタイトル。1-B～1-Gには #colspan# と入力。
タイトルを中央寄せにするので、
<div align="center">タイトル</div>
と囲っています。
３、４行目には日付以外の文字は無いので、Aの日付改行後、全角スペースを３つ入れました。
5-Eと5-Gには改行して文字列があります。関連記事が有るのでリンクしています。
<a href=" ">19 再入会</a>
改行の文字列がマックス３文字だったので改行後にスペース３つです。６、７行目にも入れています。
これだけではカレンダーには見えないので、[プラグインのオプション]の赤枠にCSSを追加します。
わたしはこのサイトでは、カレンダーしか使わないので、以下のようなCSSにしました。
「全体」として日曜日だけがグレーの背景色です。
/* 全体 */
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
}
.tablepress .row-2 .column-1,
.tablepress .row-2 .column-2,
.tablepress .row-2 .column-3,
.tablepress .row-2 .column-4,
.tablepress .row-2 .column-5,
.tablepress .row-2 .column-6,
.tablepress .row-2 .column-7 {
background-color: #ffe5e5 !important; /* 背景色の指定 */
}
.tablepress .row-2 .column-1,
.tablepress .row-3 .column-1,
.tablepress .row-4 .column-1,
.tablepress .row-5 .column-1,
.tablepress .row-6 .column-1,
.tablepress .row-7 .column-1 {
background-color: #dddddd !important; /* 背景色の指定 */
}
.tablepress {
width: 60% !important; /* テーブル高さの指定 */
height: 60% !important; /* テーブル高さの指定 */
}
高さの指定が効いているのかどうか微妙ですが、幅は行けてるみたいです。
2018年4月は30(月)も祝日なので、「.id-4 .row-7 .column-2」を追加しています。
/* id-4 */
.id-4 .row-7 .column-2 {
background-color: #dddddd !important; /* 背景色の指定 */
}
５月の場合はこんな感じです。
/* id-5 */
.id-5 .row-3 .column-5,
.id-5 .row-3 .column-6,
.id-5 .row-3 .column-7 {
background-color: #dddddd !important; /* 背景色の指定 */
}
こんな風にカスタムCSSの全体定義の上か下かにidごとに変わる部分(この場合は月毎の祝日)を追加で記述します。
記述の /* id-4 */ や 『.id-4』等は、テーブル情報のショートコード：［table id=4 /］に合わせておくと便利かも知れません。
テーブルオプションの「追加のCSSクラス」で『id-4』のように指定します。
