アットウィキロゴ
×スマイル！×【公式】
ページ一覧
アットウィキロゴ
×スマイル！×【公式】
ページ一覧
×スマイル！×【公式】
掲示板 掲示板 ページ検索 ページ検索 メニュー メニュー
管理メニュー

×スマイル！×【公式】

×スマイル！×【公式】のCSSコード

最終更新：

nknie

- view
管理者のみ編集可

目次

見出し、記事メニューの黒いバー変更/* ========================================================

 【新体制グループ用】ゆめかわネオ見出し一括設定 ＆ 黒紫記事メニュー（完成版）
======================================================== */
/* 👑 すべての見出し（h1〜h6）を一括でゆめかわネオに設定！ */
h1, h2, h3, h4, h5, h6,
.atwiki-content h1, .atwiki-content h2, .atwiki-content h3, .atwiki-content h4, .atwiki-content h5, .atwiki-content h6,
#atwiki
  • body h1, #atwiki-body h2, #atwiki-body h3, #atwiki-body h4, #atwiki-body h5, #atwiki-body h6,
#menubar
h3, #side h3 { 
 font-size: 24px !important;                 /* すべての見出しを24pxで統一！ */
 border: none !important; 
 display: block !important; 
 box-shadow: 0 4px 0px #bae6fd, 4px 6px 10px rgba(167, 243, 208, 0.4) !important; 
 padding: 10px 18px !important; 
 border-radius: 10px !important;             /* 丸みのある可愛い10px */
 position: relative !important; 
 width: 100% !important; 
 box-sizing: border-box !important;
 background-color: #7dd3fc !important;       /* パステル水色 */
 margin-bottom: 15px !important; 
 color: #ffffff !important;                  /* 白文字 */
 /* 💡 ミント色のフチ取り＆フワッとした光の文字装飾 */
 text-shadow: 
  1px 1px 0 #a7f3d0, -1px -1px 0 #a7f3d0, 1px -1px 0 #a7f3d0, -1px 1px 0 #a7f3d0,
  0px 0px 4px #a7f3d0 !important;
}
/* 見出しの中のリンク文字の下線を消して白くする設定 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .atwiki-content a { 
 text-decoration: none !important; 
 color: #ffffff !important;
}
/* 📋 記事メニューの見出し：黒背景×紫の縦線デザイン！ */
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title,
.builtin_contents_track, .contents { 
   font-size: 24px !important;                  /* 見出しとお揃いの24px */
   background-color: #000000 !important;       /* 背景を黒 */
   border-left: 6px solid #8a2be2 !important;   /* 左に紫の縦線 */
   border-radius: 6px !important;              /* 角を丸くする */
   padding: 10px 15px !important;              /* 内側の余白 */
   border-bottom: none !important; 
   border-top: none !important;
   border-right: none !important;
   box-shadow: none !important;                /* 影はなし */
   display: block !important; 
   width: 100% !important; 
   box-sizing: border-box !important;
}
/* 📋 記事メニューの文字（シンプルな白文字で読みやすく！） */
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title,
.builtin_contents_track, .contents, .builtin_contents_track a, .contents a { 
color: #ffffff !important; 
text-shadow: none !important;                 /* 目次はフチなしで見やすさ重視 */
text-decoration: none !important;
}

普通の文字の色（パステル系の方は灰色がおすすめ！）

/* 全体の普通の文字色を灰色にする */
#main
, #main_body, #wrapper, #container, .atwiki_body { 
   color: #777777 !important;
}


リンクのデザイン変更・記事メニューの背景変更

/* ================================================== 
  1. 全体の通常リンクカスタマイズ
  ================================================== */
a { 
  color: #000000 !important;            /* 文字は最初、黒 */
  text-decoration: none !important;     /* 標準の細い下線を消去 */
  border-bottom: 2px solid #8a2be2 !important; /* 太い下線は濃い紫 */
  padding-bottom: 1px;                  /* 文字と下線の隙間調整 */
}
/* マウスを乗せたとき（ホバー時）の動き */
a:hover { 
  color: #000000 !important;            /* 文字は黒のまま */
  border-bottom-color: #8a2be2 !important; /* 太い下線は濃い紫のまま */
}
/* タップ・クリックされた瞬間の動き */
a:active { 
  color: #7dd3fc !important;            /* 文字は変更した水色 */
  border-bottom-color: pink !important; /* 太い下線は消さずにpink色！ */
}
/* 見出し（h1〜h6）の中にあるリンクの見た目をリセット */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 
  color: inherit !important;            /* 見出し本来の文字色をそのまま使う */
  border-bottom: none !important;       /* ここだけ太い下線をオフ */
  padding-bottom: 0 !important;         /* 隙間調整をリセット */
}
/* ================================================== 
  2. 目次のリンク色カスタマイズ（通常リンクと完璧に反対の動き）
  ================================================== */
