独自タグ[[CALENDAR]]で出力されるHTMLを装飾するCSS
実際にCSSを適用したカレンダーは下の画像の通り。
土日は文字色・背景色が変化
今日の日付の背景色が変化
投稿した日はマークがつく
自動で出力されるクラスで装飾を指定しているので、ユーザー側でクラスを追加したりしなくても大丈夫です。
[[CALENDAR]]タグの挿入→CSSに下記のコードをコピペでOK！
改変はご自由に。使用報告、著作権表記など不要です。
ご自身でカレンダーを装飾する場合の、ひな形としてご利用いただいても問題ありません。
/*----------カレンダー要素全体----------*/
.calendar {
box-sizing: border-box;
width: 250px;
border-collapse: collapse;
text-align: center;
font-size: 12px;
line-height: 2.5;
}
/*-----投稿のある日-----*/
.calendar a {
position: relative;
display: inline-block;
width: 100%;
text-decoration: none;
font-weight: bold;
}
.calendar a::after {
position: absolute;
top: calc(50% + 0.5em);
left: calc(50% - 0.2em);
display: block;
width: 0.4em;
height: 0.4em;
border-radius: 50%;
background-color: hsl(300, 100%, 60%);
content: "";
}
/*-----●●年●月の部分-----*/
.calendar caption {
text-align: center;
letter-spacing: 2px;
font-weight: bold;
font-size: 1.4em;
}
/*-----曜日の見出し行-----*/
.calendar tr.daysofweek th {
border-bottom: 2px solid;
text-align: center;
font-size: 1.2em;
line-height: 2.3;
}
/*-----カレンダー内の境界線-----*/
.calendar tr {
border-bottom: 1px solid;
}
.calendar tr:last-child {
border-bottom: none;
}
/*-----日付セルごとの設定-----*/
.calendar td {
vertical-align: middle;
}
/*-----土曜日の設定-----*/
.calendar th:nth-child(7) {
color: hsl(200, 70%, 40%);
}
.calendar tr td.sat {
background-color: hsl(200, 100%, 90%);
}
/*-----日曜日の設定-----*/
.calendar th:nth-child(1) {
color: hsl(0, 70%, 40%);
}
.calendar tr td.sun {
background-color: hsl(0, 100%, 90%);
}
/*-----今日の日付-----*/
.calendar tr td.today {
background-color: hsl(50, 100%, 90%);
}
/*-----空の日付-----*/
.calendar td.empty::after {
content: "-";
}
畳む
コピー＆ペーストしてご利用ください。
参考：てがろぐ公式 ▼カレンダー表示の装飾方法
実際にCSSを適用したカレンダーは下の画像の通り。
土日は文字色・背景色が変化
今日の日付の背景色が変化
投稿した日はマークがつく
自動で出力されるクラスで装飾を指定しているので、ユーザー側でクラスを追加したりしなくても大丈夫です。
[[CALENDAR]]タグの挿入→CSSに下記のコードをコピペでOK！
改変はご自由に。使用報告、著作権表記など不要です。
ご自身でカレンダーを装飾する場合の、ひな形としてご利用いただいても問題ありません。
/*----------カレンダー要素全体----------*/
.calendar {
box-sizing: border-box;
width: 250px;
border-collapse: collapse;
text-align: center;
font-size: 12px;
line-height: 2.5;
}
/*-----投稿のある日-----*/
.calendar a {
position: relative;
display: inline-block;
width: 100%;
text-decoration: none;
font-weight: bold;
}
.calendar a::after {
position: absolute;
top: calc(50% + 0.5em);
left: calc(50% - 0.2em);
display: block;
width: 0.4em;
height: 0.4em;
border-radius: 50%;
background-color: hsl(300, 100%, 60%);
content: "";
}
/*-----●●年●月の部分-----*/
.calendar caption {
text-align: center;
letter-spacing: 2px;
font-weight: bold;
font-size: 1.4em;
}
/*-----曜日の見出し行-----*/
.calendar tr.daysofweek th {
border-bottom: 2px solid;
text-align: center;
font-size: 1.2em;
line-height: 2.3;
}
/*-----カレンダー内の境界線-----*/
.calendar tr {
border-bottom: 1px solid;
}
.calendar tr:last-child {
border-bottom: none;
}
/*-----日付セルごとの設定-----*/
.calendar td {
vertical-align: middle;
}
/*-----土曜日の設定-----*/
.calendar th:nth-child(7) {
color: hsl(200, 70%, 40%);
}
.calendar tr td.sat {
background-color: hsl(200, 100%, 90%);
}
/*-----日曜日の設定-----*/
.calendar th:nth-child(1) {
color: hsl(0, 70%, 40%);
}
.calendar tr td.sun {
background-color: hsl(0, 100%, 90%);
}
/*-----今日の日付-----*/
.calendar tr td.today {
background-color: hsl(50, 100%, 90%);
}
/*-----空の日付-----*/
.calendar td.empty::after {
content: "-";
}
畳む
コピー＆ペーストしてご利用ください。
参考：てがろぐ公式 ▼カレンダー表示の装飾方法
HTMLサイト用の自作・配布テンプレートを適用する場合、追加で設定したほうがいいCSSの設定まとめ
Twitterの圧政・混乱・横暴ええと色々に耐えかねて個人サイトが再度トレンドに上がっています。
そしててがろぐも「いいかも」とつぶやいているかたをよく見かけるようになりました。
基本的にてがろぐは公式配布のCSSを見るのが一番勉強になります！公式のカスタマイズ説明文もとても充実しています。
簡単ではありますが、てがろぐのスキンを作っていて、これは公式のCSSをコピペしたほうがいい、調整したほうがいいという部分がいくつかありますので、ここにまとめておきます。
これはてがろぐの最初の一歩を踏み出した後、カスタマイズがしてみたい、自分の好きなテンプレートとデザインをそろえたい！好きな形にしていこう！という方への、「これだけは絶対にやったほうがいい！」という個人的なメモです。
※注意※
自作以外の配布テンプレートによっては、製作者のルール上、他デザイン・プログラムとの併用が禁止されている場合もありますのでご注意ください。
CSSのコメント・改行は軽量化しています。
クラス名をコピペして、てがろぐ公式配布のCSS（tegalog.css）（以下、公式CSS）内や、公式サイトを検索してみると、より詳しい情報や使い方のコメントが載っています。
-----
公式CSSをコピペすると便利なもの
1．URLが書かれた場合、文字列が記事からはみ出さないようにする
.url {word-break:break-all;}
2.装飾関連
2-1.引用したとき、文章の前後にかぎかっこがつかないようにする。
.decorationQ::before,.decorationQ::after{content:''}
3-2.引用するクラスに必須の記述
.decorationQ{display:block}
3.画像が挿入されたとき、記事からはみ出ないようにする。
.embeddedimage{max-width:100%;}
※デザインに合わせて変更したほうがいいもの 2-1.画像サイズも合わせてご確認ください。
4.動画を埋め込んだ時、記事からはみ出ないようにする。
@media all and (max-width:600px){.embeddedmovie{display:inline-block;max-width:100%;width:auto;height:auto}}
-----
デザインに合わせて変更したほうがいいもの
1．装飾関連
decorationE（強調）、decorationB（太字）decorationI（斜体）、decorationU（下線）、decorationD（取り消し線）、decorationS（小さめ）、decorationT（極小）
使用する自作・配布テンプレートにデザインを合わせて、文字サイズ・色・太さなどを調整すると良いです。
うまくいかないときは上記のクラス名をコピーして、公式CSS内を検索してみてください。詳しい使い方、装飾のコメントが書かれています。
公式CSSの最初のほうに書かれています。
2.画像関連
2-1.画像サイズ
.embeddedimage{max-width:100%;max-height:240px;width:auto;height:auto}
このうち、max-height:240pxは公式CSSの推奨サイズです。適用したいデザインに合わせて変更してください。
width、heightがautoのままだと、小さい画像は小さいまま、大きい画像は記事の横幅いっぱいまで表示されます。
サムネイル的に表示したい場合は適宜サイズを指定してください。
2-2.NSFWフラグへの対応
img.nsfw{filter:blur(9px)}
公式CSSではぼかす処理をしていますが、適用したいデザインに合わせてお好きに処理されるといいと思います。
ぼかし処理を行う場合はfigure.nsfw{overflow:hidden}も追加してください。
【公式】▼フラグが付いている画像の出力HTMLソース例 https://www.nishishi.com/cgi/tegalog/cus...
【公式】▼キャプション付きの画像・フラグ付きの画像を装飾するCSS例 https://www.nishishi.com/cgi/tegalog/cus...
3.続きを読むボタン
全体の指定はreadmorebutton
開く（続きを読む）はreadmoreopen
閉じる（畳む）はreadmoreclose
というようなクラスが指定されています。
基本的にはreadmorebuttonのクラスを調整すればいいのですが、開くボタンと閉じるボタンで色を変えたい、文字サイズを調整したい…というときはそれぞれのクラスで指定してください。
【公式】「続きを読む」ボタンによって隠された範囲の装飾方法 https://www.nishishi.com/cgi/tegalog/cus...
4.鍵付き投稿
鍵入力フォーム全体passkeyform
エラー時の警告文passkeyerror
ひとことヒント部分passkeyguide
送信ボタンpasskeysubmit
というようなクラスが指定されています。公式でコピペしてね！と書いてある通り、上記のクラス名から公式CSSの該当部分をコピペして調整します。
鍵入力後の記事は通常の投稿なので、ここで行うのはだいたい色替え・文字サイズの調整くらいだと思います。
【公式】▼鍵入力フォームを装飾する方法 https://www.nishishi.com/cgi/tegalog/cus...
5.クイックポスト
クイックポスト全体はpostform
本文の入力欄はtegalogpost
投稿ボタンはpostbutton
というようなクラスが指定されています。
装飾ボタンはdecoBtnsというクラスが指定されていて、各装飾ボタンごとに異なったクラスが指定されているので、細かい調整も可能です。
ver3.9.0の公式CSSでは485行目当たりから記述されているので参考にしてみてください。
この辺は開発者ツールとかで見るのが一番簡単に・自由にできるかな…と思います。
-----
番外：skin-cover.htmlに書いておくもの
必須
[[VERSION]]
意外と忘れがち（お使いの画像拡大スプリクトで異なります）
[[JS:LIGHTBOX]]
[[JS:LIGHTBOX:JQ]]
今のところは以上です。
その他の要素は必ず使うものではなかったり、skin-cover.htmlやskin-onelog.htmlを書いている際に自身でクラスを付与して調整することができるので、まずは公式配布や個人で配布されている方のスキンを調整・カスタマイズしたりして、てがろぐの記述に慣れていくといいかと思います。
他にも「これはどんなスキンを使うときにもやっておいたほうがいい！」というものができたら書き足しに来ます。
他にも何かあれば追加しますので、お気軽にご連絡ください。
てがろぐは自分の好きなデザインにできるところが大好きです！
公式の文章量に圧倒されてしまいがちですが、慣れれば本当に心強い味方です。何かに困っても公式サイトを読むか、公式のＣＳＳを探していればほとんど答えがあります。
（本当に答えがない時は公式のサポート掲示板（動作サンプル）もあります…！手厚い…！）
みなさまも是非楽しいてがろぐライフを！
Twitterの
そしててがろぐも「いいかも」とつぶやいているかたをよく見かけるようになりました。
基本的にてがろぐは公式配布のCSSを見るのが一番勉強になります！公式のカスタマイズ説明文もとても充実しています。
簡単ではありますが、てがろぐのスキンを作っていて、これは公式のCSSをコピペしたほうがいい、調整したほうがいいという部分がいくつかありますので、ここにまとめておきます。
これはてがろぐの最初の一歩を踏み出した後、カスタマイズがしてみたい、自分の好きなテンプレートとデザインをそろえたい！好きな形にしていこう！という方への、「これだけは絶対にやったほうがいい！」という個人的なメモです。
※注意※
自作以外の配布テンプレートによっては、製作者のルール上、他デザイン・プログラムとの併用が禁止されている場合もありますのでご注意ください。
CSSのコメント・改行は軽量化しています。
クラス名をコピペして、てがろぐ公式配布のCSS（tegalog.css）（以下、公式CSS）内や、公式サイトを検索してみると、より詳しい情報や使い方のコメントが載っています。
-----
公式CSSをコピペすると便利なもの
1．URLが書かれた場合、文字列が記事からはみ出さないようにする
.url {word-break:break-all;}
2.装飾関連
2-1.引用したとき、文章の前後にかぎかっこがつかないようにする。
.decorationQ::before,.decorationQ::after{content:''}
3-2.引用するクラスに必須の記述
.decorationQ{display:block}
3.画像が挿入されたとき、記事からはみ出ないようにする。
.embeddedimage{max-width:100%;}
※デザインに合わせて変更したほうがいいもの 2-1.画像サイズも合わせてご確認ください。
4.動画を埋め込んだ時、記事からはみ出ないようにする。
@media all and (max-width:600px){.embeddedmovie{display:inline-block;max-width:100%;width:auto;height:auto}}
-----
デザインに合わせて変更したほうがいいもの
1．装飾関連
decorationE（強調）、decorationB（太字）decorationI（斜体）、decorationU（下線）、decorationD（取り消し線）、decorationS（小さめ）、decorationT（極小）
使用する自作・配布テンプレートにデザインを合わせて、文字サイズ・色・太さなどを調整すると良いです。
うまくいかないときは上記のクラス名をコピーして、公式CSS内を検索してみてください。詳しい使い方、装飾のコメントが書かれています。
公式CSSの最初のほうに書かれています。
2.画像関連
2-1.画像サイズ
.embeddedimage{max-width:100%;max-height:240px;width:auto;height:auto}
このうち、max-height:240pxは公式CSSの推奨サイズです。適用したいデザインに合わせて変更してください。
width、heightがautoのままだと、小さい画像は小さいまま、大きい画像は記事の横幅いっぱいまで表示されます。
サムネイル的に表示したい場合は適宜サイズを指定してください。
2-2.NSFWフラグへの対応
img.nsfw{filter:blur(9px)}
公式CSSではぼかす処理をしていますが、適用したいデザインに合わせてお好きに処理されるといいと思います。
ぼかし処理を行う場合はfigure.nsfw{overflow:hidden}も追加してください。
【公式】▼フラグが付いている画像の出力HTMLソース例 https://www.nishishi.com/cgi/tegalog/cus...
【公式】▼キャプション付きの画像・フラグ付きの画像を装飾するCSS例 https://www.nishishi.com/cgi/tegalog/cus...
3.続きを読むボタン
全体の指定はreadmorebutton
開く（続きを読む）はreadmoreopen
閉じる（畳む）はreadmoreclose
というようなクラスが指定されています。
基本的にはreadmorebuttonのクラスを調整すればいいのですが、開くボタンと閉じるボタンで色を変えたい、文字サイズを調整したい…というときはそれぞれのクラスで指定してください。
【公式】「続きを読む」ボタンによって隠された範囲の装飾方法 https://www.nishishi.com/cgi/tegalog/cus...
4.鍵付き投稿
鍵入力フォーム全体passkeyform
エラー時の警告文passkeyerror
ひとことヒント部分passkeyguide
送信ボタンpasskeysubmit
というようなクラスが指定されています。公式でコピペしてね！と書いてある通り、上記のクラス名から公式CSSの該当部分をコピペして調整します。
鍵入力後の記事は通常の投稿なので、ここで行うのはだいたい色替え・文字サイズの調整くらいだと思います。
【公式】▼鍵入力フォームを装飾する方法 https://www.nishishi.com/cgi/tegalog/cus...
5.クイックポスト
クイックポスト全体はpostform
本文の入力欄はtegalogpost
投稿ボタンはpostbutton
というようなクラスが指定されています。
装飾ボタンはdecoBtnsというクラスが指定されていて、各装飾ボタンごとに異なったクラスが指定されているので、細かい調整も可能です。
ver3.9.0の公式CSSでは485行目当たりから記述されているので参考にしてみてください。
この辺は開発者ツールとかで見るのが一番簡単に・自由にできるかな…と思います。
-----
番外：skin-cover.htmlに書いておくもの
必須
[[VERSION]]
意外と忘れがち（お使いの画像拡大スプリクトで異なります）
[[JS:LIGHTBOX]]
[[JS:LIGHTBOX:JQ]]
今のところは以上です。
その他の要素は必ず使うものではなかったり、skin-cover.htmlやskin-onelog.htmlを書いている際に自身でクラスを付与して調整することができるので、まずは公式配布や個人で配布されている方のスキンを調整・カスタマイズしたりして、てがろぐの記述に慣れていくといいかと思います。
他にも「これはどんなスキンを使うときにもやっておいたほうがいい！」というものができたら書き足しに来ます。
他にも何かあれば追加しますので、お気軽にご連絡ください。
てがろぐは自分の好きなデザインにできるところが大好きです！
公式の文章量に圧倒されてしまいがちですが、慣れれば本当に心強い味方です。何かに困っても公式サイトを読むか、公式のＣＳＳを探していればほとんど答えがあります。
（本当に答えがない時は公式のサポート掲示板（動作サンプル）もあります…！手厚い…！）
みなさまも是非楽しいてがろぐライフを！