/* 全てのリンクにマウスオーバー効果を追加 */ a { color: #ff9900; /* 初期の文字色 */ text-decoration: none; /* 下線をなくす */ } a:hover { color: #ff6600; /* マウスを載せたときの文字色 */ }
.blog-card { border: 2px solid #ffd9ec; border-radius: 15px; padding: 15px; margin: 20px 0; background-color: #fff0f8; box-shadow: 2px 2px 8px rgba(255, 192, 203, 0.2); transition: 0.3s ease; } .blog-card:hover { box-shadow: 4px 4px 12px rgba(255, 105, 180, 0.4); transform: translateY(-2px); } .blog-card a { color: #cc3366; text-decoration: none; display: block; } .blog-card h3 { font-size: 1.1em; margin-bottom: 8px; } .blog-card p { font-size: 0.9em; color: #555; }
/* 注目記事：ふんわり可愛いピンクボックス */ .hatena-module-entryunit { background-color: #fff7fa; /* ふんわりピンク背景 */ border: 1.5px solid #f3c1d8; /* やさしいピンクの縁 */ border-radius: 12px; padding: 12px; margin-bottom: 14px; box-shadow: 0 3px 6px rgba(243, 193, 216, 0.2); /* ふんわり影 */ font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; transition: all 0.3s ease; } /* 記事リンクの文字色を優しいピンクに */ .hatena-module-entryunit a { color: #c06c8d; /* 落ち着いたローズピンク */ text-decoration: none; font-weight: bold; display: block; padding: 5px 0; border-bottom: 1px dashed #f3c1d8; /* 下線を点線でやわらかく */ } .hatena-module-entryunit a:hover { color: #e889aa; /* 明るいピンクに変化 */ text-decoration: underline; } /* 「注目記事」見出しタイトル */ .hatena-module-title { background: #f3c1d8; color: #de3c8f; padding: 8px 14px; border-radius: 14px; font-size: 16px; text-align: center; margin-bottom: 14px; letter-spacing: 0.5px; font-weight: bold; }
/* --- カードリンク共通設定 --- */ div[id^="msmaflink-"] { margin: 30px auto; padding: 20px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); background: #fffdf9; max-width: 600px; } /* --- Amazon・楽天ボタンのデザイン統一 --- */ div[id^="msmaflink-"] a { border-radius: 30px !important; font-weight: bold; padding: 10px 15px !important; transition: all 0.3s ease; } /* --- ボタンホバーで少し大きく --- */ div[id^="msmaflink-"] a:hover { transform: scale(1.05); opacity: 0.9; } /* --- 商品名のフォント変更（やさしい雰囲気に） --- */ div[id^="msmaflink-"] .m_link_title { font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", sans-serif; font-size: 18px; font-weight: bold; color: #444; margin-bottom: 10px; } /* --- ボタン全体の配置をセンターに --- */ div[id^="msmaflink-"] .m_link_button { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } /* --- アイキャッチ画像を丸角に --- */ .hatena-fotolife img { border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); } /* サイドバー記事一覧の基本スタイル */ .sidebar-article-list ul { list-style: none; padding: 0; } .sidebar-article-list li { margin: 8px 0; } /* 通常リンクのデザイン */ .sidebar-article-list li a { text-decoration: none; color: #555; font-weight: normal; } /* 「今ココ」になったリンクだけ特別にデザイン */ .sidebar-article-list li a.now-here { background-color: #ffeaea; /* 背景ピンク */ padding: 4px 8px; border-radius: 8px; color: #d14c4c; /* 文字色ピンク */ font-weight: bold; } .sidebar-article-list li a:hover { background-color: transparent; /* 背景はそのまま透明！ */ color: #c06c8d; /* 文字の色だけ変わる（ふわっとピンク系） */ } /* ▼黒板ボタンのホバー時にふわっと明るく＆ベージュピンクオレンジっぽくする */ .blackboard-button:hover { filter: brightness(1.1) sepia(0.2) hue-rotate(-10deg) saturate(1.2); transform: scale(1.03); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影をめちゃ薄く */ } /* すべてのリンクの基本スタイル */ a { color: #5c4033; /* こげちゃ色ベースで読みやすく */ text-decoration: none; transition: all 0.3s ease; } /* リンクにマウスホバーしたとき */ a:hover { color: #cc6699; /* 花染めピンク */ text-shadow: 1px 1px 2px #fce4ec; transform: translateY(-2px); /* 少し浮かせる */ } /* 記事タイトルの個別調整（記事ページ） */ .entry-title { font-family: 'Kiwi Maru', serif; font-size: 1.9em; font-weight: 600; color: #cc6699; text-shadow: 1px 1px 2px #fce4ec; } /* トップページのタイトル一覧 */ .entry-title-link { font-family: 'Kiwi Maru', serif; font-weight: 600; color: #5c4033; } .entry-title-link:hover { color: #cc6699; text-shadow: 1px 1px 2px #fce4ec; transform: translateY(-2px); } /* サイドバー項目もホバーでふんわり */ #box2 a:hover, .sidebar a:hover { color: #cc6699; text-shadow: 1px 1px 2px #fce4ec; transform: translateY(-2px); } /* 記事本文のやさしいフォントに変更 */ .entry-content { font-family: 'Zen Maru Gothic', 'Kiwi Maru', sans-serif; font-size: 1.05em; line-height: 1.9; color: #3b3b3b; } .slide-heart-box { overflow: hidden; margin-bottom: 16px; padding: 8px 12px; border-left: 3px solid #ffb6c1; background-color: #fff0f5; border-radius: 10px; display: flex; align-items: center; } .heart-icon { display: inline-block; animation: swing 0.6s infinite alternate ease-in-out; color: #ff69b4; font-size: 16px; margin-right: 6px; } .slide-heart-text { animation: slideInHeart 3s ease-out forwards; font-size: 13px; color: #c71585; opacity: 0; } @keyframes swing { 0% { transform: rotate(0deg); } 50% { transform: rotate(12deg); } 100% { transform: rotate(-12deg); } } @keyframes slideInHeart { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRightSlow { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } .thank-you-text { opacity: 0; transform: translateX(60px); transition: all 1s ease-out; } .thank-you-text.visible { animation: slideInRightSlow 5s ease-out forwards; } .link-card { display: flex; align-items: center; gap: 15px; padding: 15px; border: 2px solid #ffe4e1; /* うっすらピンクの枠線 */ border-radius: 12px; background-color: #fffaf7; /* ほんのりオレンジ背景 */ margin: 20px 0; box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1); /* ふんわり影 */ } .link-card a img { width: 160px; height: auto; border-radius: 8px; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); animation: pendulum 2.5s ease-in-out infinite; /* 振り子アニメ */ transform-origin: center top; } @keyframes pendulum { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .link-card-text { font-size: 16px; color: #333; } .link-card-text a { color: #ff7f50; /* コーラルオレンジ */ text-decoration: none; font-weight: bold; } .link-card-text a:hover { text-decoration: underline; } .link-card { display: flex; align-items: center; gap: 15px; padding: 15px; border: 2px solid #ffe4e1; /* うっすらピンクの枠線 */ border-radius: 12px; background-color: #fffaf7; /* ほんのりオレンジ背景 */ margin: 20px 0; box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1); /* ふんわり影 */ } .link-card a img { width: 130px; height: auto; border-radius: 8px; box-shadow: 2px 2px 8px rgba(0,0,0,0.2); animation: pendulum 2.5s ease-in-out infinite; transform-origin: center top; } @keyframes pendulum { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .link-card-text { font-size: 16px; color: #333; } .link-card-text a { color: #ff7f50; text-decoration: none; font-weight: bold; } .link-card-text a:hover { text-decoration: underline; } .cheer-bounce { display: inline-block; color: #d65d8b; font-weight: bold; animation: bounce 1.6s ease-in-out infinite; } /* ファイト〜！のぴょんぴょん */ @keyframes bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* ハートふわふわ */ .heart { position: absolute; color: #f4a4b5; font-size: 18px; animation: floatUp 4s ease-in infinite; opacity: 0.7; } .heart1 { top: 30px; left: 85%; animation-delay: 0s; } .heart2 { top: 50px; left: 88%; animation-delay: 1s; } .heart3 { top: 40px; left: 91%; animation-delay: 2s; } @keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 0.7; } 50% { transform: translateY(-10px) scale(1.2); opacity: 1; } 100% { transform: translateY(-20px) scale(1); opacity: 0.5; } } .gray-note-box { position: relative; background: #f7f7f7; border: 1px solid #ccc; border-left: 6px solid #999; border-radius: 8px; padding: 20px 20px 20px 50px; margin: 20px 0; font-family: 'Hiragino Kaku Gothic ProN', sans-serif; box-shadow: 2px 2px 6px rgba(0,0,0,0.05); line-height: 1.8; } /* 左上のアイコン（えんぴつ） */ .gray-note-box::before { content: "✏️"; position: absolute; top: -15px; left: 10px; font-size: 22px; animation: swing 1s infinite ease-in-out; } /* 点線ライン */ .gray-note-box::after { content: ""; position: absolute; bottom: 10px; left: 20px; width: calc(100% - 40px); height: 1px; border-bottom: 1px dotted #aaa; } /* ぴょこぴょこアニメーション */ @keyframes swing { 0% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } 100% { transform: rotate(0deg); } } /* タイトル画像エリア */ #title { position: relative; text-indent: -9999px; background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/niko-tan/20250505/20250505232455.png) no-repeat center center; background-size: cover; height: 260px; margin-bottom: 20px; opacity: 0; transform: translateY(-20px); animation: fadeInDown 1s ease-out forwards; transition: filter 0.4s ease; } /* ホバーで明るく */ #title:hover { filter: brightness(1.1); } /* 鉛筆画像を右上に表示＆ゆらゆらアニメーション */ #title::before { content: ""; position: absolute; top: -6px; right: 150px; width: 70px; height: 70px; background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/niko-tan/20250505/20250505235548.png) no-repeat center center; background-size: contain; animation: swing 1.5s infinite ease-in-out; z-index: 10; } /* ゆらゆら動き */ @keyframes swing { 0% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(-5deg); } } /* ふわっと出現のアニメーション */ @keyframes fadeInDown { to { opacity: 1; transform: translateY(0); } } @media screen and (max-width: 768px) { #title { height: auto !important; background-size: contain !important; background-repeat: no-repeat; background-position: center top; padding-top: 31.25%; /* ← 画像の高さに合わせて */ } } /* h3〜h5の下線を徹底的に消す */ h3, h4, h5 { border-bottom: none !important; box-shadow: none !important; } h3::after, h4::after, h5::after { content: none !important; display: none !important; } .shiny-btn { position: relative; overflow: hidden; border-radius: 50px; font-weight: bold; padding: 8px 20px; font-size: 14px; color: #fff; cursor: pointer; z-index: 1; transition: background 0.3s ease; } .shiny-btn::before { content: ""; position: absolute; top: 0; left: -75%; width: 5%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.1) 100% ); transform: skewX(-20deg); z-index: 0; pointer-events: none; animation: shine 5s infinite linear; } @keyframes shine { 0% { left: -75%; } 100% { left: 125%; } } .gold-highlight { color: #bfa046; /* やや落ち着いたゴールド */ font-weight: bold; animation: blink 2.5s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .gold-highlight { color: #bfa046; /* 控えめゴールド */ font-weight: bold; font-size: 0.8em; animation: shimmer 2.5s infinite; } @keyframes shimmer { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } .gold-text { font-weight: bold; font-size: 1.2em; background: linear-gradient(to right, #d4af37, #ffd700, #ffec8b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 1px 1px 2px rgba(255, 215, 0, 0.6); } .fuwari-hover { background: #fff; display: inline-block; transition: transform 0.3s ease, box-shadow 0.3s ease; } .fuwari-hover:hover { transform: translateY(-4px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08); } /* ASPバナーだけ角を四角に・ゆらゆら対策・余白なし */ .fuwari-hover img, a[href*="a8.net"] img, a[href*="moshimo.com"] img, a[href*="rakuten.co.jp"] img, a[href*="amazon.co.jp"] img { display: block; margin: 0; border-radius: 0 !important; animation: none !important; } .breadcrumb { font-size: 13px; color: #d36c87; /* やさしいローズピンク */ margin-bottom: 8px; } /* 吹き出し全体 */ .balloon-box { display: flex; align-items: flex-start; margin: 1.5em 0; font-size: 15px; } /* 左吹き出し */ .balloon-left .balloon-icon { order: 0; margin-right: 10px; } .balloon-left .balloon-talk::before { content: ""; position: absolute; top: 14px; left: -12px; width: 0; height: 0; border-top: 6px solid transparent; border-right: 12px solid #f1f8e9; border-bottom: 6px solid transparent; } /* 右吹き出し */ .balloon-right { flex-direction: row-reverse; } .balloon-right .balloon-icon { order: 1; margin-left: 10px; } .balloon-right .balloon-talk::before { content: ""; position: absolute; top: 14px; right: -12px; width: 0; height: 0; border-top: 6px solid transparent; border-left: 12px solid #f1f8e9; border-bottom: 6px solid transparent; } /* 共通アイコン */ .balloon-icon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* 共通吹き出し */ .balloon-talk { position: relative; background: #f1f8e9; border-radius: 12px; padding: 10px 14px; max-width: 85%; color: #333; line-height: 1.6; } /* 記事本文内の広告画像にもホバー効果を適用 */ .entry-content a[href*="a8.net"] img, .entry-content a[href*="af.moshimo.com"] img, .entry-content a[href*="rakuten.co.jp"] img, .entry-content a[href*="amazon.co.jp"] img, .entry-content a[href*="click.linksynergy.com"] img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; box-sizing: border-box; transition: transform 0.3s ease, box-shadow 0.3s ease; } .entry-content a[href*="a8.net"] img:hover, .entry-content a[href*="af.moshimo.com"] img:hover, .entry-content a[href*="rakuten.co.jp"] img:hover, .entry-content a[href*="amazon.co.jp"] img:hover, .entry-content a[href*="click.linksynergy.com"] img:hover { transform: scale(1.015); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* ✨ にこり専用レシピカード - 横並び固定＋スマホ対応 */ .nikori-card-kitchen { display: flex; flex-wrap: nowrap; /* 横並びで折り返さない */ align-items: stretch; /* 中身の高さをカードに合わせる */ gap: 12px; height: 140px; /* 全カードの高さを固定 */ border: 1px solid #f9cfdc; border-radius: 12px; padding: 10px; margin: 14px 0; background: #fffaf8; box-shadow: 2px 2px 6px rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; /* 高さを超える部分をカット */ } .nikori-card-kitchen:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .nikori-card-kitchen img { width: 100px; height: 100px; /* 縦も固定（高さ揃う） */ object-fit: cover; /* 中央を切り出してキレイに */ border-radius: 8px; align-self: center; /* 縦位置を中央に */ } .nikori-card-kitchen .text-box { flex: 1; font-size: 19px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; /* テキストは最大3行でカット */ -webkit-box-orient: vertical; } /* 📱スマホ対応：縦並びで高さ自動＆テキスト全文表示 */ @media screen and (max-width: 480px) { .nikori-card-kitchen { flex-direction: column; height: auto; align-items: flex-start; } .nikori-card-kitchen img { width: 100%; aspect-ratio: 1 / 1; /* ←ここで正方形に統一✨ */ object-fit: cover; border-radius: 8px; } .nikori-card-kitchen .text-box { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; } } /* にこり吹き出し用CSSここから */ .balloon-box { display: flex; align-items: flex-start; margin: 1.5em 0; font-size: 15px; } .balloon-left .balloon-icon { order: 0; margin-right: 10px; } .balloon-left .balloon-talk::before { content: ""; position: absolute; top: 14px; left: -12px; width: 0; height: 0; border-top: 6px solid transparent; border-right: 12px solid #f1f8e9; border-bottom: 6px solid transparent; } .balloon-right { flex-direction: row-reverse; } .balloon-right .balloon-icon { order: 1; margin-left: 10px; } .balloon-right .balloon-talk::before { content: ""; position: absolute; top: 14px; right: -12px; width: 0; height: 0; border-top: 6px solid transparent; border-left: 12px solid #f1f8e9; border-bottom: 6px solid transparent; } .balloon-icon { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .balloon-talk { position: relative; background: #f1f8e9; border-radius: 12px; padding: 10px 14px; max-width: 85%; color: #333; line-height: 1.6; } /* にこり吹き出し用CSSここまで */ /* よく学び！よく遊べ！をふわふわ浮かせるアニメーション */ /* ぷかぷか浮きながら、くるっと一回転アニメーション */ @keyframes spinFloat { 0% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-6px); } 100% { transform: rotate(360deg) translateY(0); } } .spin-text { display: inline-block; animation: spinFloat 4s ease-in-out infinite; } /* サイドバー問題集ボタンアニメーション */ @keyframes sparkle { 0% { box-shadow: 0 0 3px rgba(180, 240, 200, 0.4); background-color: #e0ffe0; } 50% { box-shadow: 0 0 10px rgba(120, 200, 160, 0.6); background-color: #d0f8d0; } 100% { box-shadow: 0 0 3px rgba(180, 240, 200, 0.4); background-color: #e0ffe0; } } .cute-button { display: inline-block; padding: 8px 18px; background: #e0ffe0; color: #339966; font-weight: bold; text-decoration: none; border-radius: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.15); animation: sparkle 2.5s infinite; transition: transform 0.2s ease, background-color 0.3s ease; font-size: 0.95em; max-width: 100%; } .cute-button:hover { transform: scale(1.05); background-color: #c0f0c0; } @media screen and (max-width: 599px) { .gray-note-box { font-size: 15px !important; line-height: 1.8 !important; padding: 16px !important; word-break: break-word; } } /* ✨ にこり専用Houseworkカード - 横並び固定＋スマホ対応 */ .nikori-card-housework { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; height: 140px; border: 1px solid #cdeedf; border-radius: 12px; padding: 10px; margin: 14px 0; background: #f3fff8; box-shadow: 2px 2px 6px rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; } .nikori-card-housework:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .nikori-card-housework img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; align-self: center; } .nikori-card-housework .text-box { flex: 1; font-size: 18px; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* 📱スマホ対応：縦並びで高さ自動＆テキスト全文表示 */ @media screen and (max-width: 480px) { .nikori-card-housework { flex-direction: column; height: auto; align-items: flex-start; } .nikori-card-housework img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; } .nikori-card-housework .text-box { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; } } /* トップページだけ、自動で出てくる「最新記事」＋そのh3見出しを非表示にする */ body.top-page .entry-entries, body.top-page .archive-entries, body.top-page .recent-entries, body.top-page .hatena-module-recent-entries, body.top-page .hatena-module-category-entries, body.top-page h3 { display: none !important; } /* --- にこさん用：画像付きカード（サイドバー表示向け） --- */ .custom-card { display: flex; align-items: stretch; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 16px; background: #fff; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 2px 2px 6px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .custom-card:hover { transform: scale(1.03); box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1); } .custom-card img { width: 40%; height: 100px; object-fit: cover; display: block; } .custom-card .custom-card-title { padding: 14px; font-size: 14px; line-height: 1.6; flex: 1; display: flex; align-items: center; color: #333; } @media screen and (max-width: 600px) { .custom-card { flex-direction: row; /* ← スマホでも横並びを維持 */ } .custom-card img { width: 40%; height: 100px; } .custom-card .custom-card-title { font-size: 13px; padding: 12px; } }