/* 最初の状態：通常リンクの【タップ時】と全く同じ（水色文字＋太いpink下線） */
div.atwiki_contents a, ul.contents a, div.contents a, .plugin_contents a { 
  color: #7dd3fc !important; 
  text-decoration: none !important;     /* 標準の細い下線を消去 */
  border-bottom: 2px solid pink !important; /* ずっと太いまま！pink色の太線 */
  padding-bottom: 1px !important;       /* 通常リンクと隙間を合わせる */
}
/* ホバー時（マウスを乗せたとき）は最初の水色と太いpink下線をキープ */
div.atwiki_contents a:hover, ul.contents a:hover, div.contents a:hover, .plugin_contents a:hover { 
  color: #7dd3fc !important; 
  border-bottom-color: pink !important;  /* 太いpink下線のまま */
}
/* タップ（クリック）された瞬間：通常リンクの【最初】と全く同じ（黒文字＋太い濃い紫下線） */
div.atwiki_contents a:active, ul.contents a:active, div.contents a:active, .plugin_contents a:active { 
  color: #000000 !important;            
  border-bottom-color: #8a2be2 !important; /* 通常リンクの最初と同じ、太い濃い紫下線！ */
}
/* 9. 広々版（修正リベンジ版！） */
.atwiki-list-body, .atwiki_list_body, .atwiki-list-title + ul, div:has(> .atwiki-list-title) ul,
.atwiki-list-body2, .atwiki_list_body2, .atwiki-list-title2 + ul, div:has(> .atwiki-list-title2) ul {
background-color: #f0faff !important; 
border: 1px solid #e0b0ff !important; 
border-top: none !important; 
padding: 15px 20px !important; 
border-radius: 0 0 6px 6px !important;  
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05) !important; 
width: 100% !important; 
max-width: 100% !important; 
box-sizing: border-box !important;
}


水平線をミント色の点線、両脇にオレンジの星追加

/* 水平線（ミント色・両端にオレンジの★） */
hr { 
 border: none !important;
 border-top: 2px dashed #98fb98 !important; 
 margin: 20px 0 !important;
 position: relative !important;
 overflow: visible !important;
}
hr::before { 
 content: "★" !important;
 color:  #8a2be2 !important; 
 position: absolute !important;
 top: -12px !important;
 left: 0 !important;
 background: #ffffff !important;
}
hr::after { 
 content: "★" !important;
 color: #ffa500 !important;
 position: absolute !important;
 top: -12px !important;
 right: 0 !important;
 background: #ffffff !important;
}

ハチワレ風コメントボタン


★ハチワレ風☆ 【書き込む（送信）ボタン】ピンクハチワレver！ 
  ================================================== */
input[type="submit"],
.comment_form input[type="submit"],
input[type="submit"],
.atwiki_comment_form input[type="submit"] { 
   -webkit-appearance: none;
   appearance: none;
   
   /* 左右から斜めにピンク（#ffb6c1）を敷いて、真ん中で白の「八の字」が割れるように設定！ */
   background: 
       linear-gradient(145deg, #ffb6c1 35%, transparent 35%),
       linear-gradient(-145deg, #ffb6c1 35%, transparent 35%),
       #ffffff !important;
   
   color: #555555 !important; /* 文字：濃いめグレー */
   font-weight: bold !important;
   font-size: 16px !important;
   
   border: 3px solid #ffb6c1 !important; /* フチも可愛いピンクに */
   border-radius: 30px !important;       /* ぷっくり丸いお顔の形 */
   
   padding: 8px 24px !important;
   display: inline-block !important;
   cursor: pointer !important;
   box-shadow: 0 4px 0px rgba(0, 0, 0, 0.1) !important; /* 優しい影 */
   transition: all 0.2s ease !important;
}

/* ピンクハチワレボタンをポチッと押したとき（フチが水色に変身！） */
input[type="submit"]:hover,
.comment_form input[type="submit"]:hover,
input[type="submit"]:hover,
.atwiki_comment_form input[type="submit"]:hover { 
   transform: translateY(2px) !important;          /* ポチッと沈む動き */
   box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1) !important;
   border-color: #87ceeb !important;               /* ★フチを薄紫から水色に変更！★ */
}

コメントの返信ボタンのマーク顔つき★&タップされたらプニプニ

/* ======================================================== 
  1. デフォルトの丸ポチを消して、お顔の土台を作る
======================================================== */
.comment_form input[type="radio"],
input[type="radio"],
[class*="comment"] input[type="radio"] { 
 -webkit-appearance: none !important;
 appearance: none !important;
 background: transparent !important;
 border: none !important;
 box-shadow: none !important;
 outline: none !important;
 position: relative !important;
 display: inline-block !important;
 width: 60px !important;  
 height: 60px !important;
 cursor: pointer !important;
 vertical-align: middle !important;
 margin: 0 4px 2px 4px !important;
}

/* 💡 星マーク（☆ / ★）の設定 */
.comment_form input[type="radio"]::before,
input[type="radio"]::before,
[class*="comment"] input[type="radio"]::before { 
 position: absolute !important;
 top: 50% !important;
 left: 50% !important;
 line-height: 1 !important;
 font-size: 55px !important; 
 transform: translate(-50%, -50%) scale(1);
 transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
 z-index: 1 !important;
}

/* 💡 お顔のパーツ（最前面に重ねる）の設定 */
.comment_form input[type="radio"]::after,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]::after,
[class*="comment"] input[type="radio"]::after { 
 position: absolute !important;
 top: 53% !important; /* 星の中心に合うように微調整 */
 left: 50% !important;
 line-height: 1 !important;
 white-space: nowrap !important;
 font-size: 11px !important; 
 font-weight: bold !important;
 transform: translate(-50%, -50%);
 z-index: 2 !important; 
 pointer-events: none !important;
 transition: transform 0.06s ease-out, color 0.2s ease;
}

