@charset "utf-8";
/* …………………………………………………………………………………………………………… */
/* てがろぐ -Fumy Otegaru Memo Logger- ジャーナル(日誌)スタイルシート for Ver 4.7.0＋ */
/* 「みんなのノート」テーマ：複数人が書き込むノート/手帳をイメージした現代的スキン */
/* …………………………………………………………………………………………………………… */
/* ※装飾面のカスタマイズ方法については、配布サイト内にある「カスタマイズ方法」ページ https://www.nishishi.com/cgi/tegalog/custom/ の『装飾のカスタマイズ方法』区画にある解説や記述例もご参照下さい。 */
/* ※本スキンは skin-cover.html の 内で下記のWebフォントを読み込む前提でデザインしています。
もしWebフォントを読み込みたくない場合は、下記フォント指定部分だけ好きな指定に差し替えてご利用下さい。 */
/* Table of Contents：
-------------------
■デザイントークン(配色・フォントなどの基本設定)
■全体共通装飾
▼リンクの装飾
▼URLが書かれた場合の装飾
▼カード型リンクの装飾
▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)
▼自由装飾用の装飾の例
▼埋め込み画像
▼埋め込み動画
▼埋め込みTweet
▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像
▼検索語のハイライト
■ページ最上部(ヘッダ)領域
▼ヘッダ概要文
▼コントロールリンク群
■入力フォームの表示領域
▼本文入力欄
▼投稿コントロール部分(ボタンや字数カウンタなど)
▼投稿ボタン
▼文字装飾ボタン群
▼カテゴリ選択チェックボックス群
■メイン(ログ掲載)領域
▼ページタイトル区画
▼更新日時
▼上部概要＋表示対象の限定時などの「限定条件」表示枠
▼フリースペース区画
▼日付プルダウンメニュー
▼検索窓
▼日付境界バー
■投稿ボックス(一発言)ごとの表示：ノートの1エントリ
▼投稿ヘッダ(アイコン・名前・日時・投稿番号)
▼投稿本文
▼本文内に含まれるハッシュタグリンク
▼続きを読むリンク（ボタン）
▼折り畳み空間
▼カテゴリ名
▼投稿の補足表示(フッタ)
■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾
■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾
■ページナビゲーション領域
■サブ領域
▼段組の構成
▼日付一覧リスト・日付検索区画
▼ハッシュタグリスト区画
▼カテゴリツリー区画
▼新着投稿リスト区画
▼カレンダー区画
▼画像一覧リスト区画
▼その他の区画
■フッタ領域
*/
/* ============================================ */
/* ■デザイントークン(配色・フォントなどの基本設定) */
/* ============================================ */
/* 「複数人が書き込むノート」がコンセプト：紙・インク・とじ糸・朱色のはんこ、をイメージした配色にしています。 */
:root {
--paper: #f6efdd; /* ページ全体の背景＝古紙色 */
--paper-card: #fffdf6; /* ノート本体・カードの紙面色 */
--paper-inset: #f4ecd6; /* 一段沈んだ紙面(付箋の下地など) */
--rule: #ddceA4; /* ノートの罫線・薄い枠線 */
--rule-strong: #c9b784; /* やや濃いめの枠線 */
--ink: #322b1f; /* 本文の文字色(インク) */
--ink-soft: #7a7057; /* 補足文字色 */
--indigo: #34456a; /* 万年筆インク色＝リンクや構造色 */
--indigo-soft: #5d7099; /* 万年筆インクの淡色 */
--stamp: #a3393c; /* 朱色のはんこ・強調色 */
--stamp-soft: #cf7b78; /* はんこの淡色 */
--thread: #b3823c; /* とじ糸・アクセントの茶色 */
--washi: #f2da8c; /* 付箋(和紙テープ)色 */
--washi-pink: #f3c9c2; /* 付箋(和紙テープ)色・ピンク系 */
--shadow: rgba(50, 43, 31, 0.16); /* 紙の落ち影 */
--font-hand: "Klee One", "Yu Mincho", "游明朝", serif; /* 見出し用(手書き風) */
--font-body: "Zen Maru Gothic", "メイリオ", Meiryo, "Hiragino Sans", sans-serif; /* 本文用(丸ゴシック) */
--font-mono: ui-monospace, "Courier New", Courier, monospace; /* 日付・番号など事務的な要素用 */
}
/* ============== */
/* ■全体共通装飾 */
/* ============== */
body {
font-family: var(--font-body);
margin: 0;
padding: 0;
color: var(--ink);
background-color: var(--paper); /* 全体の背景色＝古紙色 */
/* ごく薄いドットの重なりで、紙のざらつきを再現 */
background-image:
radial-gradient(rgba(50,43,31,0.05) 1px, transparent 1px),
radial-gradient(rgba(50,43,31,0.04) 1px, transparent 1px);
background-size: 3px 3px, 7px 7px;
background-position: 0 0, 2px 4px;
}
/* -------------- */
/* ▼リンクの装飾 */
/* -------------- */
a:link { color: var(--indigo); } /* 未訪問リンク */
a:visited { color: var(--indigo-soft); } /* 既訪問リンク */
a:hover { color: var(--stamp); } /* マウスが載ったとき */
/* ------------------------- */
/* ▼URLが書かれた場合の装飾 */
/* ------------------------- */
.url {
word-break:break-all; /* 自動リンクのはみ出しを防ぐ */
}
/* ---------------------- */
/* ▼カード型リンクの装飾 */
/* ---------------------- */
.cardlink {
display: inline-block;
width: 100%;
max-width: 500px; /* 最大幅 */
padding: 0 0.25em 0.5em 0; /* 内側の余白量 */
font-size: 0.9rem; /* 文字サイズ */
text-decoration: none; /* リンク文字の下線を消す */
vertical-align: middle; /* 行内の上下方向では中央配置 */
}
/* ------------------------------------- */
/* リンクカードの装飾(サイズS/L共通部分) */
/* ------------------------------------- */
.cardlinkbox {
border: 1px solid var(--rule); /* 枠線 */
border-radius: 10px; /* 角丸 */
background-color: var(--paper-card); /* 背景色 */
display: flex; /* 内部レイアウトのFlexbox化 */
box-shadow: 0 2px 6px var(--shadow);
}
/* (マウスが載ったとき) */
.cardlinkbox:hover {
background-color: #fffef9; /* 背景色 */
border-color: var(--indigo-soft); /* 枠線色 */
}
/* ▽リンクカード内の画像枠 (※読み込まれたog:imageは、この枠に《背景画像として》描画されます) */
.cardlinkimage {
background-image: linear-gradient(-30deg, var(--indigo-soft), var(--paper-inset)); /* プレースホルダ的な背景グラデーション */
background-size: cover; /* 背景画像で枠を埋める */
background-position: center center; /* 背景画像を中央に寄せる */
background-repeat: no-repeat; /* 背景画像を繰り返さない */
}
/* ▽リンクカード内のテキスト枠 */
.cardlinktextbox {
display: flex; /* Flexbox化 */
flex-direction: column; /* 子要素を縦方向に並べる */
padding: 0.5em 1em; /* 内側の余白量 */
}
/* ▽リンクカードのテキスト枠内の3要素共通 */
.cardlinktitle,
.cardlinkdescription,
.cardlinkurl {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
line-clamp: 1;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
}
/* リンクタイトル */
.cardlinktitle {
padding-bottom: 0.25em; /* 内側下端の余白量 */
font-family: var(--font-hand);
}
/* リンク概要文 */
.cardlinkdescription {
line-height:1.3; /* 行の高さ */
color: var(--ink-soft); /* 文字色 */
line-clamp: 2;
-webkit-line-clamp: 2;
}
/* リンクドメイン */
.cardlinkurl {
color: #a79c7d; /* 文字色 */
font-family: var(--font-mono);
}
/* ----------------------------------- */
/* リンクカードの装飾(サイズS用の追記) */
/* ----------------------------------- */
.cardsize-S {
flex-direction: row; /* 画像とテキストは横に並べる(Flexbox) */
}
.cardsize-S .cardlinkimage {
min-width: 100px; /* 最小の横幅 */
min-height: 100px; /* 最小の高さ */
border-radius: 9px 0 0 9px; /* 左側だけ角丸 */
flex-shrink: 0; /* 枠サイズを自動縮小させない */
}
.cardsize-S .cardlinktextbox {
border-left: 1px solid var(--rule); /* 左側の枠線 */
justify-content:center; /* Flexboxの上下方向での中央寄せ */
}
.cardsize-S .cardlinktitle { order: 2; } /* タイトルは、2番目に表示 */
.cardsize-S .cardlinkdescription { order: 3; } /* 概要文 は、3番目に表示 */
.cardsize-S .cardlinkurl { order: 1; } /* ドメインは、1番上に表示 */
/* ----------------------------------- */
/* リンクカードの装飾(サイズL用の追記) */
/* ----------------------------------- */
.cardsize-L {
flex-direction: column; /* 画像とテキストは縦に並べる(Flexbox) */
}
.cardsize-L .cardlinkimage {
aspect-ratio: 1.91 / 1; /* 画像枠の縦横比を指定 */
width: 100%; /* 横幅は枠最大に拡げる */
height: auto; /* 高さは自動計算 */
border-radius: 9px 9px 0 0; /* 上側だけ角丸 */
}
.cardsize-L .cardlinktextbox {
border-top: 1px solid var(--rule); /* 上側の枠線 */
}
.cardsize-L .cardlinktitle { font-weight: bold; } /* 太字 */
.cardsize-L .cardlinkdescription { min-height: 2.5em; } /* 内容量が少ない場合でも一定の高さを確保 */
.cardsize-L .cardlinkurl {
border-top: 1px solid var(--rule); /* 上側の枠線 */
margin-top:0.5em; /* 上側の枠線より上の余白量 */
padding-top:0.5em; /* 上側の枠線より下の余白量 */
font-size:0.75rem; /* 文字サイズ(小さめ) */
}
/* ---------------------------------------------- */
/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ) */
/* ---------------------------------------------- */
/* D:削除(Delete) */
.decorationD {
color: #aaa; /* 文字色 */
text-decoration-line: line-through; /* 取り消し線 */
text-decoration-color: var(--stamp); /* 線の色 */
}
/* E:強調(Emphasis) */
.decorationE {
font-style: normal; /* 書体 */
font-weight: bold; /* 太字 */
color: var(--stamp); /* 文字色 */
text-emphasis: filled dot var(--thread); /* 傍点(circleより小さいdot形状に変更) */
}
/* Q:引用(Quote) */
.decorationQ {
border-left: 4px solid var(--indigo-soft); /* 左側の枠線 */
margin: 1em 0.3em 1em 1em; /* 外側の余白 */
padding: 0.75em 1em; /* 内側の余白 */
background-color: var(--paper-inset); /* 背景色 */
font-size: 0.95em; /* 文字サイズ */
border-radius: 0 6px 6px 0;
display: block; /* ブロック化：※Ver 2.2.0以降必須の記述 */
}
.decorationQ::before,
.decorationQ::after {
content: ''; /* 標準で付加されてしまう引用符を無効にする */
}
.decorationQ + br {
display: none; /* 引用直後の改行を無効化する */
}
/* S:小文字(Small) */
.decorationS {
font-size: 0.8em;
}
/* T:極小文字(Tiny) */
.decorationT {
font-size: 0.6em;
}
/* U:下線(Underline) */
.decorationU {
text-decoration-line: underline; /* 線位置 */
text-decoration-style: wavy; /* 線種類：手書き感のある波線に */
text-decoration-color: var(--stamp-soft); /* 線配色 */
}
/* ---------------------- */
/* ▼自由装飾用の装飾の例 */
/* ---------------------- */
.deco-scream {
font-size: 1.67em; /* 文字サイズ(1.67倍) */
}
.deco-code {
display: inline-block; /* インラインブロック化 */
font-family: var(--font-mono); /* 等幅フォント */
background-color: var(--paper-inset); /* 背景色 */
color: var(--ink); /* 文字色 */
border: 1px solid var(--rule); /* 枠線 */
border-radius: 4px; /* 角丸 */
padding: 0px 4px; /* 内側の余白量 */
}
.deco-separator {
display: block; /* ブロック化 */
border-bottom: 1px dashed var(--rule-strong); /* 下線 */
}
.deco-flex {
display: flex; /* Flexbox */
gap: 1em; /* 余白量 */
align-items: start; /* 上寄せ */
justify-content: start; /* 左寄せ */
flex-wrap: wrap; /* 折り返し許可 */
}
/* -------------- */
/* ▼埋め込み画像 */
/* -------------- */
.embeddedpictbox {
margin: 0; /* 外側の余白を消す */
padding: 0; /* 内側の余白を消す */
display: inline-table; /* 横方向に並べる */
border-collapse: collapse; /* displayをinline-tableにする場合に必要 */
border: 1px solid var(--rule); /* 枠線 */
border-radius: 4px;
overflow: hidden;
vertical-align: top; /* 行内では上に寄せる */
}
/* キャプション */
.embeddedpictbox figcaption {
display: table-caption; /* キャプションが画像幅から外に出ないようにする */
caption-side: bottom; /* キャプションの位置(上にしたければtop) */
font-size: 0.8em; /* 文字サイズ */
text-align: center; /* センタリング */
background-color: var(--paper-inset); /* 背景色 */
color: var(--ink-soft);
padding: 0.2em 0;
}
/* 画像ボックスに含まれる画像 */
.embeddedpictbox img {
vertical-align: middle;
}
/* ▽画像リンク */
.imagelink {
display: inline-block;
line-height: 1; /* 表示形態によっては画像の下に余計な空白が出るのを防ぐ対策 */
vertical-align: inherit; /* 同上 */
}
/* ▽画像そのもの */
.embeddedimage {
max-width: 100%; /* 横方向にはみ出ないようにする */
max-height: 240px; /* 大きくなりすぎないようにする */
width: auto;
height: auto;
border-radius: 4px;
box-shadow: 0 2px 6px var(--shadow);
}
/* ▽フラグ付き画像 */
figure.nsfw {
overflow: hidden; /* ぼかし領域がfigureのボックスからはみ出ないようにする */
}
.imagelink.nsfw {
overflow: hidden; /* ぼかし領域がfigureのボックスからはみ出ないようにする */
}
img.nsfw {
filter: blur(9px); /* ぼかす */
}
/* -------------- */
/* ▼埋め込み動画 */
/* -------------- */
figure.embeddedvideo {
margin: 0;
padding: 0;
display: flex;
flex-direction: column-reverse;
}
.videotitle {
text-align: center;
background-color: var(--paper-inset);
color: var(--ink-soft);
}
video.embeddedvideo {
display: inline-block;
max-width: 100%;
width: auto;
height: auto;
border-radius: 4px;
}
@media all and (max-width: 600px) {
.embeddedmovie {
display: inline-block;
max-width: 100%; /* はみ出ないようにする */
width: auto;
height: auto;
}
}
/* --------------- */
/* ▼埋め込みTweet */
/* --------------- */
blockquote.twitter-tweet {
background-color: var(--paper-inset);
border: 1px dashed var(--rule-strong);
border-radius: 9px;
margin: 0.3em 0;
padding: 1em;
font-size: 0.95em;
color: var(--ink-soft);
}
div.twitter-tweet {
max-width: 350px !important;
}
/* ---------------------------------------------------- */
/* ▼汎用装飾(てがろぐ専用記法で書かれた場合のみ)：画像 */
/* ---------------------------------------------------- */
.decorationB img {
box-shadow: 5px 5px 0 var(--washi); /* 右下に色紙を重ねたような影 */
}
.decorationD img {
opacity: 0.5; /* 半透明にする */
}
.decorationE img {
outline: 6px solid rgba(163, 57, 60, 0.35); /* 朱色の縁取り */
}
.decorationI img {
box-shadow: -5px 5px 0 var(--washi-pink);
}
.decorationQ img {
vertical-align: middle; /* 行の上下方向で真ん中に寄せる */
}
.decorationS img {
border-radius: 12px; /* 半径12pxで角丸にする */
vertical-align: middle; /* 行の上下方向で真ん中に寄せる */
}
.decorationT img {
max-height: 75px; /* 高さを最大75pxに抑える */
width: auto; /* 横幅は縦横比を維持する */
vertical-align: middle; /* 行の上下方向で真ん中に寄せる */
}
.decorationU img {
width: auto; /* 原寸で表示する */
height: auto;
max-width: 100%; /* 横方向にはみ出ないようにする */
}
/* -------------------- */
/* ▼検索語のハイライト */
/* -------------------- */
.searchword {
font-weight: bold;
background: linear-gradient(transparent 60%, var(--washi) 60%); /* マーカーを引いたような装飾 */
}
/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */
header {
width: 100%; /* 横幅いっぱい */
box-sizing: border-box;
margin: 0;
padding: 0.75em 1.5em; /* 内側の余白 */
background-color: var(--indigo);
color: #f2ead2;
text-align: center;
}
/* -------------- */
/* ▼ヘッダ概要文 */
/* -------------- */
.description {
font-size: 0.8em; /* 文字サイズ */
line-height: 1.3; /* 行間 */
margin: 0;
}
/* RSSリンク */
.description a { color: #d9e0f0; }
.rss a {
display: inline-block;
margin: 0 0.2em;
}
/* ---------------------- */
/* ▼コントロールリンク群 */
/* ---------------------- */
.control-links {
display: table-cell; /* 段組の段 */
font-size: 0.85em; /* 文字サイズ */
text-align: right; /* 右寄せ */
vertical-align: middle;
min-width: 15em; /* 最小横幅 */
}
/* ボタン化装飾：紙のタグ風 */
.control-links a {
display: inline-block; /* インラインブロック化 */
margin: 0 0 3px 0.5em; /* 外側の余白 */
padding: 0.3em 0.9em; /* 内側の余白 */
text-decoration: none; /* 下線を消す */
border: 1px solid rgba(242,234,210,0.5); /* 枠線 */
border-radius: 999px; /* 角丸(ピル型) */
background-color: transparent; /* 背景色 */
color: #f2ead2; /* 文字色 */
}
/* ボタンにマウスが載った際 */
.control-links a:hover {
background-color: var(--stamp); /* 背景色 */
color: white; /* 文字色 */
border-color: var(--stamp); /* 枠線色 */
}
@media all and (max-width: 600px) {
header {
padding: 0.5em 0.75em; /* 内側の余白 */
}
.control-links {
min-width: 7em; /* 最小横幅 */
}
}
/* ======================== */
/* ■入力フォームの表示領域 */
/* ======================== */
.postform {
background-color: var(--washi); /* 背景色：付箋風 */
border: 1px solid var(--rule-strong);
border-radius: 8px;
margin: 1em 0.25em; /* 外側の余白量 */
padding: 1em; /* 内側の余白量 */
box-shadow: 0 3px 8px var(--shadow);
transform: rotate(-0.3deg);
}
.postform p {
margin: 0;
}
/* ------------ */
/* ▼本文入力欄 */
/* ------------ */
textarea.tegalogpost {
border: 2px solid var(--indigo); /* 枠線 */
border-radius: 8px; /* 枠の角丸 */
background-color: var(--paper-card); /* 背景色 */
font-family: var(--font-body);
font-size: 0.9rem; /* 文字サイズ */
padding: 0.5em; /* 内側の余白量 */
margin-bottom: 0.25em; /* 外側下の余白量 */
box-sizing: border-box; /* サイズ解釈方法 */
width: 100%; /* 横幅 */
height: 4.3em; /* 高さ */
overflow-wrap: break-word; /* 折り返し方法 */
overflow: auto; /* はみ出した場合の処理 */
}
textarea.tegalogpost:placeholder-shown { color: var(--ink-soft); }
textarea.tegalogpost:focus:placeholder-shown { color: #bbb; }
textarea.tegalogpost:-ms-input-placeholder { color: #aaa; }
@media all and (max-width: 800px) {
textarea.tegalogpost {
font-size: 16px; /* 文字サイズ */
padding: 0.4em; /* 内側の余白量 */
}
}
/* ------------------------------------------------ */
/* ▼投稿コントロール部分(ボタンや字数カウンタなど) */
/* ------------------------------------------------ */
.line-control {
margin: 0.25em 0; /* 外側の余白量 */
}
/* ------------ */
/* ▼投稿ボタン */
/* ------------ */
.postbutton {
display: inline-block; /* インラインブロック化 */
background: var(--stamp); /* 背景色：朱色スタンプ風 */
color: white; /* 文字色 */
font-family: var(--font-hand);
font-size: 1rem; /* 文字サイズ */
font-weight: bold; /* 太字 */
text-decoration: none; /* 下線を消す */
padding: 0.3em 1em; /* 内側の余白量 */
border: 1px solid var(--stamp); /* 枠線 */
border-radius: 999px; /* 枠の角丸(ピル型) */
box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
/* ▼投稿ボタンにマウスが載ったとき */
.postbutton:hover {
background-color: #8f2f31; /* 背景色 */
border-color: #8f2f31; /* 枠線色 */
}
/* ------------------ */
/* ▼文字装飾ボタン群 */
/* ------------------ */
.decoBtns { display: inline-block; margin-top: 0.5em; }
.decoBtns input { min-width: 32px; min-height: 28px; margin:1px; background-color: var(--paper-card); border: 1px solid var(--rule-strong); cursor: pointer; border-radius: 4px; font-size: 14px; vertical-align: middle; }
.decoBtns input:hover { background-color:#eef0f7; border-color: var(--indigo); }
.decoBtnB { font-weight: bold; }
.decoBtnD { text-decoration: line-through; text-decoration-color: var(--stamp); }
.decoBtnE { font-weight: bold; color: var(--indigo); }
.decoBtnI { font-style: italic; }
.decoBtnQ { }
.decoBtnS { }
.decoBtnT { font-size: 11px !important; }
.decoBtnU { text-decoration: underline; text-decoration-color: var(--stamp); }
.decoBtnC { color: var(--stamp); }
.decoBtnM { color: var(--indigo); }
@media all and (min-width: 800px) {
.decoBtns { margin-top: 0; }
}
@media all and (max-width: 600px) {
.postform {
margin: 0.5em;
padding: 0.75em 0.5em;
transform: none; /* 小画面では傾けない */
}
}
/* -------------------------------- */
/* ▼カテゴリ選択チェックボックス群 */
/* -------------------------------- */
.catChecks { font-size:0.9em; padding-top: 0.5em; }
.catChecks label { display:inline-block; cursor:pointer; margin:0 0.75em 0 0; }
.catChecks label:hover { text-decoration:underline; }
.catChecks input { min-width:0; min-height:0; margin-right:0.2em; }
.funcUIs .catChecks { margin:0 0.75em 0 0; }
.funcUIs .catChecks label { margin: 0; }
/* ====================== */
/* ■メイン(ログ掲載)領域 */
/* ====================== */
/* ノート本体：左端にリング穴を並べて、綴じ手帳の見た目にしています。 */
.mainarea {
position: relative;
margin: 1.5em auto; /* 外側の余白量 */
max-width: 900px;
padding: 1.5em 2em 2em 3.2em; /* 内側の余白量(左を広めに＝リング穴の分) */
box-sizing: border-box;
background-color: var(--paper-card); /* 背景色 */
border: 1px solid var(--rule-strong); /* 枠線 */
border-radius: 10px; /* 角丸 */
box-shadow: 0 6px 20px var(--shadow);
}
/* ▽リング綴じの穴を左端に並べる装飾 */
.mainarea::before {
content: "";
position: absolute;
left: 1.1em;
top: 1.6em;
bottom: 1.6em;
width: 0;
border-left: 2px dashed var(--rule-strong);
background-image: radial-gradient(var(--paper) 45%, transparent 46%);
background-size: 100% 2.4em;
background-repeat: repeat-y;
}
/* -------------------- */
/* ▼ページタイトル区画 */
/* -------------------- */
.pagetitle {
text-align: center; /* 中央寄せ */
margin: 0; /* 外側の余白量 */
padding: 0.5em 0 0.75em 0; /* 内側の余白量 */
font-family: var(--font-hand);
font-weight: 600;
font-size: 1.6rem;
border-bottom: 1px dashed var(--rule);
}
/* ページタイトルのリンク */
.pagetitle a {
text-decoration: none; /* 下線を消す */
color: var(--ink); /* 文字色 */
}
.pagetitle a:hover {
color: var(--stamp); /* 文字色 */
}
.pagetitle .subtitle {
display: block;
font-family: var(--font-body);
font-size: 0.55em;
font-weight: normal;
color: var(--ink-soft);
margin-top: 0.2em;
}
/* ---------- */
/* ▼更新日時 */
/* ---------- */
.modified {
text-align: center; /* 中央寄せ */
font-size: 0.85em; /* 文字サイズ */
font-family: var(--font-mono);
color: var(--ink-soft); /* 文字色 */
margin: 0.5em 0 1.5em 0;
}
@media all and (max-width: 600px) {
.mainarea {
margin: 0.5em; /* 外側の余白 */
padding: 1em 1em 1em 2.2em; /* 内側の余白 */
}
.mainarea::before {
left: 0.6em;
}
.pagetitle {
font-size: 1.25rem;
padding: 0.5em 0; /* 内側の余白 */
}
.modified {
font-size: 0.75em;
}
}
/* ---------------------------------------------------- */
/* ▼上部概要＋表示対象の限定時などの「限定条件」表示枠 */
/* ---------------------------------------------------- */
.noticebox {
margin: 1.5em 0; /* 外側の余白 */
padding: 0; /* 内側の余白 */
border: 1px solid var(--rule-strong);
border-radius: 8px;
overflow: hidden;
background-color: var(--paper-inset); /* 背景色 */
}
/* 上部(限定表示や件数) */
.noticehead {
display: table; /* 段組 */
width: 100%; /* 横幅いっぱい */
box-sizing: border-box;
margin: 0; /* 外側の余白 */
padding: 0.5em 0.75em; /* 内側の余白 */
font-size: 1.05em; /* 文字サイズ */
font-family: var(--font-hand);
background-color: var(--indigo); /* 背景色 */
color: #f2ead2; /* 文字色 */
}
.noticehead > span {
display: table-cell; /* 段組の段 */
}
/* 限定条件 */
.situation {
font-weight: bold; /* 太字 */
}
/* 該当件数枠 */
.targetposts {
text-align: right; /* 右寄せ */
font-family: var(--font-mono);
font-weight: normal; /* 書体をリセット */
min-width: 5.5em; /* 最小横幅 */
}
/* 下部(概要や検索窓など) */
.noticebody {
display: table; /* 段組 */
}
.noticebody > div {
display: table-cell; /* 段組の段 */
}
.noticebody > div:first-child {
width: 100%;
box-sizing: border-box;
}
/* ………………………… */
/* ▼フリースペース区画 */
/* ………………………… */
.freespacearea {
margin: 0; /* 外側の余白量 */
padding: 0; /* 内側の余白量 */
}
/* ▼見出し */
.freespacearea .cornertitle {
margin: 0.75em 0.75em 0.05em 0.75em; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
/* ▽フリースペースの編集リンク */
.freespaceedit {
margin-left: 0.5em; /* 左側の余白 */
font-weight: normal; /* 太字リセット */
font-size: 0.7em; /* 文字サイズ */
}
/* ▽RSSフィードへのリンク */
.rsslink {
margin-left: 0.5em; /* 左側の余白 */
color: var(--indigo-soft);
}
.rsslink::before {
content: "■ "; /* RSSであることが分かるように簡単な目印を付加 */
font-size: 0.9em;
}
/* ▽フリースペースの本文 */
.freespacebody {
margin: 0 0.75em 0.75em 0.75em; /* 外側の余白量 */
padding: 0; /* 内側の余白量 */
font-size: 0.9em; /* 文字サイズ */
line-height: 1.35; /* 行の高さ */
}
/* ……………………………… */
/* ▼日付プルダウンメニュー */
/* ……………………………… */
.datepullbox {
margin: 0; /* 外側の余白量 */
padding: 0.75em; /* 内側の余白量 */
border-left: 1px dashed var(--rule-strong); /* 左枠線 */
min-width: 270px; /* 最低横幅 */
}
/* ▼見出し */
.datepullbox .cornertitle {
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
margin: 0; /* 外側の余白 */
color: var(--indigo); /* 文字色 */
}
/* ▽日付フォーム */
.datelimitbox {
margin: 0; /* 外側の余白量 */
padding: 0; /* 内側の余白量 */
}
/* 日付プルダウンメニュー自体のデザイン */
.datelimitbox select {
border: 2px solid var(--indigo-soft); /* 枠線 */
border-radius: 4px;
padding: 0.25em 0.5em 0.35em; /* 内側の余白 */
background-color: var(--paper-card);
}
/* 日付限定の「表示」ボタン */
.datelimitbox .submitbutton {
display: inline-block; /* インラインブロック化 */
margin: 0 0 0 3px; /* 外側の余白 */
padding: 0.25em 0.8em; /* 内側の余白 */
background-color: var(--indigo); /* 背景色 */
color: white; /* 文字色 */
border: 1px solid var(--indigo); /* 枠線 */
border-radius: 999px; /* 角丸 */
font-size: 0.9em; /* 文字サイズ */
font-weight: bold; /* 太字 */
}
/* 日付限定の「表示」ボタンにマウスが載った際 */
.datelimitbox .submitbutton:hover {
background-color: var(--stamp); /* 背景色 */
color: white; /* 文字色 */
}
/* ▽昇順/降順選択ラジオボタン区画 */
.datelimitboxoptions {
display: block; /* ブロック化 */
font-size: 0.9em; /* 文字サイズ */
}
/* ▽ラジオボタンのラベル */
.datelimitboxoptions label {
display: inline-block; /* インラインブロック化 */
margin-right: 0.25em; /* 外側右の余白量 */
}
/* ………… */
/* ▼検索窓 */
/* ………… */
.searcharea {
margin: 0; /* 外側の余白量 */
padding: 0.75em; /* 内側の余白量 */
border-left: 1px dashed var(--rule-strong); /* 左枠線 */
min-width: 270px; /* 最低横幅 */
}
/* ▼見出し */
.searcharea .cornertitle {
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
margin: 0; /* 外側の余白 */
color: var(--indigo); /* 文字色 */
}
/* ▽検索フォーム */
.searchbox {
width: auto;
margin: auto; /* 外側の余白量 */
}
/* 検索語の入力欄 */
.queryinput {
border: 2px solid var(--indigo-soft); /* 枠線 */
border-radius: 999px; /* 角丸 */
font-size: 1em; /* 文字サイズ */
padding: 0.25em 0.75em; /* 内側の余白 */
background-color: var(--paper-card);
}
/* 検索ボタン */
.searchbox .submitbutton {
display: inline-block; /* インラインブロック化 */
margin: 0 0 0 3px; /* 外側の余白 */
padding: 0.25em 0.8em; /* 内側の余白 */
background-color: var(--indigo); /* 背景色 */
color: white; /* 文字色 */
border: 1px solid var(--indigo); /* 枠線 */
border-radius: 999px; /* 角丸 */
font-size: 0.9em; /* 文字サイズ */
font-weight: bold; /* 太字 */
}
.searchbox .submitbutton:hover {
background-color: var(--stamp); /* 背景色 */
color: white; /* 文字色 */
}
/* ▽検索対象を限定するチェックボックス */
.searchtarget {
margin: 0;
font-size: 0.9em; /* 文字サイズ */
line-height: 1.3; /* 行の高さ */
}
@media all and (max-width: 1024px) { /* 横幅1024px以下 */
.noticebody {
display: block;
text-align: center;
}
.noticebody > div {
display: inline-block;
text-align: left;
vertical-align: top;
}
.freespacearea {
border-bottom: 1px dashed var(--rule);
}
.datepullbox,
.searcharea {
border-left: none;
}
}
@media all and (max-width: 600px) { /* 横幅600px以下 */
.datepullbox {
border-bottom: 1px dotted var(--rule);
}
.targetposts {
font-size: 0.75em;
}
}
/* -------------- */
/* ▼日付境界バー */
/* -------------- */
.dateseparator {
margin: 2em 0 1.5em 0; /* 外側の余白量 */
padding: 0.4em 0.75em; /* 内側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--indigo);
background-color: var(--paper-inset);
border-radius: 999px;
display: inline-block;
}
/* ▼日付境界バーの表示文字列の先頭に付加する記号 */
.dateseparator::before {
font-size: 0.9em;
margin-right: 0.3em;
}
/* ▼日付境界バー内のリンク(ボタン) */
.dateseparator a {
display: inline-block; /* インラインブロック化 */
margin-left: 0.75em; /* 外側左の余白量 */
background-color: var(--paper-card); /* 背景色 */
color: var(--indigo); /* 文字色 */
font-size: 0.75em; /* 文字サイズ */
font-weight: normal; /* 太字を解除 */
border: 1px solid var(--indigo-soft); /* 枠線 */
border-radius: 999px; /* 枠の角丸 */
padding: 0px 1em; /* 内側の余白量 */
text-decoration: none; /* 下線を消す */
vertical-align:middle; /* 上下の中心寄せ */
}
/* ▼日付境界バー内のリンク(ボタン)にマウスが載ったとき */
.dateseparator a:hover {
background-color: var(--indigo); /* 背景色 */
color: white; /* 文字色 */
border-color: var(--indigo); /* 枠線の色 */
}
@media all and (max-width: 600px) {
.dateseparator {
margin-bottom: 0.75em;
display: block;
text-align: center;
border-radius: 8px;
}
}
/* ============================================ */
/* ■投稿ボックス(一発言)ごとの表示：ノートの1エントリ */
/* ============================================ */
/* 内側スキン(skin-onelog.html)は、アイコン・名前・日時を先頭にまとめた
「投稿ヘッダ(.entryhead)」を持つ構成に変更しています。 */
.onelogbox {
position: relative;
margin: 0 0 1.5em 0; /* 外側の余白 */
padding: 1em 1.1em 0.9em 1.1em; /* 内側の余白 */
background-color: var(--paper-card);
border: 1px solid var(--rule);
border-radius: 8px;
box-shadow: 0 2px 5px var(--shadow);
}
/* 先頭固定の投稿 */
.onelogbox.pinned {
border-color: var(--thread);
box-shadow: 0 0 0 2px var(--washi), 0 2px 5px var(--shadow);
}
/* …………………………………… */
/* ▼投稿ヘッダ(アイコン・名前・日時・投稿番号) */
/* …………………………………… */
.entryhead {
display: flex;
align-items: center;
gap: 0.7em;
margin: 0 0 0.6em 0;
position: relative;
z-index: 1;
}
/* ユーザ情報リンク枠 */
.usericonlink {
display: inline-block;
text-decoration: none;
flex-shrink: 0;
}
.usericonlink:hover .iconarea {
transform: scale(1.06);
}
/* ユーザアイコン枠：丸くリング付きのアバターに */
.iconarea {
display: inline-block;
border-radius: 50%;
line-height: 0;
border: 2px solid var(--user-ring, var(--indigo-soft));
box-shadow: 0 2px 4px var(--shadow);
transition: transform 0.15s ease;
}
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼ユーザアイコン画像の表示サイズ調整はここ */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
img.usericon {
display: block;
width: 40px; /* ユーザアイコン画像の横幅（固定） */
height: 40px; /* ユーザアイコン画像の高さ（固定） */
border-radius: 50%;
object-fit: cover;
background-color: var(--paper-inset);
}
/* 名前＋日時をまとめる列 */
.entryheadtext {
display: flex;
flex-direction: column;
line-height: 1.3;
min-width: 0; /* flexで文字が縮められるように */
flex: 1;
}
/* 投稿者名 */
.username {
font-family: var(--font-hand);
font-weight: 600;
font-size: 1.02em;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.username a {
color: inherit;
text-decoration: none;
}
.username a:hover {
color: var(--stamp);
}
/* ‥‥‥‥‥‥‥‥‥ */
/* ▼投稿日時 */
/* ‥‥‥‥‥‥‥‥‥ */
.postdate {
font-size: 0.78em; /* 文字サイズ */
font-family: var(--font-mono);
color: var(--ink-soft); /* 文字色 */
}
/* 日付 */
.postdate .date {
font-weight: normal; /* 太字 */
}
/* 時刻 */
.postdate .time {
display: inline-block;
}
/* 経過時間 */
.postdate .past {
display: inline-block;
margin-left: 0.4em;
color: #a79c7d;
}
/* New!サイン：スタンプ風 */
.newsign {
display: inline-block; /* インラインブロック化 */
color: white; /* 文字色 */
background-color: var(--stamp);
font-size: 0.62em; /* 文字サイズ */
font-weight: bold; /* 太字 */
padding: 0.1em 0.5em;
border-radius: 999px;
margin-left: 0.4em;
vertical-align: middle;
transform: rotate(-4deg);
display: inline-block;
}
.newsign:empty {
display: none;
}
/* 投稿番号：右上にスタンプのように小さく */
.postid {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 0.75em;
color: var(--ink-soft);
align-self: flex-start;
}
/* 投稿番号リンク */
.postid a {
text-decoration: none;
color: var(--ink-soft);
}
.postid a:hover {
color: var(--stamp);
text-decoration: underline;
}
/* …………… */
/* ▼投稿本文 */
/* …………… */
.comment {
position: relative;
z-index: 1;
margin: 0 0 0.6em 0; /* 外側の余白 */
padding: 0 0 0.1em 1.5em; /* 内側の余白(左側は罫線用のマージン分だけ広めに) */
line-height: 2em; /* 行の高さ＝罫線の間隔 */
color: var(--ink);
background-image: repeating-linear-gradient(
var(--paper-card) 0, var(--paper-card) calc(2em - 1px),
var(--rule) calc(2em - 1px), var(--rule) 2em
);
background-position: 0 0; /* 投稿本文の先頭から罫線を開始する(ヘッダの高さに左右されない) */
}
/* ▽ノートの左側にある綴じ用の赤いマージン線(本文の高さちょうどに合わせています) */
.comment::before {
content: "";
position: absolute;
left: 0.7em;
top: 0;
bottom: 0.1em;
width: 0;
border-left: 1px solid var(--stamp-soft);
opacity: 0.55;
}
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼本文内に含まれるハッシュタグリンク */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
.comment .taglink {
display: inline-block; /* インラインブロック化 */
margin: 0 2px; /* 外側の余白量 */
padding: 0 0.4em;
background-color: rgba(163, 57, 60, 0.72);
border-radius: 0;
color: #fff;
text-decoration: none; /* 下線を消す */
word-break:break-all; /* 自動リンクのはみ出しを防ぐ */
}
/* ▼ハッシュタグリンクにマウスが載ったとき */
.comment .taglink:hover {
background-color: rgba(163, 57, 60, 1);
color: white; /* 文字色 */
}
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▼続きを読むリンク（ボタン） */
/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
/* ▽ボタン枠の装飾(共通) */
.readmorebutton {
display: inline-block; /* インラインブロック化 */
padding: 1px 0.6em; /* 内側の余白 */
margin: 0 1px; /* 外側の余白 */
border: 1px solid var(--rule-strong); /* 枠線の装飾 */
border-radius: 999px; /* 枠線の角丸 */
}
/* ▽ボタン表面の装飾(共通) */
.readmorebutton:link,
.readmorebutton:visited {
background-color: var(--paper-inset); /* 背景色 */
color: var(--indigo); /* 文字色 */
text-decoration: none; /* リンク装飾を消す */
}
/* ▽ボタンにマウスが載った際の装飾(共通) */
.readmorebutton:hover {
background-color: var(--indigo); /* 背景色 */
color: white; /* 文字色 */
text-decoration: none; /* 下線を加える */
}
/* ▽開く（続きを読む）ボタン専用の装飾 */
.readmorebutton.readmoreopen {
font-size: 0.95em; /* 文字サイズ */
}
/* ▽閉じる（畳む）ボタン専用の装飾 */
.readmorebutton.readmoreclose {
font-size: 0.75em; /* 文字サイズ */
}
/* ‥‥‥‥‥‥‥ */
/* ▼折り畳み空間 */
/* ‥‥‥‥‥‥‥ */
/* ▽ボタンカバー */
.foldswitch {
width: fit-content; /* 横幅を中身のサイズに制限 */
}
/* ▽ボタン */
.foldlabel {
display: inline-block; /* インラインブロック化 */
padding:0.25rem 0.6rem; /* 内側の余白 */
border:1px solid var(--rule-strong); /* 枠線の装飾 */
border-radius:999px; /* 枠線の角丸 */
background-color: var(--paper-inset); /* 背景色 */
color: var(--indigo); /* 文字色 */
line-height: 1; /* 行高 */
cursor: pointer; /* マウス形状をポインタに */
}
/* ▽マウスが載った際の装飾(共通) */
.foldlabel:hover {
background-color: var(--indigo); /* 背景色 */
color: white; /* 文字色 */
}
/* ▽折り畳まれている空間 */
.foldedarea {
border-left:3px solid var(--stamp-soft); /* 左側の枠線 */
margin: 0.25rem 0 0 0.125rem; /* 外側の余白 */
padding: 0.25rem 0.5rem; /* 内側の余白 */
}
/* ‥‥‥‥‥‥ */
/* ▼カテゴリ名 */
/* ‥‥‥‥‥‥ */
.categories {
}
/* ▽カテゴリリンク1つ */
.categorylink {
display: inline-block;
text-decoration: none; /* リンクの下線を消す */
}
/* ▽カテゴリリンクにマウスが載ったとき */
.categorylink:hover {
text-decoration: underline; /* 下線を表示 */
}
/* ▽カテゴリ間のセパレータ */
.catseparator {
display: inline-block;
margin: 0 2px; /* 左右に1pxの余白 */
color: #a79c7d; /* 文字色 */
}
/* ▽カテゴリアイコン */
.categoryicon img {
height: 1.2em;
width: auto;
vertical-align: text-top;
margin: 0 1px;
}
/* …………………… */
/* ▼投稿の補足表示(フッタ) */
/* …………………… */
.onelogsupplement {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 0.6em;
align-items: center;
margin: 0.4em 0 0 0;
padding-top: 0.4em;
border-top: 1px dashed var(--rule);
font-size: 0.72em; /* 文字サイズ */
color: var(--ink-soft);
}
.onelogsupplement .length::before { content: "🖊 "; }
.onelogsupplement .editlink a {
text-decoration: none;
color: var(--indigo-soft);
}
.onelogsupplement .editlink a:hover {
color: var(--stamp);
text-decoration: underline;
}
@media all and (max-width: 600px) { /* 横幅600px以下 */
.onelogbox {
margin: 0 0 1em 0;
padding: 0.85em 0.85em 0.75em 0.85em;
border-radius: 6px;
}
.onelogbox::before {
left: 2.1em;
}
img.usericon {
width: 32px;
height: 32px;
}
.username {
font-size: 0.95em;
}
}
@media all and (max-width: 374px) { /* 横幅374px以下 */
.postdate {
font-size: 0.72em;
}
}
@media all and (max-width: 350px) { /* 横幅350px以下 */
.entryhead {
gap: 0.5em;
}
.editlink {
font-size: 0.9em;
}
.newsign {
font-size: 0.55em;
}
}
/* ============================================================ */
/* ■鍵付き(パスワード保護)投稿に表示される鍵入力フォームの装飾 */
/* ============================================================ */
.passkeyform {
display: inline-block;
margin: 0;
padding: 0.75em;
background-color: var(--paper-inset);
border: 1px dashed var(--rule-strong);
border-radius: 6px;
}
/* ▼鍵違いエラーの表示 */
.passkeyerror {
display: block;
color: white;
background-color: var(--stamp);
font-weight: bold;
line-height: 1;
margin: 0 0 0.5em 0;
padding: 0.4em 0.5em;
border-radius: 4px;
}
/* ▼入力フォーム枠 */
.passkeybox {
display: block;
}
/* ▼入力欄前のガイド文 */
.passkeyguide {
margin-right: 0.1em;
}
/* ▼鍵入力欄 */
.passkeyinput {
width: 10em;
margin: 0 0.25em 3px 0;
border: 1px solid var(--rule-strong);
border-radius: 4px;
padding: 0.2em 0.4em;
}
/* ▼送信ボタン */
.passkeysubmit {
}
/* ====================================================================== */
/* ■一発言だけが表示される際に追加表示されるユーティリティリンク群の装飾 */
/* ====================================================================== */
.utilitylinks {
margin: 2em auto 2em auto; /* 外側の余白量 */
max-width: 800px;
padding: 1em 1.5em; /* 内側の余白量 */
border: 1px dashed var(--rule-strong); /* 枠線 */
border-radius: 8px; /* 枠の角丸 */
background-color: var(--paper-inset); /* 背景色 */
font-size: 0.9em; /* 文字サイズ */
}
/* ▼ナビのリンクリスト */
.utilitylinks ul {
color: var(--indigo); /* 文字色 */
margin: 0.5em; /* 外側の余白 */
padding: 0 0 0 1em; /* 内側の余白 */
list-style-type: none; /* リスト先頭記号の省略 */
}
.utilitylinks ul ul {
list-style-type: disc; /* リスト先頭記号 */
}
@media all and (max-width: 767px) {
.utilitylinks {
margin: 1.5em 1.25em
}
}
/* ========================== */
/* ■ページナビゲーション領域 */
/* ========================== */
.pagenavi {
text-align: center; /* 中央寄せ */
max-width: 900px;
margin: 0 auto;
}
/* ------------------------------------ */
/* ▼ページ前後移動リンク群ボックス全体 */
/* ------------------------------------ */
.pagelinks {
margin: 0.15em; /* 外側の余白 */
}
/* ▼ページ移動リンクの文字 */
.pagelinks a {
font-weight: bold; /* 太字 */
text-decoration: none;
}
.pagelinks a:hover { text-decoration: underline; }
/* -------------------------------- */
/* ▼ページ番号リンク群ボックス全体 */
/* -------------------------------- */
p.pagenums {
margin: 0.5em; /* 外側の余白 */
}
/* ▼ページ番号リンクの数字 */
.pagenums a.pagenumlink {
margin: 0px 2px 0px 2px; /* 外側の余白 */
padding: 0.2em 0.65em; /* 内側の余白 */
font-size: 1em; /* 文字サイズ */
font-weight: bold; /* 太字 */
border-radius: 999px;
text-decoration: none;
}
/* ▽現在のページ番号の装飾 */
a.pagenumhere {
text-decoration: none; /* リンク装飾を消す */
background-color: var(--stamp); /* 背景色 */
color: white; /* 文字色 */
border-radius: 999px; /* 角丸 */
}
/* ▽ページ番号リンクにマウスが載った際の装飾 */
a.pagenumlink:hover {
text-decoration: none; /* リンク装飾を消す */
background-color: var(--indigo); /* 背景色 */
color: white; /* 文字色 */
border-radius: 999px; /* 角丸 */
}
/* ------------------------------------ */
/* ▼限定解除リンク(＝HOMEに戻るリンク) */
/* ------------------------------------ */
.pagehome {
margin: 0.15em; /* 外側の余白 */
font-weight: bold; /* 太字 */
}
/* ========== */
/* ■サブ領域 */
/* ========== */
.subarea {
margin: 1.5em auto; /* 外側の余白量 */
max-width: 900px;
padding: 1.5em 2em; /* 内側の余白量 */
box-sizing: border-box;
background-color: var(--paper-card); /* 背景色 */
border: 1px solid var(--rule-strong); /* 枠線 */
border-radius: 10px; /* 角丸 */
box-shadow: 0 6px 20px var(--shadow);
}
/* ------------ */
/* ▼段組の構成 */
/* ------------ */
.columnbox {
display: flex; /* 段組 */
box-sizing: border-box;
width: 100%;
}
.columnbox > div {
flex: 1; /* 段の幅（均等） */
}
.columnbox > div:not(:first-child) {
/* 先頭以外の段に対して */
border-left: dashed 1px var(--rule); /* 左側の枠線 */
padding-left: 1em; /* 左側の余白 */
}
/* 段組の2行目以降 */
.columnbox + .columnbox {
margin-top: 1em;
padding-top: 1em;
border-top: 1px dashed var(--rule);
}
/* ------------------------------ */
/* ▼日付一覧リスト・日付検索区画 */
/* ------------------------------ */
.datelistarea {
margin: 0; /* 外側の余白量 */
padding: 0; /* 内側の余白量 */
}
/* ▼見出し */
.datelistarea .cornertitle {
margin: 0; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
/* …………………………… */
/* ▼日付リンクリスト区画 */
/* …………………………… */
/* ▽日付リスト(年単位) */
.datelimitlist {
margin: 0.5em 0; /* 外側の余白量 */
padding: 0.5em 0.5em 0.5em 1.5em; /* 内側の余白量 */
border-radius: 6px; /* 角丸 */
}
/* ▽日付リスト(月単位) */
.datelimitsublist {
margin: 0; /* 外側の余白量 */
padding: 0 0 0 5px; /* 内側の余白量 */
list-style-type: none; /* リストの先頭記号(なし) */
font-size: 0.9em; /* 文字サイズ */
}
.datelimitlist .datelimitsublist .datelimit-month {
display: inline-block;
margin-right: 0.9em;
}
.datelimitlist .datelimitsublist .year {
display: none;
}
/* ▽日付リスト内の該当件数 */
.datelimitlist .num {
font-size: 0.85em; /* 文字サイズ */
color: var(--indigo-soft); /* 文字色 */
margin-left: 0.3em; /* 外側左の余白量 */
}
/* ------------------------ */
/* ▼ハッシュタグリスト区画 */
/* ------------------------ */
.hashtaglistarea {
margin: 0; /* 外側の余白量 */
padding: 0; /* 内側の余白量 */
}
/* ▼見出し */
.hashtaglistarea .cornertitle {
margin: 0; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
/* ▽ハッシュタグリスト */
.hashtaglist {
list-style-type: none; /* リストの先頭記号(なし) */
margin: 0.5em 0; /* 外側の余白量 */
padding: 0.75em; /* 内側の余白量 */
border-radius: 6px; /* 角丸 */
line-height: 1.8; /* 行の高さ */
}
/* ▽ハッシュタグリストの1項目 */
.hashtaglist li {
display: inline-block; /* インラインブロック化(横に並べる) */
background-color: rgba(163, 57, 60, 0.72);
border-radius: 0;
padding: 0.1em 0.75em;
margin: 0 0.2em 0.2em 0;
}
.hashtaglist li a {
color: #fff;
}
/* ▽ハッシュタグリスト内の該当件数 */
.hashtaglist .num {
font-size: 0.9em; /* 文字サイズ */
color: rgba(255,255,255,0.85); /* 文字色 */
margin-left: 0.25em; /* 外側左の余白量 */
}
/* -------------------- */
/* ▼カテゴリツリー区画 */
/* -------------------- */
.categoryarea {
margin: 0 0 1em 0; /* 外側の余白量 */
padding: 0 0 1em 0; /* 内側の余白量 */
}
/* ▼見出し */
.categoryarea .cornertitle {
margin: 0; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
.categoryTree {
}
/* ▽カテゴリツリー */
.categoryTree ul {
padding-left: 26px;
list-style-type: disc;
}
/* ▽カテゴリツリー内の該当件数 */
.categoryTree .num {
display: inline-block;
margin-left: 0.4em;
font-size: 0.9em;
color: #a79c7d;
}
/* ………………………………………………………………………………………… */
/* ▼カテゴリツリー内の各要素（アイコン・カテゴリ名・該当件数・概要等） */
/* ………………………………………………………………………………………… */
/* ▽カテゴリアイコン */
.categoryTree .caticon img {
height: 1.2em; /* アイコンの高さを1.2文字分に制限する */
width: auto; /* アイコンの横幅は自動調整する */
vertical-align: text-top; /* アイコンの上端位置をテキストの上端に合わせる */
}
/* ▽カテゴリ名 */
.categoryTree .cattext {
}
/* 間隔調整：カテゴリアイコンとカテゴリ名が並ぶ際には間隔を空ける */
.categoryTree .caticon + .cattext,
.categoryTree .cattext + .caticon {
margin-left: 3px;
}
/* ▽該当件数 */
.categoryTree .num {
display: inline-block;
margin-left: 0.4em;
font-size: 0.9em;
color: #a79c7d;
}
/* ▽カテゴリ概要文 */
.categoryTree .catdescription {
font-size: smaller;
color: var(--ink-soft);
}
/* ---------------- */
/* ▼複合検索窓区画 */
/* ---------------- */
.complexsearcharea {
margin: 0 0 1em 0; /* 外側の余白量 */
padding: 0 0 1em 0; /* 内側の余白量 */
}
/* ▼見出し */
.complexsearcharea .cornertitle {
margin: 0; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
/* ▽検索フォーム形式の切り替えリンク */
.siwtchsearchbox {
font-size: 0.8em;
}
/* ▽複合検索フォーム */
#complexsearch {
display: none; /* 複合検索窓は、最初は非表示にしておく */
}
/* 検索オプションリスト */
.searchoptions {
font-size: 0.9em;
margin: 0.75em 0 1em 1em;
padding: 0 0 0 0.5em;
}
/* 項目名 */
.solabel {
display: inline-block;
min-width: 5em;
}
/* セレクトボックス */
.searchoptions select {
max-width: 175px;
}
/* -------------------- */
/* ▼新着投稿リスト区画 */
/* -------------------- */
.latestpostarea {
margin: 0 0 1em 0; /* 外側の余白量 */
padding: 0 0 1em 0; /* 内側の余白量 */
}
/* ▼見出し */
.latestpostarea .cornertitle {
margin: 0; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
/* ▽新着投稿グリスト */
.latestpostlist {
margin: 0; /* 外側の余白量 */
padding: 0.6em 0.5em 0.3em 1.4em; /* 内側の余白量 */
line-height: 1.3; /* 行の高さ */
}
/* 各項目 */
.latestpostlist li {
margin: 0.75em 0;
}
/* タイトルリンク以外の項目 */
.latestpostlist span {
display: inline-block;
font-size: 0.8em;
}
.latestpostlist .postdate { color: var(--ink-soft); background:none; padding:0; font-family: var(--font-mono); } /* 投稿日付 */
.latestpostlist .posttime { color: var(--ink-soft); font-family: var(--font-mono); } /* 投稿時刻 */
.latestpostlist .username { color: var(--indigo); font-family: var(--font-body); font-weight: bold; } /* 投稿者名 */
.latestpostlist .userid { color: var(--indigo-soft); } /* 投稿者ID */
.latestpostlist .postid { color: var(--ink-soft); font-family: var(--font-mono); } /* 投稿番号 */
.latestpostlist .length { color: var(--ink-soft); } /* 本文文字数 */
/* -------------------- */
/* ▼画像一覧リスト区画 */
/* -------------------- */
.imagelistarea {
margin: 0 0 1em 0; /* 外側の余白量 */
padding: 0 0 1em 0; /* 内側の余白量 */
}
/* ▼見出し */
.imagelistarea .cornertitle {
margin: 0; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
/* ………………………………………… */
/* ▼新着画像リスト内の各画像の装飾 */
/* ………………………………………… */
.imagelistbox {
margin: 0; /* 外側の余白量 */
text-align: center; /* センタリング */
}
/* ▽画像リストの1項目枠 */
.imagelistitem {
display: inline-block;
width: 30%; /* 横方向に少なくとも3つは並べたい */
max-width: 100px; /* 横幅最大値 */
max-height: 100px; /* 高さ最大値 */
margin: 1%; /* 周囲の余白量 */
vertical-align: middle; /* 枠の下部に余計な空白ができるのを防ぐ */
overflow: hidden; /* 画像がぼかされている場合に、ぼかしが枠からはみ出ないようにする */
border-radius: 6px;
}
/* ▽画像リストの1項目内の画像そのもの */
.imagelistbox .oneimage {
width: 100%;
height: auto; /* 画像の高さは自動調整 */
aspect-ratio: 1/1; /* 画像を正方形にする */
object-fit: cover; /* 縦横比が合わなければトリミング */
vertical-align: middle; /* 画像下部に余計な空白ができるのを防ぐ */
}
/* ▼総数・総サイズの情報 */
.imagesinfo {
margin: 0.25em 0; /* 外側の余白量(上下→左右) */
text-align: right; /* 右寄せ */
color: var(--ink-soft);
}
.totalimgfiles {
font-size: 0.9em; /* 文字サイズ */
}
.totalimgsizes {
font-size: 0.8em; /* 文字サイズ */
}
/* ---------------- */
/* ▼カレンダー区画 */
/* ---------------- */
.calendararea {
margin: 0; /* 外側の余白量 */
padding: 0; /* 内側の余白量 */
}
/* ▼見出し */
.calendararea .cornertitle {
margin: 0; /* 外側の余白量 */
font-weight: bold; /* 太字 */
font-family: var(--font-hand);
color: var(--thread); /* 文字色 */
}
/* ▽カレンダーテーブル */
.calendar {
border-collapse: collapse; /* 枠を結合 */
border: 1px solid var(--rule-strong); /* テーブル外側の枠線 */
border-radius: 6px;
margin: 1em 0; /* 外側の余白 */
}
.calendar th,
.calendar td {
border: 1px solid var(--rule); /* テーブル内側の枠線 */
padding: 3px; /* セル内側の余白 */
text-align: center; /* 中央寄せ */
font-size: 0.9em; /* 文字サイズ */
line-height: 1; /* 行の高さ */
}
/* 年月キャプション */
.calendar caption {
color: var(--indigo); /* 文字色 */
font-family: var(--font-hand);
padding-bottom: 0.3em;
}
/* 曜日行 */
.daysofweek th {
background-color: var(--paper-inset);
font-weight: normal;
padding: 6px 0;
font-size: 0.8em;
line-height: 1;
}
/* 日付数値の装飾（リンクになる場合も、ならない場合も共通） */
.calendar a,
.calendar .nolink {
display: inline-block; /* インラインブロック化 */
border-radius: 50%; /* 角丸 */
padding: 0.4em; /* 内側の余白 */
width: 1.2em; /* 横幅 */
height: 1.1em; /* 高さ */
background-color: transparent;
}
/* 日付数値のリンク（※リンクになる場合だけの装飾） */
.calendar td a {
text-decoration: none; /* 下線を消す */
background-color: var(--paper-inset); /* 背景色 */
color: var(--indigo); /* 文字色 */
}
/* 日付数値のリンクにマウスが載った際 */
.calendar td a:hover {
background-color: var(--indigo); /* 背景色 */
color: white; /* 文字色 */
}
/* 今日の枠（カレンダー内での「今日」のセルだけの装飾） */
.today {
background-color: var(--washi); /* 背景色 */
}
.today a, .today .nolink {
background-color: var(--stamp) !important;
color: white !important;
}
/* -------------- */
/* ▼その他の区画 */
/* -------------- */
.otherarea {
margin: 1em 0 0 0; /* 外側の余白 */
padding: 1em 0 0 0; /* 内側の余白 */
border-top: 1px dashed var(--rule-strong); /* 上端の枠線 */
font-size: 0.9em;
}
/* ＝＝＝＝＝＝＝＝＝ */
/* ※モバイル用の調整 */
/* ＝＝＝＝＝＝＝＝＝ */
@media all and (max-width: 900px) {
.subarea {
margin: 0.5em;
padding: 1em 0.75em;
border-radius: 8px;
}
.columnbox {
display: block;
}
.columnbox > div {
display: block;
width: auto;
}
.columnbox > div:not(:first-child) {
border-left: none;
padding-left: 0;
border-top: 1px dashed var(--rule);
padding-top: 1em;
}
.hashtaglist {
font-size: 0.9em;
}
.hashtaglist .taglink {
word-break: break-all;
}
.otherarea {
font-size: 0.85em;
}
}
/* ============ */
/* ■フッタ領域 */
/* ============ */
footer {
margin: 2em 0 1em 0; /* 外側の余白 */
padding: 1.5em 0 0 0; /* 内側の余白 */
text-align: center; /* 中央寄せ */
font-size: 0.9em;
color: var(--ink-soft);
border-top: 2px dashed var(--rule-strong);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
footer a { color: var(--indigo); }
/* HOMEへ戻るリンク */
.backlink {
margin: 1.2em 0 1.8em 0;
}
/* Powered-by表記のデザイン */
.poweredby {
text-align: center;
margin: 1em;
font-size: 0.8em;
font-family: var(--font-mono);
color: #a79c7d;
}
/* End of file */