ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 ノートのカレンダータグについての質問 編集 キャンセル 削除 アク禁 アク禁解除 キャンセル 凍結 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 となるのですが、 曜日の部分 > 日 月 火 水 木 金 土 ←ここの部分 を罫線で囲むことは可能ですか? 1 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です。 1 08/27 19:55 返信 1ページ中1ページ目 313 view 残り書き込み 9998 件 人気スレ 更新できなくて、困っています 2019年11月07日 19時38分 13 コメント送信時の情報表示について 2023年09月16日 13時29分 6 名前変換について 2020年05月15日 01時48分 2 メール送信完了画面編集 2019年11月20日 12時12分 6 関連スレ 掲示板TOPへ サイトTOPへ ALICE+サポート