/* ======================================================== 
  2. 🚀 選択前：黄色の☆の中で「ーωー」と優しく浮遊する
======================================================== */
.comment_form input[type="radio"]:not(:checked)::before,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:not(:checked)::before,
[class*="comment"] input[type="radio"]:not(:checked)::before { 
 content: "☆" !important;
 color: #ffd700 !important;
}
.comment_form input[type="radio"]:not(:checked)::after,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:not(:checked)::after,
[class*="comment"] input[type="radio"]:not(:checked)::after { 
 content: "ーωー" !important;
 color: #333333 !important; /* 黄色い星には黒文字 */
}

/* 全体をフワフワ浮遊させるアニメーション */
.comment_form input[type="radio"]:not(:checked),
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:not(:checked),
[class*="comment"] input[type="radio"]:not(:checked) { 
 animation: fuwafuwaUku 2.5s infinite ease-in-out !important;
}

@keyframes fuwafuwaUku { 
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-6px); }
}

/* ======================================================== 
  3. ⚡ タップした瞬間（アクティブ）：プニッと潰れてウインク！
======================================================= */
.comment_form input[type="radio"]:active::before,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:active::before,
[class*="comment"] input[type="radio"]:active::before { 
 content: "★" !important;
 color: #ff8c00 !important; /* オレンジ色 */
 transform: translate(-50%, -30%) scale(1.6, 0.5) !important; /* 星がペチャッと潰れる */
 transition: transform 0.06s ease-out;
}
.comment_form input[type="radio"]:active::after,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:active::after,
[class*="comment"] input[type="radio"]:active::after { 
 content: "ーω・" !important; /* タップした瞬間ウインク！ */
 color: #ffffff !important; /* お顔を白に！ */
 transform: translate(-50%, -15%) scale(1.5, 0.6) !important; /* お顔もちょっと上寄りに潰れる */
 transition: transform 0.06s ease-out;
}

/* ======================================================== 
  4. 🎉 選択後：オレンジの★＆白文字になり、1秒後に「ーωー」に戻る
======================================================== */
html body .comment_form input[type="radio"]:checked::before,
html body #pcomment input[type="radio"]:checked::before,
html body [class*="comment"] input[type="radio"]:checked::before { 
 content: "★" !important;
 color: #ff8c00 !important;
}

html body .comment_form input[type="radio"]:checked::after,
html body #pcomment input[type="radio"]:checked::after,
html body [class*="comment"] input[type="radio"]:checked::after { 
 color: #ffffff !important; /* 選択中はずっとお顔は白色 */
 animation: winkBack 1s forwards !important;
}

@keyframes winkBack { 
 0% { content: "ーω・"; }   /* 指を離した直後もまだびっくりウインク */
 99% { content: "ーω・"; }  /* 1秒直前までキープ */
 100% { content: "ーωー"; } /* 1秒経ったら「ほっ」として元に戻る！ */
}

願いを絶対に叶えてくれる！ゆっくり流れ星

/* ======================================================== 
  5. 🚀【スローモーション版】右の角・左の角から交互に降る流れ星☆
======================================================== */
body { 
 position: relative !important;
 overflow-x: hidden !important;
}
/* 💫 流れ星その①：【右上（北東）の角】から左下（南西）へ */
body::before { 
 content: "★ ✦ ✦ ✦" !important; 
 position: fixed !important;
 z-index: 9999 !important; 
 font-size: 20px !important;
 white-space: nowrap !important;
 
 /* 先頭★は黄色、後ろの✦は水色 */
 color: #ffd700 !important; 
 text-shadow: 
   0 0 10px #ffd700,
   30px 0 5px #87ceeb,  
   55px 0 5px #87ceeb,  
   80px 0 5px #87ceeb;  
 /* 💡 【大成功の角度！】触らずそのままキープ */
 transform: rotate(-45deg) !important;
 
 /* 💡 全体のループは4秒にして、流れる時間を2.2秒にスロー化！ */
 animation: nagareboshiRight 4s infinite linear !important;
}
/* 💫 流れ星その②：【左上（北西）の角】から右下（南東）へ */
body::after { 
 content: "★ ✦ ✦ ✦" !important; 
 position: fixed !important;
 z-index: 9999 !important; 
 font-size: 20px !important;
 white-space: nowrap !important;
 
 /* 先頭★は黄色、後ろの✦は水色 */
 color: #ffd700 !important; 
 text-shadow: 
   0 0 10px #ffd700,
   30px 0 5px #87ceeb,  
   55px 0 5px #87ceeb,  
   80px 0 5px #87ceeb;  
 /* 💡 【大成功の角度！】触らずそのままキープ */
 transform: rotate(225deg) !important;
 
 /* 💡 全体のループは4秒、右の星から2秒遅らせて優雅にスタート */
 animation: nagareboshiLeft 4s infinite linear !important;
 animation-delay: 2s !important;
}
/* 🚀 右上の角から左下へゆっくり流れるルート */
@keyframes nagareboshiRight { 
 0% {
   top: -50px;
   right: -100px;
   opacity: 0;
 }
 5% {
   opacity: 1;
 }
 /* 💡 55%（2.2秒）かけて、画面の左下外へゆったり消え去るようにしたよ */
 55%, 100% {
   top: 95vh;
   right: 115vw; 
   opacity: 0;
 }
}
/* 🚀 左上の角から右下へゆっくり流れるルート */
@keyframes nagareboshiLeft { 
 0% {
   top: -50px;
   left: -100px;
   opacity: 0;
 }
 5% {
   opacity: 1;
 }
 /* 💡 55%（2.2秒）かけて、画面の右下外へゆったり消え去るようにしたよ */
 55%, 100% {
   top: 95vh;
   left: 115vw; 
   opacity: 0;
 }
}

