超人気の『Simplicity2』の後継『Cocoon』のデモサイトを兼ねています。   

TablePress でカレンダー

カーブスの出席カレンダーをNumbersで作ったんですよー。それはそれはめっちゃ可愛いのん。

で、TablePressにインポートするも、失敗。
そもそもNumbersそのものは受け付けてくれない。XLSに変換してもレイアウト崩れてる。CSVの区切り値なんてわけわからん。HTML変換してみたものの、CSSの書き出しかたをすっかり忘れてる。。。
で、とりあえず妥協案としたのが下図です。

2018-4月
1
   
2
   
3
   
4
   
56
   
7
   
8
   
91011121314
1516171819
再入会
2021
初日●
2223
   
24
2526
27
28
29
   
30     
   

TablePress>新規追加で、7行7列でテーブル作成。
最初の行をテーブル見出しにするので、1-A にタイトル。1-B~1-Gには #colspan# と入力。

タイトルを中央寄せにするので、

<div align="center">タイトル</div>

と囲っています。
3、4行目には日付以外の文字は無いので、Aの日付改行後、全角スペースを3つ入れました。
5-Eと5-Gには改行して文字列があります。関連記事が有るのでリンクしています。

<a href=" ">19
再入会</a>

改行の文字列がマックス3文字だったので改行後にスペース3つです。6、7行目にも入れています。

これだけではカレンダーには見えないので、[プラグインのオプション]の赤枠に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; /* 背景色の指定 */
}

5月の場合はこんな感じです。

/* 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』のように指定します。

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