凍結
0 Anonymous Chrome
ノートで利用できるカレンダーの独自タグ
> #cal#
についての質問です。

先日からカレンダー機能を利用しているのですが、そのまま使うと

<< 2022年8月 >>
日 月 火 水 木 金 土
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

となるのですが、
曜日の部分
>  日 月 火 水 木 金 土 ←ここの部分
を罫線で囲むことは可能ですか?
08/07 00:16
返信
コメント投稿 検索
2 Anonymous Chrome
>>1 しち様
お返事遅れて申し訳ありません。
詳しくありがとうござました!
09/12 09:58
返信
1 しち SOG03
>>0
>曜日の部分
>>  日 月 火 水 木 金 土 ←ここ
>を罫線で囲むことは可能ですか?
可能です。
CSSで罫線(border)をつけられます。


#1️⃣【一覧画面レイアウト】or【ノート画面レイアウト】にて、カレンダー独自タグ部分を以下に書き換え
━━━━━━━━━━

<div class="calendar">#cal#</div>

━━━━━━━━━━
※↑既存のデザインに影響しないよう、class名で差別化しているだけです


#2️⃣CSS(※)には以下を入れる
━━━━━━━━━━

.calendar table{
border-collapse:collapse;
}
.calendar tr:nth-child(2){/* カレンダーの曜日部分の */
border:1px solid #000;/* 線の:太さ_種類_色 */
}
.calendar td{
padding:8px;/* セル内の余白 */
}

━━━━━━━━━━
※どこに書き込むか分からなかったらとりあえず【CSSファイル編集】へ書き込んでください
※なるべく、すでにある記述の“末尾に”書き足してください

曜日を囲む線のデザインに関しては、
> border:1px solid #000;/* 線の:太さ_種類_色 */
の部分をご自由に書き換えてください。


*** 補足 ***
>🔵セル内の余白の指定がなぜ必要か
上記のCSSを書き込むと、セルとセルの間隔が狭まる
=日付のリンクが押しづらくなるため、です。
余白幅はご自由に変更してください。

なおセル同士の間隔が狭まるのは、曜日行を罫線で囲むにあたり
「border-collapse:collapse(隣接するセルのボーダーを重ねて表示する)」
というスタイル指定をしているせいです。

ただもしも、既存のデザインと干渉してデザイン崩れが起きる……ということがあったら、
* .calendar td {
* padding:8px;/* セル内の余白 */
* }
の部分は削除してもOKです。
08/27 19:55
返信