タブの裏側（世界の裏側）などの色変更コード（重くなりすぎて没になりました）

/* ================================================== 
  ★世界の裏側★ 全体の背景をバッチリわかるパステルミントにする設定
  ================================================== */
body, html, #wrapper, #container, .atwiki_body { 
   background-color: #c7f9cc !important; /* ひと目でわかる可愛いパステルミント */
   background: #c7f9cc !important;
}

フォント&サイズ&太さ変更/* アットウィキが裏で数字やリストを小さくしている設定をすべて102%に強制統一 */

body, div, span, p, a, li, dt, dd, td, th, h1, h2, h3, h4, h5, h6,
.num, .number, .count, .digits, [class*="num"], [id*="num"],
ol li, ul li, .list, .plugin_list { 
 font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "Kosugi Maru", sans-serif !important;
 font-size: 102% !important;
 font-weight: 500 !important;
}

コメントの「返信○件」の色変更（薄紫）

/* ========================================== 
  【決定版】「返信〇件」をボタンとお揃いの薄紫にする
========================================== */
.comment_form span, #pcomment span,
.comment_form dt, #pcomment dt,
.comment_tree, .comment_reply,
[class*="reply"], [id*="reply"] { 
 color: #e0b0ff !important;    /* ボタンや水平線とお揃いの薄紫 */
 font-weight: bold !important; /* 文字を少し太く */
}
/* マウスを乗せたとき（少しだけ濃い薄紫になって押しやすく） */
.comment_tree:hover, .comment_reply:hover,
[class*="reply"]:hover, [id*="reply"]:hover { 
 color: #c896e6 !important;
}

コメントの書き込み欄変更

/* ========================================== 
  コメントフォーム入力欄（中は白・外側と影をミント仕様に）
========================================== */
textarea,
input[type="text"] { 
 -webkit-appearance: none !important;
 appearance: none !important;
 background-color: #ffffff !important; /* 文字を書く中身は白！ */
 color: #333333 !important;            /* 文字色 */
 border: 2px solid #b2dfdb !important; /* 枠線を可愛いミント色に */
 border-radius: 8px !important;        /* 角丸 */
 padding: 8px 12px !important;
 font-size: 16px !important;
 box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1) !important; /* ボタンとお揃いの立体影 */
 transition: all 0.3s ease !important;
}

/* 入力欄をカチッと選択したとき */
textarea:focus,
input[type="text"]:focus { 
 outline: none !important;
 border-color: #80cbc4 !important;     /* フォーカス時に枠線のミントを少し濃く */
 background-color: #ffffff !important; /* 入力中も白をキープ */
}

テーブル線、投票の枠線色変更&コメントの周りポワポワ

/* ========================================== 
 1. 投票プラグイン＆テーブルの枠線を濃い紫色に
========================================== */
.plugin_vote,
.plugin_vote table,
.plugin_vote td,
.plugin_vote th { 
border-color: #9b72aa !important; /* 濃いアメジスト紫 */
}
table, th, td,
.atwiki-table,
.atwiki-table th,
.atwiki-table td { 
border: 1px solid #9b72aa !important;
}
/* ========================================== 
 2. コメントフォーム全体の大きな外枠（上：濃い赤光 / 下：黄色光）
========================================== */
.plugin_comment_form,
#comment_form
,
.atwiki-comment-form-container { 
 border: none !important; /* 外側の硬い線は消す */
 
 /* 黄色（後半の命令）の縦の位置を「12px」から「4px」に縮めて、上に引き上げたよ！ */
 box-shadow: 0 -8px 15px rgba(139, 0, 0, 0.7), 
             0 4px 12px rgba(255, 215, 0, 0.8) !important; 
 
 padding: 15px !important;
 border-radius: 8px !important;
}

×スマイル！×【公式】のCSSコード全部

ここから下の文字は全てコードです！

/* ================================================== 
 1. 全体の通常リンクカスタマイズ
 ================================================== */
