/* =========================================================== * inaka-skin.css — 田舎暮らし感スキンレイヤー * --------------------------------------------------------- * 既存Cocoonテーマのクラス・HTML構造は触らない。 * 本ファイルを に1行で読み込むだけで世界観が変わる。 * 戻したい日が来れば、その1行を消すだけで元に戻る。 * * Design Tokens（型・カタが定めた基準） * ベース : 和紙色 #f5ebd9 * カード : 明るい和紙 #fbf5e8 * 見出し文字 : 墨 #1f1a14 * 本文 : 濃いセピア #3a2e1f * リンク : 漁師町の海 #2c4a5e * アクセント : 夕日オレンジ #d97b48 * サブ : 苔緑 #6b7d4f * 罫線 : 薄いセピア #c9b896 * * 2026-05-21 / 型（カタ）設計、棟（ムネ）実装 * =========================================================== */ :root { --inaka-bg-base: #f5ebd9; --inaka-bg-card: #fbf5e8; --inaka-text-heading: #1f1a14; --inaka-text-body: #3a2e1f; --inaka-link: #2c4a5e; --inaka-accent: #d97b48; --inaka-sub: #6b7d4f; --inaka-rule: #c9b896; --inaka-shadow: rgba(58, 46, 31, 0.08); --inaka-shadow-strong: rgba(58, 46, 31, 0.15); --inaka-serif: "Noto Serif JP", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif; } /* ============ 全体背景：和紙のような温かい質感 ============ */ body { background-color: var(--inaka-bg-base) !important; background-image: radial-gradient(circle at 20% 30%, rgba(255, 250, 235, 0.55) 0%, transparent 55%), radial-gradient(circle at 80% 70%, rgba(217, 200, 165, 0.30) 0%, transparent 55%); color: var(--inaka-text-body) !important; } /* ============ ヘッダー ============ */ .header, .header-container, .header-in, #header { background-color: var(--inaka-bg-base) !important; border-bottom: 1px solid var(--inaka-rule) !important; box-shadow: none !important; } .site-name-text, .site-name a, .site-name-text-link { font-family: var(--inaka-serif) !important; color: var(--inaka-text-heading) !important; letter-spacing: 0.05em; font-weight: 600; } .tagline, .site-description { color: var(--inaka-text-body) !important; font-family: var(--inaka-serif) !important; font-style: italic; } /* ============ ナビ ============ */ .navi, .navi-in, #navi { background-color: var(--inaka-bg-base) !important; border-top: 1px solid var(--inaka-rule); border-bottom: 1px solid var(--inaka-rule); } .navi-in a, .navi a { color: var(--inaka-text-heading) !important; font-weight: 500; letter-spacing: 0.04em; } .navi-in a:hover, .navi a:hover { color: var(--inaka-accent) !important; background-color: rgba(217, 123, 72, 0.08) !important; } /* ============ メイン領域 ============ */ .main, .content, .wrap { background-color: transparent !important; } /* ============ 記事カード（entry-card）============ */ .entry-card-wrap, .entry-card, .e-card { background-color: var(--inaka-bg-card) !important; border: 1px solid var(--inaka-rule) !important; border-radius: 12px !important; box-shadow: 0 2px 8px var(--inaka-shadow) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; overflow: hidden; } .entry-card-wrap:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--inaka-shadow-strong) !important; } .entry-card-title, .card-title, .e-card-title { font-family: var(--inaka-serif) !important; color: var(--inaka-text-heading) !important; letter-spacing: 0.03em; font-weight: 600; line-height: 1.5; } .entry-card-snippet, .card-snippet { color: var(--inaka-text-body) !important; line-height: 1.7; } .entry-card-meta, .card-meta, .entry-card-info { color: var(--inaka-sub) !important; } /* カテゴリラベル：苔緑 */ .cat-label, .cat-link { background-color: var(--inaka-sub) !important; color: #fbf5e8 !important; border-radius: 4px !important; font-weight: 500; letter-spacing: 0.03em; } /* ============ 記事本体 ============ */ .article, .article-wrap, .entry-content { background-color: var(--inaka-bg-card); color: var(--inaka-text-body) !important; } .entry-title, h1.entry-title { font-family: var(--inaka-serif) !important; color: var(--inaka-text-heading) !important; letter-spacing: 0.04em; line-height: 1.5; font-weight: 700; } .entry-content > * { color: var(--inaka-text-body); } /* H2 見出し：和紙地に藍の縦罫＋薄いセピア横罫 */ .entry-content h2, .entry-content h2.wp-block-heading { font-family: var(--inaka-serif) !important; color: var(--inaka-text-heading) !important; border: none !important; border-left: 5px solid var(--inaka-link) !important; border-bottom: 1px solid var(--inaka-rule) !important; padding: 0.4em 0.7em !important; background-color: rgba(232, 216, 189, 0.35) !important; letter-spacing: 0.04em; font-weight: 700; margin-top: 2em !important; } /* H3 見出し：夕日オレンジの縦罫 */ .entry-content h3, .entry-content h3.wp-block-heading { font-family: var(--inaka-serif) !important; color: var(--inaka-text-heading) !important; border: none !important; border-left: 3px solid var(--inaka-accent) !important; padding: 0.2em 0.6em !important; letter-spacing: 0.03em; font-weight: 600; margin-top: 1.6em !important; } /* 段落 */ .entry-content p { line-height: 1.9; color: var(--inaka-text-body) !important; } /* リンク：海色＋薄罫線下線 */ .entry-content a, .article a { color: var(--inaka-link) !important; text-decoration: underline; text-decoration-color: var(--inaka-rule); text-underline-offset: 2px; } .entry-content a:hover, .article a:hover { color: var(--inaka-accent) !important; text-decoration-color: var(--inaka-accent); } /* 強調 */ .entry-content strong, .article strong { color: var(--inaka-text-heading) !important; font-weight: 700; } /* リスト */ .entry-content ul, .entry-content ol { color: var(--inaka-text-body); } .entry-content li { line-height: 1.85; } /* ============ サイドバー ============ */ .sidebar, .widget-sidebar { background-color: var(--inaka-bg-card) !important; border-radius: 12px !important; border: 1px solid var(--inaka-rule) !important; padding: 1.2em !important; box-shadow: 0 2px 8px var(--inaka-shadow); } .widget-sidebar-title, .widget-title { font-family: var(--inaka-serif) !important; color: var(--inaka-text-heading) !important; border: none !important; border-bottom: 1px solid var(--inaka-rule) !important; padding: 0 0 0.4em 0 !important; letter-spacing: 0.05em; font-weight: 600; } .sidebar a, .widget-sidebar a { color: var(--inaka-link) !important; } .sidebar a:hover { color: var(--inaka-accent) !important; } /* ============ フッター：墨 ============ */ .footer, #footer { background-color: var(--inaka-text-heading) !important; color: var(--inaka-bg-base) !important; border-top: 3px solid var(--inaka-accent) !important; } .footer a, #footer a { color: var(--inaka-bg-base) !important; } .footer a:hover { color: var(--inaka-accent) !important; } /* ============ 吹き出し（Cocoon speech-wrap）============ */ .speech-balloon { background-color: var(--inaka-bg-card) !important; border: 1px solid var(--inaka-rule) !important; border-radius: 12px !important; box-shadow: 0 1px 4px var(--inaka-shadow) !important; color: var(--inaka-text-body) !important; } .speech-name { color: var(--inaka-sub) !important; font-family: var(--inaka-serif); letter-spacing: 0.04em; } /* ============ information-box（この記事でわかること）============ */ .information-box { background-color: rgba(217, 123, 72, 0.08) !important; border: 1px solid var(--inaka-rule) !important; border-left: 4px solid var(--inaka-accent) !important; border-radius: 8px !important; padding: 1em 1.2em !important; color: var(--inaka-text-body) !important; } .information-box strong { color: var(--inaka-accent) !important; } /* ============ テーブル ============ */ .wp-block-table table { border-collapse: collapse; border: 1px solid var(--inaka-rule); background-color: var(--inaka-bg-card); } .wp-block-table th { background-color: var(--inaka-text-heading) !important; color: var(--inaka-bg-base) !important; font-family: var(--inaka-serif) !important; letter-spacing: 0.03em; border: 1px solid var(--inaka-rule) !important; } .wp-block-table td { border: 1px solid var(--inaka-rule) !important; color: var(--inaka-text-body); } .wp-block-table tr:nth-child(even) td { background-color: rgba(217, 200, 165, 0.15); } /* ============ 目次（toc）============ */ #toc { background-color: rgba(44, 74, 94, 0.05) !important; border: 1px solid var(--inaka-rule) !important; border-radius: 8px !important; padding: 0.8em 1em !important; } .toc-title { font-family: var(--inaka-serif) !important; color: var(--inaka-text-heading) !important; letter-spacing: 0.05em; font-weight: 600; } .toc a { color: var(--inaka-link) !important; } .toc a:hover { color: var(--inaka-accent) !important; } /* ============ パンくず ============ */ .breadcrumb, .breadcrumb-area, #breadcrumb { background-color: transparent !important; color: var(--inaka-sub) !important; font-family: var(--inaka-serif); } .breadcrumb a { color: var(--inaka-link) !important; } /* ============ ボタン（汎用） ============ */ .button, .btn, button { background-color: var(--inaka-accent) !important; color: #fbf5e8 !important; border-radius: 8px; border: none; font-weight: 600; letter-spacing: 0.04em; } .button:hover, .btn:hover { background-color: var(--inaka-text-heading) !important; } /* ============ ページネーション ============ */ .pagination a { color: var(--inaka-link) !important; border: 1px solid var(--inaka-rule); border-radius: 6px; } /* ============ ホバー時の選択色 ============ */ ::selection { background-color: var(--inaka-accent); color: var(--inaka-bg-base); } /* ============ レスポンシブ微調整 ============ */ @media (max-width: 768px) { .entry-content h2, .entry-content h2.wp-block-heading { font-size: 1.3em; padding: 0.3em 0.5em !important; } .entry-card-wrap { border-radius: 8px !important; } } /* ============================================================ * 追補（2026-05-21）: Cocoon キーカラー（ピンク）残存の上書き * 対象：記事タイトルバー・目次タイトル・ウィジェット見出しリボン * ============================================================ */ /* Cocoonのキー色CSS変数を上書き（存在すれば差し替え） */ :root { --color-key: #1f1a14 !important; --color-key-dark: #1f1a14 !important; --cocoon-key-color: #1f1a14 !important; --skin-color: #f5ebd9 !important; } /* 記事タイトルバー（.entry-header / .article-header） */ .entry-header, .entry-header-card-link, .article-header, .article header.entry-header { background-color: var(--inaka-bg-card) !important; background: var(--inaka-bg-card) !important; border: 1px solid var(--inaka-rule) !important; border-left: 5px solid var(--inaka-link) !important; border-radius: 8px !important; padding: 1em 1.2em !important; } .entry-header .entry-title, .article-header .entry-title, h1.entry-title { background: transparent !important; color: var(--inaka-text-heading) !important; } /* 目次タイトルバー（.toc-title） */ .toc-title { background-color: rgba(44, 74, 94, 0.10) !important; background: rgba(44, 74, 94, 0.10) !important; color: var(--inaka-text-heading) !important; border-radius: 6px !important; padding: 0.5em 0.8em !important; } /* ウィジェット見出し（リボン形のピンクを廃止し、シンプルな下線見出しに） */ .widget-sidebar-title, .widget-title, .sidebar .widget h3 { background: transparent !important; background-color: transparent !important; color: var(--inaka-text-heading) !important; border: none !important; border-bottom: 2px solid var(--inaka-rule) !important; padding: 0 0 0.4em 0 !important; margin: 0 0 0.8em 0 !important; position: relative; } /* リボン特有の擬似要素（三角・斜め部）を消す */ .widget-sidebar-title::before, .widget-sidebar-title::after, .widget-title::before, .widget-title::after { display: none !important; content: none !important; background: transparent !important; } /* 投稿日・更新日アイコンの色 */ .post-date, .post-update, .date-tags { color: var(--inaka-sub) !important; } /* 検索ボックス */ .search-edit, input[type="search"] { background-color: var(--inaka-bg-base) !important; border: 1px solid var(--inaka-rule) !important; color: var(--inaka-text-body) !important; } .search-submit { background-color: var(--inaka-accent) !important; color: var(--inaka-bg-base) !important; border-radius: 4px; }