/* Skin Name: tool Description: Skin URI: https://yusukegoto.com/ Author: Yusuke Goto Author URI: https://yusukegoto.com/ Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png Version: 1.0.4 Priority: 1 */ /* ========================================================= Webサービス風・ウルトラモダンテック（パープル・エディション） ========================================================= */ /* --- 全体のベース設定 --- */ body { /* Webサービスによくある少し青みがかったクリアなグレー背景 */ background-color: #f3f4f6 !important; /* テック感を出すための微細なドットパターン背景 */ background-image: radial-gradient(#c4b5fd 1px, transparent 1px) !important; background-size: 24px 24px !important; font-family: 'Inter', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; color: #1e293b; } /* --- ヘッダー（Webサービスのナビゲーションバー風） --- */ #header-container { /* 深い紫から青紫への高級感あるグラデーション */ background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important; border-bottom: 3px solid #a855f7 !important; /* 明るい紫のアクセントライン */ box-shadow: 0 4px 25px -5px rgba(124, 58, 237, 0.5) !important; /* 紫色の光彩 */ padding: 10px 0; } /* ロゴテキスト */ .logo-text a.site-name-text-link { color: #ffffff !important; font-weight: 900; letter-spacing: 2px; /* テキスト自体を少し発光させる */ text-shadow: 0 0 15px rgba(167, 139, 250, 0.8); } /* --- メインコンテンツエリア --- */ #content { max-width: 1200px; margin: 50px auto; padding: 0 20px; } /* --- カードリストのグリッド表示 --- */ #list.ect-entry-card { display: grid !important; /* 画面幅に合わせて自動で列数を調整 */ grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 40px; /* カード間の余白を広めに */ } /* --- カードデザイン（Webサービスのウィジェット風） --- */ .entry-card-wrap.a-wrap { background: #ffffff !important; border-radius: 24px !important; /* 大きめの角丸でアプリっぽく */ /* 通常時は透明なボーダーを設定（ホバー時のグラデーション枠の準備） */ border: 2px solid transparent !important; background-clip: padding-box !important; position: relative; overflow: visible !important; /* バッジをはみ出させるため */ /* 浮遊感のある柔らかい影 */ box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08) !important; /* 弾力のあるリッチなアニメーション設定 */ transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; z-index: 1; } /* ▼▼▼ ホバー時の「バリバリ」装飾エフェクト ▼▼▼ */ .entry-card-wrap.a-wrap:hover { /* 上に持ち上げつつ少し拡大 */ transform: translateY(-15px) scale(1.03) !important; /* 強烈な紫とピンクのネオン発光（外側と内側） */ box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.6), 0 0 20px 0px rgba(236, 72, 153, 0.3) inset !important; /* ボーダー色を明るいマゼンタに */ border-color: #d946ef !important; z-index: 10; } /* カードの擬似要素でグラデーションの枠を表現 */ .entry-card-wrap.a-wrap::before { content: ""; position: absolute; inset: -3px; /* 本体より少し大きく */ z-index: -1; /* 紫〜ピンク〜水色のテックなグラデーション */ background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899); border-radius: 26px; opacity: 0; transition: opacity 0.4s ease; } .entry-card-wrap.a-wrap:hover::before { opacity: 1; /* ホバー時にグラデーション枠が出現 */ } /* --- サムネイル画像エリア --- */ .entry-card-thumb { margin: 0 !important; border-radius: 22px 22px 0 0; /* 上だけ角丸 */ overflow: hidden; position: relative; height: 200px; } .entry-card-thumb img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; } /* ホバー時に画像がグワッとズームして少し傾く */ .entry-card-wrap:hover .entry-card-thumb img { transform: scale(1.15) rotate(2deg) !important; } /* カテゴリーラベル（グラデーションバッジ化） */ .cat-label { position: absolute !important; top: -10px; left: 20px; /* 紫からピンクへのグラデーション */ background: linear-gradient(135deg, #8b5cf6, #d946ef) !important; color: #ffffff !important; padding: 6px 16px !important; border-radius: 20px !important; font-size: 0.8rem !important; font-weight: 800; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.5); z-index: 5; } /* --- カード内テキストコンテンツ --- */ .entry-card-content { padding: 28px !important; } /* ホバー時にタイトル文字色もグラデーションにする */ .entry-card-wrap:hover .entry-card-title { background: linear-gradient(to right, #7c3aed, #db2777); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* メタ情報（日付など） */ .entry-card-meta { border-top: 2px dashed #e2e8f0; padding-top: 15px !important; margin-top: auto !important; color: #64748b !important; font-weight: 600; } .admin-pv { display: none !important; } /* --- フッター（Webサービスの終端風） --- */ #footer { /* ヘッダーと対になるダークなグラデーション */ background: linear-gradient(to right, #0f0c29, #302b63, #24243e) !important; color: #e2e8f0 !important; border-top: 4px solid #a855f7 !important; /* 紫のライン */ padding: 60px 0 !important; margin-top: 80px; position: relative; /* フッター上部にも光彩を追加 */ box-shadow: 0 -10px 30px -10px rgba(124, 58, 237, 0.4); } /* ========================================================= 追加：記事一覧ページ上部の「ページタイトル」がPCで消える問題の修正 ※サイドバーを絶対に巻き込まない（#main の中だけに限定） ========================================================= */ /* 1) アーカイブタイトル（カテゴリ/タグ/日付/検索結果などの見出し）を強制表示 */ #main .archive-title, #main h1.archive-title, #main .archive-title a, #main .archive-title span { display: block !important; opacity: 1 !important; visibility: visible !important; /* 透明文字化されてる時の対策（これが本命） */ color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; /* グラデクリップ系が残ってると見えなくなるので解除 */ background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; /* “消す”系の副作用を解除 */ clip: auto !important; clip-path: none !important; filter: none !important; transform: none !important; } /* 2) 見た目（必要ならここだけいじればOK） */ #main .archive-title, #main h1.archive-title { margin: 0 0 20px 0 !important; padding: 0 !important; font-size: 2.0rem !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: 0.01em !important; position: relative !important; z-index: 5 !important; } /* 3) タイトルの親が高さ0やoverflow hiddenで潰すケースだけをピンポイント解除（#main限定） */ #main .archive-header, #main .archive-header-inner, #main .archive-header-content, #main .archive-description { height: auto !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; } /* 4) もし「ホバーしてないのにカード内タイトルが透明」になる環境がある場合の保険（#main内だけ） */ #main #list .entry-card-title, #main #list .entry-card-title a, #main #list .entry-card-title span { color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; opacity: 1 !important; visibility: visible !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; }