a { 
 color: #000000 !important;            /* 文字は最初、黒 */
 text-decoration: none !important;     /* 標準の細い下線を消去 */
 border-bottom: 2px solid #8a2be2 !important; /* 太い下線は濃い紫 */
 padding-bottom: 1px;                  /* 文字と下線の隙間調整 */
}
/* マウスを乗せたとき（ホバー時）の動き */
a:hover { 
 color: #000000 !important;            /* 文字は黒のまま */
 border-bottom-color: #8a2be2 !important; /* 太い下線は濃い紫のまま */
}
/* タップ・クリックされた瞬間の動き */
a:active { 
 color: #7dd3fc !important;            /* 文字は変更した水色 */
 border-bottom-color: pink !important; /* 太い下線は消さずにpink色！ */
}
/* 見出し（h1〜h6）の中にあるリンクの見た目をリセット */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 
 color: inherit !important;            /* 見出し本来の文字色をそのまま使う */
 border-bottom: none !important;       /* ここだけ太い下線をオフ */
 padding-bottom: 0 !important;         /* 隙間調整をリセット */
}
/* ================================================== 
 2. 目次のリンク色カスタマイズ（通常リンクと完璧に反対の動き）
 ================================================== */
/* 最初の状態：通常リンクの【タップ時】と全く同じ（水色文字＋太いpink下線） */
div.atwiki_contents a, ul.contents a, div.contents a, .plugin_contents a { 
 color: #7dd3fc !important; 
 text-decoration: none !important;     /* 標準の細い下線を消去 */
 border-bottom: 2px solid pink !important; /* ずっと太いまま！pink色の太線 */
 padding-bottom: 1px !important;       /* 通常リンクと隙間を合わせる */
}
/* ホバー時（マウスを乗せたとき）は最初の水色と太いpink下線をキープ */
div.atwiki_contents a:hover, ul.contents a:hover, div.contents a:hover, .plugin_contents a:hover { 
 color: #7dd3fc !important; 
 border-bottom-color: pink !important;  /* 太いpink下線のまま */
}
/* タップ（クリック）された瞬間：通常リンクの【最初】と全く同じ（黒文字＋太い濃い紫下線） */
div.atwiki_contents a:active, ul.contents a:active, div.contents a:active, .plugin_contents a:active { 
 color: #000000 !important;            
 border-bottom-color: #8a2be2 !important; /* 通常リンクの最初と同じ、太い濃い紫下線！ */
}
/* 9. 広々版（修正リベンジ版！） */
.atwiki-list-body, .atwiki_list_body, .atwiki-list-title + ul, div:has(> .atwiki-list-title) ul,
.atwiki-list-body2, .atwiki_list_body2, .atwiki-list-title2 + ul, div:has(> .atwiki-list-title2) ul {
background-color: #f0faff !important;
border: 1px solid #e0b0ff !important;
border-top: none !important;
padding: 15px 20px !important;
border-radius: 0 0 6px 6px !important;
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 右メニューやページ内の箇条書き（リスト）の点を✦に変えて、その点だけをパステル紫にする */
ul li::marker { 
 content: "✦ " !important;
 color: #dfbfff !important; /* 「✦」のマークだけパステル紫 */
}

/* 箇条書きの文字色をお友達のwikiのベース色（灰色）に合わせる */
ul li { 
 color: inherit !important; /* お友達のwikiの元の灰色をそのまま引き継ぐよ！ */
}

/* ========================================== 
  ★予備命令：上記で変わらない場合のためのキラキラ復活コード
========================================== */
li { 
 list-style-type: "✦ " !important;
}
li::marker { 
 color: #dfbfff !important; /* 予備命令のほうの「✦」もパステル紫にするよ */
}

/* ========================================== 
 1. 投票プラグイン＆テーブルの枠線を濃い紫色に
========================================== */
.plugin_vote,
.plugin_vote table,
.plugin_vote td,
.plugin_vote th { 
border-color: #9b72aa !important; /* 濃いアメジスト紫 */
}
table, th, td,
.atwiki-table,
.atwiki-table th,
.atwiki-table td { 
border: 1px solid #9b72aa !important;
}
/* ========================================== 
 2. コメントフォーム全体の大きな外枠（上：濃い赤光 / 下：黄色光）
========================================== */
.plugin_comment_form,
#comment_form
,
.atwiki-comment-form-container { 
 border: none !important; /* 外側の硬い線は消す */
 
 /* 黄色（後半の命令）の縦の位置を「12px」から「4px」に縮めて、上に引き上げたよ！ */
 box-shadow: 0 -8px 15px rgba(139, 0, 0, 0.7), 
             0 4px 12px rgba(255, 215, 0, 0.8) !important; 
 
 padding: 15px !important;
 border-radius: 8px !important;
}

/* アットウィキが裏で数字やリストを小さくしている設定をすべて102%に強制統一 */

body, div, span, p, a, li, dt, dd, td, th, h1, h2, h3, h4, h5, h6,
.num, .number, .count, .digits, [class*="num"], [id*="num"],
ol li, ul li, .list, .plugin_list { 

font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "Kosugi Maru", sans-serif !important;
font-size: 102% !important;
font-weight: 500 !important;

}

/* ========================================== 
  ★完全修正：コード表示エリアの中の文字色を本来の色に強制リセット
========================================== */
pre, code, textarea, input, select,
.code, .plugin_code, .syntax_highlight,
.code *, .plugin_code *, .syntax_highlight * { 
 color: initial !important; /* コードの中の文字やspanの色を本来の色（黒や色分け）に戻す！ */
}

/* ========================================== 
  ★追加コード：コード表示エリアや入力欄の文字色を元に戻す
========================================== */
pre, code, textarea, input, select,
.code, .program, [class*="code"], [id*="code"] { 
 color: initial !important; /* 文字の色を本来の色（黒など）に戻すよ */
 font-family: inherit;      /* フォントは丸ゴシックのままでも見やすいようにするよ */
}

/* ======================================================== 
 【新体制グループ用】ゆめかわネオ見出し一括設定 ＆ 黒紫記事メニュー（完成版）
======================================================== */

/* 👑 すべての見出し（h1〜h6）を一括でゆめかわネオに設定！ */
h1, h2, h3, h4, h5, h6,
.atwiki-content h1, .atwiki-content h2, .atwiki-content h3, .atwiki-content h4, .atwiki-content h5, .atwiki-content h6,
#atwiki
  • body h1, #atwiki-body h2, #atwiki-body h3, #atwiki-body h4, #atwiki-body h5, #atwiki-body h6,
#menubar
h3, #side h3 { 
 font-size: 24px !important;                 /* すべての見出しを24pxで統一！ */
 border: none !important; 
 display: block !important; 
 box-shadow: 0 4px 0px #bae6fd, 4px 6px 10px rgba(167, 243, 208, 0.4) !important; 
 padding: 10px 18px !important; 
 border-radius: 10px !important;             /* 丸みのある可愛い10px */
 position: relative !important; 
 width: 100% !important; 
 box-sizing: border-box !important;
 background-color: #7dd3fc !important;       /* パステル水色 */
 margin-bottom: 15px !important; 
 color: #ffffff !important;                  /* 白文字 */
 /* 💡 ミント色のフチ取り＆フワッとした光の文字装飾 */
 text-shadow: 
  1px 1px 0 #a7f3d0, -1px -1px 0 #a7f3d0, 1px -1px 0 #a7f3d0, -1px 1px 0 #a7f3d0,
  0px 0px 4px #a7f3d0 !important;
}

