@charset "UTF-8"; /*! Theme Name: AdBridge Description: PPCアフィリエイト向けのテーマです。【重要】このテーマは「Cocoon」の子テーマです。先にCocoon（親テーマ）をインストールしてから有効化してください。Cocoonは https://wp-cocoon.com/downloads/ から無料で入手できます。 Author: AdBridge Template: cocoon-master Version: 1.9.8 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: adbridge */ /* * このテーマは WordPress テーマ「Cocoon」（作者: わいひら / https://nelog.jp/）の * 子テーマです。Cocoon は 100% GPL のもとで配布されています。 * 本テーマも GPL v2 or later のもとで配布されます。 */ /************************************ ** カスタマイズについて ** --------------------------------- ** このファイルは自動アップデートで上書きされます。 ** 独自のCSSは「外観 → カスタマイズ → 追加CSS」に記述してください。 ** （データベースに保存されるため、更新の影響を受けません） ************************************/ /************************************ ** レスポンシブデザイン用のメディアクエリ ************************************/ /*1023px以下*/ @media screen and (max-width: 1023px){ /*必要ならばここにコードを書く*/ } /*834px以下*/ @media screen and (max-width: 834px){ /*必要ならばここにコードを書く*/ } /*480px以下*/ @media screen and (max-width: 480px){ /*必要ならばここにコードを書く*/ } /************************************ * 見た目のパターン ************************************ * ★ なぜ全パターンを静的に書いてあるのか * 選んだ色をその場で に書き出す方法もあるが、それをやると * サイト表示のたびに出力が増える。訪問者に届くものは増やさない方針なので、 * 全パターンをここに置き、body に短いクラスを足すだけにしてある。 * * ★ クラス名に意味を持たせていないのは意図的 * adbridge-skin-blue のような名前だと、どのサイトも同じ仕組みから * 出ていることをソースで説明してしまう。 * * ★ 色は「対」で決めてある * 乱数で色を作ると、いつか必ず下品な組み合わせが出る。 * * ★★ セレクタは Cocoon の実際のHTMLに合わせること * サイドバーの見出しは h3 ではなく h2.wp-block-heading。 * 思い込みで書くと、1つも当たらないまま「入れたつもり」になる。 ************************************/ .s1, .s2, .s3 { } /* サイト名の型（下で使う） */ /* --- 配色（6組） ------------------------------------- */ .c1 { --k:#173a63; --a:#3aa6d6; --al:#e8f4fa; } /* 濃紺 × 水色 */ .c2 { --k:#0e5245; --a:#2eb8a6; --al:#e6f6f4; } /* 深緑 × ターコイズ */ .c3 { --k:#2b2f3a; --a:#60a5fa; --al:#eaf2fe; } /* 墨 × 明るい青 */ .c4 { --k:#3a2a63; --a:#7c8cf8; --al:#eeeffe; } /* インディゴ × 藤 */ .c5 { --k:#1f4a63; --a:#5b93b8; --al:#eaf1f6; } /* スチール × くすみ青 */ .c6 { --k:#0a3f42; --a:#4bb3c4; --al:#e7f5f7; } /* 深いティール × 浅葱 */ :is(.c1,.c2,.c3,.c4,.c5,.c6) { --ln:#e6ecf1; --bg:#f2f3f5; --sf:#ffffff; --tx:#333333; --tx2:#6b7280; } /************************************ * 文字組み ************************************ * ★ 日本語のサイトが素人っぽく見える最大の原因は、たいてい文字組み。 * palt は端末に入っているフォントの機能なので、 * 外からフォントを読み込む必要がない。速度も足跡も増えない。 ************************************/ :is(.c1,.c2,.c3,.c4,.c5,.c6) { font-feature-settings: "palt"; line-break: strict; } :is(.c1,.c2,.c3,.c4,.c5,.c6) :is(h1,h2,h3,.entry-card-title,.entry-title) { text-wrap: balance; letter-spacing: .01em; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-content p { line-height: 1.9; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-content > p:first-of-type { font-size: 1.05em; } /************************************ * サイト名の見せ方（3種） ************************************ * ★ サイトを開いて最初に目が行く場所。 * ここが同じだと、色を変えても「同じサイト」に見えてしまう。 ************************************/ :is(.c1,.c2,.c3,.c4,.c5,.c6) .site-name-text { color: var(--k); } /* s1: 中央。下に短いグラデーションの線 */ .s1 .logo-header { text-align: center; } .s1 .site-name-text { font-weight: 600; letter-spacing: .06em; } .s1 .site-name-text::after { content: ""; display: block; width: 46px; height: 3px; margin: 12px auto 0; border-radius: 2px; background: linear-gradient(90deg, var(--a), var(--k)); } /* s2: 左寄せ。左に太い縦線を立てる */ .s2 .logo-header { text-align: left; } .s2 .site-name-text { display: inline-block; padding-left: 16px; position: relative; font-weight: 700; letter-spacing: .02em; } .s2 .site-name-text::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 1.15em; margin-top: -.575em; border-radius: 3px; background: linear-gradient(180deg, var(--a), var(--k)); } /* s3: 中央。字間を大きく開けて、上下に細い罫線 * ★★ 罫線に --ln（枠線の色）を使ってはいけない。 * --ln は「地の色に近い、目立たせない線」なので、 * 暗い設定のときは背景に沈んで、何も無いのと同じになる。 * 見せるための線には、差し色を使う。 */ .s3 .logo-header { text-align: center; } .s3 .site-name-text { display: inline-block; padding: 9px 6px; border-top: 1px solid var(--a); border-bottom: 1px solid var(--a); font-weight: 400; letter-spacing: .24em; text-indent: .24em; /* 字間ぶん右にずれるのを戻す */ } /************************************ * 記事一覧 ************************************/ :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-title { color: var(--k); transition: color .18s ease; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap:hover .entry-card-title { color: var(--a); } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card { border-radius: 6px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap:hover .entry-card { transform: translateY(-2px); background: var(--al); box-shadow: 0 6px 18px rgba(0,0,0,.08); } /* ★ 画像の縦横比をそろえる。 * 高さがバラつくと散らかるうえ、読み込み中にガタつく。 * このガタつき（CLS）は表示速度の評価にも響く。 */ :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-thumb { overflow: hidden; border-radius: 5px; position: relative; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-thumb img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; transition: filter .18s ease, transform .35s ease; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap:hover .entry-card-thumb img { filter: saturate(1.08); } :is(.c1,.c2,.c3,.c4,.c5,.c6) .eye-catch img { aspect-ratio: 16 / 9; object-fit: cover; } /************************************ * サイドバー ************************************ * ★★ 見出しは h2.wp-block-heading。h3 ではない。 * 古いウィジェットは h3 や .widget-title を使うので、両方に当てる。 ************************************/ :is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar :is(.wp-block-heading, .widget-title, h3) { background: none !important; color: var(--k); padding: 0 0 9px; margin: 0 0 10px; border: none; border-bottom: 2px solid var(--ln); position: relative; font-size: 15px; letter-spacing: .04em; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar :is(.wp-block-heading, .widget-title, h3)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 38px; height: 2px; background: var(--a); } :is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar li { transition: color .16s ease; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar li a { transition: color .16s ease; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .sidebar li a:hover { color: var(--a); } /************************************ * 目次 ************************************/ :is(.c1,.c2,.c3,.c4,.c5,.c6) .toc { border: 1px solid var(--ln); border-left: 3px solid var(--a); border-radius: 0 6px 6px 0; background: var(--sf); padding: 16px 20px; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-title { color: var(--k); font-size: 15px; letter-spacing: .04em; border: none; padding-bottom: 8px; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list > li { margin-bottom: 6px; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list a { color: var(--tx); text-decoration: none; transition: color .16s ease; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list a:hover { color: var(--a); text-decoration: underline; text-underline-offset: 3px; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .toc-list > li::marker { color: var(--a); font-weight: 700; } /************************************ * カテゴリラベルの形（3種） ************************************/ .b1 .cat-label { top: 14px; left: -34px; padding: 4px 40px; border-radius: 0; background: var(--a); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.18); } .b2 .cat-label { top: 10px; left: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--k); font-size: 11px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 1px 4px rgba(0,0,0,.16); } .b3 .cat-label { top: 12px; left: 0; padding: 4px 14px 4px 10px; border-radius: 0 3px 3px 0; background: var(--k); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; border-left: 3px solid var(--a); } /************************************ * 一覧の並べ方（3種） ************************************ * ★ 色だけでなく、形でも差が出るようにする。 * 並べて見たときに「同じサイト」に見えないことが目的。 ************************************/ /* l1: 横並び。左端に細い差し色の線を走らせる */ .l1 .entry-card { border-left: 3px solid transparent; padding-left: 10px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease; } .l1 .entry-card-wrap:hover .entry-card { border-left-color: var(--a); } /* l2: 余白を広く、区切り線をなくす。画像も大きめ */ .l2 .entry-card { border-bottom: none; padding: 24px 10px; margin-bottom: 8px; } .l2 .entry-card-title { font-size: 1.1em; } .l2 .entry-card-thumb { flex-basis: 44%; } .l2 .entry-card-snippet { opacity: .85; } /* l3: 枠で囲ってカードらしく。ホバーで枠が差し色に */ .l3 .entry-card { border: 1px solid var(--ln); border-radius: 8px; padding: 16px; margin-bottom: 14px; background: var(--sf); } .l3 .entry-card-wrap:hover .entry-card { border-color: var(--a); transform: translateY(-3px); } /************************************ * ページの切り替え ************************************ * ★ JavaScript は使っていない。 * 対応していないブラウザでは、いままでどおり切り替わるだけ。 ************************************/ @view-transition { navigation: auto; } /************************************ * スクロールに合わせて出す ************************************ * ★ これも JavaScript を使わない書き方。 * ★★ 透明度は 0 から始めない。 * 完全に消えた状態から始めると、万一動かなかったときに読めなくなる。 * ★ 端末側で「動きを減らす」設定にしている人には出さない。 ************************************/ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-card-wrap { animation: ab-in linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; } @keyframes ab-in { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: none; } } } } /************************************ * 細部 ************************************/ :is(.c1,.c2,.c3,.c4,.c5,.c6) ::selection { background: var(--a); color: #fff; } :is(.c1,.c2,.c3,.c4,.c5,.c6) :focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 2px; } :is(.c1,.c2,.c3,.c4,.c5,.c6) { scrollbar-color: var(--a) var(--bg); scrollbar-width: thin; } :is(.c1,.c2,.c3,.c4,.c5,.c6) .entry-content a:not([class]) { color: var(--a); text-underline-offset: 3px; text-decoration-thickness: 1px; } /************************************ * 端末が暗い設定のとき ************************************ * ★★ 個別のセレクタを潰していく方法は、必ず取りこぼす。 * * 前回それをやって、サイドバーが白いまま残った。 * 原因は、親テーマ（Cocoon）が * .header-container, .main, .sidebar, .footer { * background: var(--cocoon-white-color); * } * のように「色変数」で塗っていたこと。 * こちらが .sidebar を狙い撃ちしても、他の箱が同じ変数で白いままになる。 * * なので、狙うのは箱ではなく変数のほう。 * 親テーマの色の定義そのものを暗い側に置き換えれば、 * その変数を使っている 170 か所あまりが、まとめて追従する。 * 親テーマが将来どこかに白い箱を足しても、同じ変数を使う限り追従する。 ************************************/ @media (prefers-color-scheme: dark) { /* ★ .nd が付いているときは、暗い版を当てない。 * 端末を暗い設定にしたまま、明るい見た目で使いたい人のため。 * （設定でいつでも切り替えられる） */ :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) { color-scheme: dark; /* --- 親テーマの色を、暗い側に置き換える --- */ --cocoon-text-color: #dfe3e8; --cocoon-black-color: #dfe3e8; --cocoon-grey-color: #9aa3ad; /* --- こちらの色 --- */ --tx:#dfe3e8; --tx2:#9aa3ad; } /* ★★ 暗い版でも、地の色を色ごとに変える。 * ここを共通の1色にしてしまうと、差し色しか変わらず、 * 6種類が並んでもほぼ同じに見える。 * 端末を暗い設定にしている人にとっては、それが「いつもの見た目」なので、 * 散らすための仕組みが、そこだけ働かないことになる。 * * --cocoon-white-color は親テーマが面に使っている変数。 * これを色ごとに変えることで、ヘッダーもサイドバーもまとめて追従する。 */ .c1:not(.nd) { --k:#cfe3f2; --a:#5fbde6; --al:#1d2c38; --bg:#0b172a; --sf:#122340; --ln:#1f3d70; --cocoon-white-color:#122340; --cocoon-thin-color:#1f3d70; --cocoon-xx-thin-color:#172d53; --cocoon-xxx-thin-color:#142849; --cocoon-basic-border-color:#1f3d70; --cocoon-custom-border-color:#1f3d70; --cocoon-current-background-color:#172d53; --cocoon-tab-label-color:#172d53; } .c2:not(.nd) { --k:#cdeae5; --a:#45cbb9; --al:#14302c; --bg:#061710; --sf:#0a2419; --ln:#113f2b; --cocoon-white-color:#0a2419; --cocoon-thin-color:#113f2b; --cocoon-xx-thin-color:#0d2e20; --cocoon-xxx-thin-color:#0b291c; --cocoon-basic-border-color:#113f2b; --cocoon-custom-border-color:#113f2b; --cocoon-current-background-color:#0d2e20; --cocoon-tab-label-color:#0d2e20; } .c3:not(.nd) { --k:#dbe6f5; --a:#7db4fb; --al:#1b2536; --bg:#17191d; --sf:#24262c; --ln:#3f424d; --cocoon-white-color:#24262c; --cocoon-thin-color:#3f424d; --cocoon-xx-thin-color:#2e3139; --cocoon-xxx-thin-color:#292b32; --cocoon-basic-border-color:#3f424d; --cocoon-custom-border-color:#3f424d; --cocoon-current-background-color:#2e3139; --cocoon-tab-label-color:#2e3139; } .c4:not(.nd) { --k:#dcdcf6; --a:#98a4fa; --al:#23213c; --bg:#170f24; --sf:#241738; --ln:#3f2862; --cocoon-white-color:#241738; --cocoon-thin-color:#3f2862; --cocoon-xx-thin-color:#2e1d48; --cocoon-xxx-thin-color:#291a40; --cocoon-basic-border-color:#3f2862; --cocoon-custom-border-color:#3f2862; --cocoon-current-background-color:#2e1d48; --cocoon-tab-label-color:#2e1d48; } .c5:not(.nd) { --k:#d5e2ec; --a:#78a9c9; --al:#1a2732; --bg:#0e1f27; --sf:#16303c; --ln:#265469; --cocoon-white-color:#16303c; --cocoon-thin-color:#265469; --cocoon-xx-thin-color:#1c3e4e; --cocoon-xxx-thin-color:#193745; --cocoon-basic-border-color:#265469; --cocoon-custom-border-color:#265469; --cocoon-current-background-color:#1c3e4e; --cocoon-tab-label-color:#1c3e4e; } .c6:not(.nd) { --k:#cdeaee; --a:#63c6d5; --al:#123033; --bg:#02191e; --sf:#04262e; --ln:#074250; --cocoon-white-color:#04262e; --cocoon-thin-color:#074250; --cocoon-xx-thin-color:#05313b; --cocoon-xxx-thin-color:#042b34; --cocoon-basic-border-color:#074250; --cocoon-custom-border-color:#074250; --cocoon-current-background-color:#05313b; --cocoon-tab-label-color:#05313b; } /* 地の色（変数を使っていない箱） */ body:is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) { background: var(--bg); color: var(--tx); } /* 薄い文字 */ :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is( .entry-card-snippet, .entry-card-meta, .post-date, .entry-date, .copyright ) { color: var(--tx2); } :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(.sidebar a, .navi a, .footer a) { color: var(--tx); } :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(.sidebar a:hover, .navi a:hover, .footer a:hover) { color: var(--a); } /* 入力欄 */ :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(input, textarea, select) { background: var(--bg); color: var(--tx); border: 1px solid var(--ln); } /* 変数を使わず、直接白を塗っている箱（親テーマ側の書き方が古い部分） */ :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) :is(.go-to-top-button, .menu-content) { background: var(--sf); color: var(--tx); } /* カード */ :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) .entry-card { background: transparent; } :is(.c1,.c2,.c3,.c4,.c5,.c6):not(.nd) .entry-card-wrap:hover .entry-card { background: var(--al); box-shadow: 0 6px 18px rgba(0,0,0,.35); } .l3:not(.nd) .entry-card { background: var(--bg); } .b2:not(.nd) .cat-label { background: rgba(27,32,39,.92); color: var(--k); } }