/* 見出しの中のリンク文字の下線を消して白くする設定 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .atwiki-content a { 
 text-decoration: none !important; 
 color: #ffffff !important;
}


/* 📋 記事メニューの見出し：黒背景×紫の縦線デザイン！ */
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title,
.builtin_contents_track, .contents { 
   font-size: 24px !important;                  /* 見出しとお揃いの24px */
   background-color: #000000 !important;       /* 背景を黒 */
   border-left: 6px solid #8a2be2 !important;   /* 左に紫の縦線 */
   border-radius: 6px !important;              /* 角を丸くする */
   padding: 10px 15px !important;              /* 内側の余白 */
   border-bottom: none !important; 
   border-top: none !important;
   border-right: none !important;
   box-shadow: none !important;                /* 影はなし */
   display: block !important; 
   width: 100% !important; 
   box-sizing: border-box !important;
}

/* 📋 記事メニューの文字（シンプルな白文字で読みやすく！） */
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title,
.builtin_contents_track, .contents, .builtin_contents_track a, .contents a { 
color: #ffffff !important; 
text-shadow: none !important;                 /* 目次はフチなしで見やすさ重視 */
text-decoration: none !important;
}

/* ========================================== 
  【決定版】「返信〇件」をボタンとお揃いの薄紫にする
========================================== */
.comment_form span, #pcomment span,
.comment_form dt, #pcomment dt,
.comment_tree, .comment_reply,
[class*="reply"], [id*="reply"] { 
 color: #e0b0ff !important;    /* ボタンや水平線とお揃いの薄紫 */
 font-weight: bold !important; /* 文字を少し太く */
}

/* マウスを乗せたとき（少しだけ濃い薄紫になって押しやすく） */
.comment_tree:hover, .comment_reply:hover,
[class*="reply"]:hover, [id*="reply"]:hover { 
 color: #000000 !important;
}

/* ======================================================== 
1. デフォルトの丸ポチを消して、お顔の土台を作る
======================================================== */
.comment_form input[type="radio"],
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"],
[class*="comment"] input[type="radio"] {


  • webkit-appearance: none !important;
appearance: none !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
position: relative !important;
display: inline-block !important;
width: 60px !important;
height: 60px !important;
cursor: pointer !important;
vertical-align: middle !important;
margin: 0 4px 2px 4px !important;


}

/* 💡 星マーク（☆ / ★）の設定 */
.comment_form input[type="radio"]::before,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]::before,
[class*="comment"] input[type="radio"]::before {


position: absolute !important;
top: 50% !important;
left: 50% !important;
line-height: 1 !important;
font-size: 55px !important;
transform: translate(-50%, -50%) scale(1);
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease;
z-index: 1 !important;


}

/* 💡 お顔のパーツ（最前面に重ねる）の設定 */
.comment_form input[type="radio"]::after,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]::after,
[class*="comment"] input[type="radio"]::after {


position: absolute !important;
top: 53% !important; /* 星の中心に合うように微調整 */
left: 50% !important;
line-height: 1 !important;
white-space: nowrap !important;
font-size: 11px !important;
font-weight: bold !important;
transform: translate(-50%, -50%);
z-index: 2 !important;
pointer-events: none !important;
transition: transform 0.06s ease-out, color 0.2s ease;


}

/* ======================================================== 
2. 🚀 選択前：黄色の☆の中で「ーωー」と優しく浮遊する
======================================================== */
.comment_form input[type="radio"]:not(:checked)::before,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:not(:checked)::before,
[class*="comment"] input[type="radio"]:not(:checked)::before {


content: "☆" !important;
color: #ffd700 !important;


}
.comment_form input[type="radio"]:not(:checked)::after,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:not(:checked)::after,
[class*="comment"] input[type="radio"]:not(:checked)::after {


content: "ーωー" !important;
color: #333333 !important; /* 黄色い星には黒文字 */


}

/* 全体をフワフワ浮遊させるアニメーション */
.comment_form input[type="radio"]:not(:checked),
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:not(:checked),
[class*="comment"] input[type="radio"]:not(:checked) {


animation: fuwafuwaUku 2.5s infinite ease-in-out !important;


}

@keyframes fuwafuwaUku {


0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }


}

/* ======================================================== 
3. ⚡ タップした瞬間（アクティブ）：プニッと潰れてウインク！
======================================================= */
.comment_form input[type="radio"]:active::before,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:active::before,
[class*="comment"] input[type="radio"]:active::before {


content: "★" !important;
color: #ff8c00 !important; /* オレンジ色 */
transform: translate(-50%, -30%) scale(1.6, 0.5) !important; /* 星がペチャッと潰れる */
transition: transform 0.06s ease-out;


}
.comment_form input[type="radio"]:active::after,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="radio"]:active::after,
[class*="comment"] input[type="radio"]:active::after {


content: "ーω・" !important; /* タップした瞬間ウインク！ */
color: #ffffff !important; /* お顔を白に！ */
transform: translate(-50%, -15%) scale(1.5, 0.6) !important; /* お顔もちょっと上寄りに潰れる */
transition: transform 0.06s ease-out;


}

/* ======================================================== 
4. 🎉 選択後：オレンジの★＆白文字になり、1秒後に「ーωー」に戻る
======================================================== */
html body .comment_form input[type="radio"]:checked::before,
html body #pcomment input[type="radio"]:checked::before,
html body [class*="comment"] input[type="radio"]:checked::before {


content: "★" !important;
color: #8a2be2 !important;


}

html body .comment_form input[type="radio"]:checked::after,
html body #pcomment input[type="radio"]:checked::after,
html body [class*="comment"] input[type="radio"]:checked::after {


color: #ffffff !important; /* 選択中はずっとお顔は白色 */
animation: winkBack 1s forwards !important;


}

@keyframes winkBack {


0% { content: "ーω・"; } /* 指を離した直後もまだびっくりウインク */
99% { content: "ーω・"; } /* 1秒直前までキープ */
100% { content: "ーωー"; } /* 1秒経ったら「ほっ」として元に戻る！ */


}

/* ========================================================
5. 🚀【スローモーション版】右の角・左の角から交互に降る流れ星☆
======================================================== */
body {

position: relative !important;
overflow-x: hidden !important;

}

/* 💫 流れ星その①：【右上（北東）の角】から左下（南西）へ */
body::before {

content: "★ ✦ ✦ ✦" !important;
position: fixed !important;
z-index: 9999 !important;
font-size: 20px !important;
white-space: nowrap !important;

/* 先頭★は黄色、後ろの✦は水色 */
color: #8b0000 !important;
text-shadow: 

0 0 10px #8a2be2,
30px 0 5px #87ceeb,  
55px 0 5px #87ceeb,  
80px 0 5px #87ceeb;

/* 💡 【大成功の角度！】触らずそのままキープ */
transform: rotate(-45deg) !important;

/* 💡 全体のループは4秒にして、流れる時間を2.2秒にスロー化！ */
animation: nagareboshiRight 4s infinite linear !important;

}

/* 💫 流れ星その②：【左上（北西）の角】から右下（南東）へ */
body::after {

content: "★ ✦ ✦ ✦" !important;
position: fixed !important;
z-index: 9999 !important;
font-size: 20px !important;
white-space: nowrap !important;

/* 先頭★は黄色、後ろの✦は水色 */
color: #ffd700 !important;
text-shadow: 

0 0 10px #ffd700,
30px 0 5px #87ceeb,  
55px 0 5px #87ceeb,  
80px 0 5px #87ceeb;

/* 💡 【大成功の角度！】触らずそのままキープ */
transform: rotate(225deg) !important;

/* 💡 全体のループは4秒、右の星から2秒遅らせて優雅にスタート */
animation: nagareboshiLeft 4s infinite linear !important;
animation-delay: 2s !important;

}

/* 🚀 右上の角から左下へゆっくり流れるルート */
@keyframes nagareboshiRight {

0% { 

top: -50px;
right: -100px;
opacity: 0;

}
5% { 

opacity: 1;

}
/* 💡 55%（2.2秒）かけて、画面の左下外へゆったり消え去るようにしたよ */
55%, 100% { 

top: 95vh;
right: 115vw; 
opacity: 0;

}

}

/* 🚀 左上の角から右下へゆっくり流れるルート */
@keyframes nagareboshiLeft {

0% { 

top: -50px;
left: -100px;
opacity: 0;

}
5% { 

opacity: 1;

}
/* 💡 55%（2.2秒）かけて、画面の右下外へゆったり消え去るようにしたよ */
55%, 100% { 

top: 95vh;
left: 115vw; 
opacity: 0;

}

}

/* ========================================== 
  コメントフォーム入力欄（落ち着いた薄水色 ⇔ 程よい淡ピンク仕様）
========================================== */
textarea,
input[type="text"] { 
 -webkit-appearance: none !important;
 appearance: none !important;
 background-color: #ffffff !important; /* 中身は白 */
 color: #333333 !important;            /* 文字色 */
 border: 2px solid #000000 !important; /* 【眩しくない、しっかり色が見える薄水色】 */
 border-radius: 8px !important;        /* 角丸 */
 padding: 8px 12px !important;
 font-size: 16px !important;
 box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.08) !important; /* 馴染む影 */
 transition: all 0.3s ease !important;
}

/* 入力欄をカチッとタップ（フォーカス）したとき */
textarea:focus,
input[type="text"]:focus { 
 outline: none !important;
 border-color:  #8a2be2 !important;     /* タップで【ダイヤの良さを残した、程よい淡ピンク】 */
 background-color: #ffffff !important; /* 入力中も白をキープ */
}

/* ========================================== 
  コメントボタン（ゆっくり沈む立体仕様）
========================================== */
input[type="button"],
input[type="submit"] { 
 -webkit-appearance: none !important;
 appearance: none !important;
 background-color: #e0b0ff !important; 
 color: #ffffff !important;            
 border: 2px solid #ffb6c1 !important; 
 border-bottom: 4px solid #87ceeb !important; 
 border-radius: 24px !important; 
 font-weight: bold !important; 
 padding: 8px 24px 6px 24px !important; 
 font-size: 16px !important;
 cursor: pointer !important; 
 box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1) !important; 
 transition: all 0.3s ease !important; 
 position: relative !important; 
 top: 0 !important;
}

/* マウスを乗せたとき（少し沈む） */
input[type="button"]:hover,
input[type="submit"]:hover { 
 top: 2px !important; 
 border-bottom: 2px solid #87ceeb !important; 
 box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1) !important;
}

/* クリックした瞬間（完全に沈む） */
input[type="button"]:active,
input[type="submit"]:active { 
 top: 4px !important; 
 border-bottom: 0px solid #87ceeb !important; 
 box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

/* ================================================== 
 ★目次カスタマイズ決定版★ 
 #contents を可愛いメッセージカード風にしてリンクを水色にする設定
 ================================================== */

/* 1. トップページなどの誤爆（余計な枠線）をきれいに消すお守り */
div[id*="wrapper"] div, div[id*="container"] div, main div, .atwiki_body div { 

  background-color: transparent; border: none; box-shadow: none;

}
/* 2. 本物の目次プラグインの枠だけを、ピンクの点線カード風にする */
div.atwiki_contents, ul.contents, div.contents, .plugin_contents { 

  background-color: #ffffff !important; 
  border: 2px dashed #ffb6c1 !important; /* ピンク的点線フチ */
  border-radius: 12px !important;       /* 角丸 */
  padding: 15px 20px !important;         /* 内側の余白 */
  display: inline-block !important;      /* 横幅を中身に合わせる */
  min-width: 250px !important;           /* 最低限の横幅 */
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.05) !important; /* ほんのり影 */

}

/* 水平線（ミント色・両端にオレンジの★） */
hr { 
 border: none !important;
 border-top: 2px dashed #98fb98 !important; 
 margin: 20px 0 !important;
 position: relative !important;
 overflow: visible !important;
}
hr::before { 
 content: "★" !important;
 color:  #8a2be2 !important; 
 position: absolute !important;
 top: -12px !important;
 left: 0 !important;
 background: #ffffff !important;
}
hr::after { 
 content: "★" !important;
 color: #ffa500 !important;
 position: absolute !important;
 top: -12px !important;
 right: 0 !important;
 background: #ffffff !important;
}

コメント欄

  • 他にもこういうコードがあったら載せといてほしいという希望をコメントしてね！ -- ×スマイル！×【公式】 (2026-07-31 09:20:27)
  • 参考にしました！とか書いた方がいいですか？ -- ゆめカフェ (2026-08-08 08:54:17)
  • 旅行で返信遅れました！ｽﾐﾏｾﾝ で、参考のことは書かなかったり、書いたりでご自由にどーぞ！ -- ×スマイル！×【公式】 (2026-08-11 14:53:13)
名前:
コメント:

タグ：

CSSコード
「×スマイル！×【公式】のCSSコード」をウィキ内検索
×スマイル！×【公式】
人気記事ランキング
  1. 最大のお知らせ
  2. 大事なお知らせ
もっと見る
最近更新されたページ
もっと見る
最近更新されたスレッド
もっと見る
人気スレッドランキング
  1. ×スマイル！×【公式】のメモ掲示板
  2. 相談スペース
  3. ×スマイル！×【公式】からみんなに聞きたいこと
  4. お問い合わせ
  5. 宣伝ページ
もっと見る
人気記事ランキング
  1. 最大のお知らせ
  2. 大事なお知らせ
もっと見る
最近更新されたページ
もっと見る
ウィキ募集バナー