ゆめカフェ

CSSコード

最終更新：2026年07月30日 10:30

Bot(ページ名リンク)

- view

だれでも歓迎！編集

ここではCSSコードやその他色々なコードを追加していきます！！
ぜひ使ってね☆
編集してコピーすれば使えます！！
全部ゆめカフェWikiで使ってるやつなので、
これをこのまま使うとこのWikiみたいになります！！
色を変えるとガラッと雰囲気変わると思う！

CSSコードの使い方

～CSSコードを入力して確認するまで～

①自分が管理人のWikiを開く（この時点で自分のWikiじゃない人は諦めるしかありません。）
②右上にある管理画面を開く
③デザインを開く
④CSSカスタマイズをポチッとな☆
⑤デザインテンプレートのCSSを無効化はチェックしない
⑥以下のコードをコピペする
⑦設定を保存を押す
⑧すぐどうなったか確認したい場合は右上にあるご利用ガイドの左にある、自分が管理人のWikiの名前を押す
⑨トップページか、管理画面を押したページに戻る

水平線

紫色にする場合です。

/* 水平線（区切り線）の色を優しい薄紫色にする */
hr {

   border: none !important;                 /* 元の線を消す */
   border-bottom: 2px solid #b39ddb !important; /* 新しい薄紫色の線（太さ2px） */
   margin: 20px 0 !important;               /* 上下のすき間（余白） */
   height: 0 !important;

}

大見出し（*でできるやつ）

/* 【大見出し（ゆめカフェとは？の部分）】文字は紫、背景はさらに薄い紫（単色）、角が丸い */
h2.atwiki-heading-h2, .atwiki-heading-h2, .post h2, .entry h2, h2[id^="id_"] {

   color: #6a4c93 !important;      /* 文字：柔らかい紫 */
   background: #f8f1ff !important; /* 背景：さらに薄い紫 */
   border-left: 5px solid #b39ddb !important;  /* 左側の線：優しい薄紫 */
   border-bottom: none !important; /* 下線はなし */
   border-radius: 12px !important; /* 角を丸くする */
   padding: 10px 15px !important;  /* 内側の余白 */
   font-size: 20px !important;     /* 文字の大きさ：20px */

}

中見出し（**でできるやつ）

/* 【中見出し（概要の部分）】文字は薄いピンク、背景は白、左側の棒と下に薄いピンクのアンダーライン */
h3.atwiki-heading-h3, .atwiki-heading-h3, .post h3, .entry h3, h3[id^="id_"] {

   color: #ff8da1 !important;      /* 文字：優しい薄めのピンク */
   background: #ffffff !important; /* 背景：白 */
   border-left: 5px solid #ffb6c1 !important;   /* 左側の棒：ふんわり薄いピンク */
   border-bottom: 3px solid #ffb6c1 !important; /* 下のアンダーライン：ふんわり薄いピンク */
   border-top: none !important;    /* 上の線を消す */
   border-right: none !important;  /* 右の線を消す */
   border-radius: 0px !important;  /* 角丸なし */
   padding: 5px 0px 5px 10px !important; /* 左側の余白 */
   font-size: 19px !important;     /* 文字の大きさ：19px */

}

小見出し（***でできるやつ）

/* 【小見出し（日付の部分）】大きさはそのまま、文字の色だけ薄い水色のまま */
h4.atwiki-heading-h4, .atwiki-heading-h4, .post h4, .entry h4, h4[id^="id_"] {

   color: #87ceeb !important;      /* 文字：薄い水色 */
   background: none !important;    /* 背景なし */
   border: none !important;        /* 線なし */
   padding: 0 !important;          /* 余白なし */

}

リンクの色変える

/* 【リンクの色】文字を少し淡い薄紫にする */
a, .post a, .entry a, #sidebar a, #sidebar2 a, #menu a {

   color: #8e7cc3 !important;      /* 文字：少し淡くて優しい薄紫 */
   text-decoration: none;

}
a:hover, .post a:hover, .entry a:hover {

   color: #b39ddb !important;

}

今何人見てるか

スマちゃんに教えてもらいました！

現在このページは-人が見ています！

カレンダー

前月					翌月
日	月	火	水	木	金	土

全部のCSSコードコピペ

   color: #6a4c93 !important;      /* 文字：柔らかい紫 */
   background: #f8f1ff !important; /* 背景：さらに薄い紫 */
   border-left: 5px solid #b39ddb !important;  /* 左側の線：優しい薄紫 */
   border-bottom: none !important; /* 下線はなし */
   border-radius: 15px !important; /* 角を丸くする */
   padding: 10px 15px !important;  /* 内側の余白 */
   font-size: 30px !important;     /* 文字の大きさ：30px */

}

   color: #ff8da1 !important;      /* 文字：優しい薄めのピンク */
   background: #ffffff !important; /* 背景：白 */
   border-left: 5px solid #ffb6c1 !important;   /* 左側の棒：ふんわり薄いピンク */
   border-bottom: 3px solid #ffb6c1 !important; /* 下のアンダーライン：ふんわり薄いピンク */
   border-top: none !important;    /* 上の線を消す */
   border-right: none !important;  /* 右の線を消す */
   border-radius: 0px !important;  /* 角丸なし */
   padding: 5px 0px 5px 10px !important; /* 左側の余白 */
   font-size: 20px !important;     /* 文字の大きさ：20px */

}

/* 【小見出し（日付の部分）】文字の色を薄い水色にする */
h4.atwiki-heading-h4, .atwiki-heading-h4, .post h4, .entry h4, h4[id^="id_"] {

   color: #87ceeb !important;      /* 文字：薄い水色 */
   background: none !important;    /* 背景なし */
   border: none !important;        /* 線なし */
   padding: 0 !important;          /* 余白なし */
   font-size: 18px !important;     /* 文字の大きさ：18px */

}

/* 【リンクの色】文字を少し淡い薄紫にする */
a, .post a, .entry a, #sidebar a, #sidebar2 a, #menu a {

   color: #B6B8FF !important;      /* 文字：少し淡くて優しい薄紫 */
   text-decoration: none;

}
a:hover, .post a:hover, .entry a:hover {

   color: #b39ddb !important;

}

/* 【サイドバーすべて】背景を薄紫にする */

#sidebar

h1, #sidebar h2, #sidebar h3, #sidebar2 h1, #sidebar2 h2, #sidebar2 h3,

#menu

h1, #menu h2, #menu h3, .sidebox h1, .sidebox h2, .sidebox h3, .menu_title, .sidebox .title,
div[class*="sidebar"] h2, div[class*="menu"] h2, h2.title, .plugin_recentcreated h3 {

   color: #ffffff !important;      /* 文字：白 */
   background: #DABFFF !important; /* 背景：薄紫 */
   border: none !important;         
   border-radius: 12px !important;  
   padding: 8px 12px !important;   
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1) !important;

}

/* 水平線（区切り線）の色を優しい薄紫色にする */
hr {

   border: none !important;                 /* 元の線を消す */
   border-bottom: 2px solid #E2D0FF !important; /* 新しい薄紫色の線（太さ2px） */
   margin: 10px 0 !important;               /* 上下のすき間（余白） */
   height: 0 !important;

}

コメントの返信ボタンのマーク変更

 /* ==================================================
  ★追加修正★ あらゆるコメントプラグインの〇を絶対に消し去る設定（色変更＆特大サイズ版）
  ================================================== */

.comment_form input[type="radio"],

input[type="radio"],
.atwiki_comment_form input[type="radio"],
div[id^="atwiki-comment"] input[type="radio"],
[class*="comment"] input[type="radio"] {

   -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important; /* 元の丸い見た目を完全に消す */
   
   position: relative !important;
   display: inline-block !important;
   width: 36px !important;   /* ← 28pxから36pxに特大アップ！ */
   height: 36px !important;  /* ← 28pxから36pxに特大アップ！ */
   background: transparent !important;
   border: none !important; 
   box-shadow: none !important;
   cursor: pointer !important;
   vertical-align: middle !important;
   margin: 0 4px 2px 4px !important;

}

/* 2. まだ選択されていない状態：『☆』（中抜きお星様） */
.comment_form input[type="radio"]::before,

input[type="radio"]::before,
.atwiki_comment_form input[type="radio"]::before,
div[id^="atwiki-comment"] input[type="radio"]::before,
[class*="comment"] input[type="radio"]::before {

   content: "☆" !important; 
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(1.0);
   color: #6F6DFF !important; /* 選択前：夜空のような青色 */
   font-size: 36px !important; /* ← キラキラ文字もドカンと36pxに！ */
   font-weight: normal !important;
   line-height: 1 !important;

}

/* 3. マウスを乗せた（ホバー）時の色変更 */
.comment_form input[type="radio"]:hover::before,

input[type="radio"]:hover::before,
.atwiki_comment_form input[type="radio"]:hover::before,
div[id^="atwiki-comment"] input[type="radio"]:hover::before,
[class*="comment"] input[type="radio"]:hover::before {

   color: #A3DCFF !important; /* ホバー時：水色 */

}

/* 4. チェック（選択）された状態：『★』（塗りつぶしお星様） */
.comment_form input[type="radio"]:checked::before,

input[type="radio"]:checked::before,
.atwiki_comment_form input[type="radio"]:checked::before,
div[id^="atwiki-comment"] input[type="radio"]:checked::before,
[class*="comment"] input[type="radio"]:checked::before {

   content: "★" !important; /* 選択されたら塗りつぶし */
   color: #FFFCB0 !important; /* 選択後：星空の黄色 */
   transform: translate(-50%, -50%) scale(1.1) !important;

}

/* コメントの「書き込む」ボタン（グレーの立体影） */
input[type="submit"], .atwiki-comment-submit, input[value="書き込む"] {

   position: relative !important;
   top: 0 !important;                 /* 通常時の縦位置 */
   color: #ffffff !important;         /* 文字の色：白 */
   font-weight: bold !important;      /* 文字を太く */
   font-size: 15px !important;        /* 文字の大きさ */
   padding: 10px 24px !important;     /* ボタンの内側の余白 */
   border: none !important;           /* 周りの余計な枠線を消す */
   cursor: pointer !important;
   border-radius: 8px !important;     /* 角丸 */

   /* 上が紫色、下がピンク色のグラデーション */
   background: linear-gradient(to bottom, #b39ddb 0%, #ffb7c5 100%) !important;
   
   /* ★通常時：グレーの立体的な土台（3px）と、下に広がる柔らかい影 */
   box-shadow: 0 3px 0px #b0b0b0, 0 4px 6px rgba(0,0,0,0.15) !important; 
   
   /* 動きを滑らかにする設定 */
   transition: all 0.05s ease !important;

}

/* ボタンに指を乗せたとき */
input[type="submit"]:hover, .atwiki-comment-submit:hover {

   filter: brightness(1.03) !important;

}

/* ★ボタンを押した瞬間、カチッとグレーの影に沈み込む */
input[type="submit"]:active, .atwiki-comment-submit:active {

   top: 3px !important;               /* 土台の分（3px）だけ下に下げる */
   /* ★押したとき：立体的な土台を無くして、ピタッと地面についた影にする */
   box-shadow: 0 0px 0px #b0b0b0, 0 1px 2px rgba(0,0,0,0.1) !important;

}

/* 記事メニュー */
.atwiki-list-title {

   background-color: #E2D0FF !important;
   border: 1px solid #D3B9FF !important;
   border-left: 6px solid #C1E8FF !important;
   border-radius: 2px;

}

/* ページ全体の普通の文字（本文）の大きさと色を変更する */
body, p, td, th, li, .post-body, .entry-content {

   font-size: 18px !important;  /* 文字の大きさは18px*/
   color: #DDC8FF !important;     /* ★文字の色は薄紫色で */
   line-height: 1.7 !important; /* 行と行の間のスキマ */

}

/* ページの一番上のタイトル文字を変更する */

CSSコードの使い方
- - ～CSSコードを入力して確認するまで～
目次
水平線
大見出し（*でできるやつ）
中見出し（**でできるやつ）
小見出し（***でできるやつ）
リンクの色変える
今何人見てるか
カレンダー
全部のCSSコードコピペ
コメントの返信ボタンのマーク変更

h1,
.page-title,
h1.title,

#container

h1 {

   font-size: 35px !important;  /* ★タイトルの文字の大きさ */
   color: #C7A5FF !important;   /* ★タイトルの文字の色は紫色 */
   font-weight: bold !important; /* 文字を太くする */
   border-bottom: 2px solid #BADBFF !important; /* タイトルの下に水色の線を引く */
   padding-bottom: 8px !important;

}

/* ページ内のすべてのリンクを強制的に太文字にする */
a, a:link, a:visited, a:hover, a:active, .atwiki-comment-name a {

   font-weight: 700 !important; /* ★bold(700)を指定 */

}

タグ：

CSSコード

+ タグ編集

「CSSコード」をウィキ内検索

記事メニュー

他のページ

↪︎ぜひあなたの意見を書いてくださると嬉しいです！！

CSSコード

↪︎コピペ自由！！

アンケート

↪︎ぜひ協力してください！！！

他のWikiさん

載せてよかったのかな…？
でもこれで気軽に行き来できると思う！

遥空の日記(？)

7/22

いや〜Wiki作っちゃった！
スマイルちゃんのWiki参考にしてま〜す

7/23

ただいまスパムになってて、
どこのWikiも編集したり
コメントできません！
なので、あとで
スパムにならなくなった時に
編集したりコメント返信します！
ごめんね🙏

7/24

スパムにまだなってるよぉ😭
でも（自分のWikiは）編集できるってどういうこと！？
まだまだ謎な、@WIKI☆

7/25

スパムから解放されどー！！
スパムめんどすぎる、、

色々とCSSコードをいじりました☆
うちの阿保Geminiがね〜
やってくれはするけど反応しないとか、、
ふうっ☆
疲れたぜぃ

7/26

遥空のビジュをめちゃかわにした！！

7/27

WikiってたのしーからYouTubeとか最近見れてない、、！
見たいんだけどねー💦

7/29

雷リアタイ配信がシェアされました！
愛菜が途中参戦なのは、
ほんとに「配信やるー！」って言われたからw
でも私は電話できないので、
そこら辺は1人2役とか、
言いたいこと愛菜に聞くとか
やってました！
ぜひ見てねー！！

随時更新中！

記事メニュー2

現在このページは-人が見ています！

カレンダーですっ

今の時間、日付、曜日っ！↓

2026-07-30 12:38:50 (Thu)

前月					翌月
日	月	火	水	木	金	土

このWikiに対して意見あれば

意見を言う前に

これを読んでほしい
トップページも読んでくれたら神。

すごっ - 結希【ふわ☆すた】
…コピペしてもできない…涙 AIに相談してもでたらめなやつしか出てこなくてさ⋯涙　ふわ☆すた - 結希【ふわ☆すた】
- ふわ☆すた【公式】のWikiがってことかな？ - ゆめカフェ
- CSSコードっていうのがあるから、ゆめカフェWikiからコピペして、色をibisPaintとかのコードをコピペして変えると自分好みの色にできるよ！ - ゆめカフェ
コメントと普通の文字の色を別の色にしたかったんだけどAIがお馬鹿さんなせいで全然できない☆ - ×スマイル！×【公式】

名前:

人気記事ランキング

最近更新されたページ

人気記事ランキング

最近更新されたページ

全体掲示板スレッドランキング

昨日アクセスの多かった掲示板スレッドランキングです。話題のスレッドを見に行こう！

急上昇Wikiランキング

急上昇中のWikiランキングです。今注目を集めている話題をチェックしてみよう！

新規Wikiランキング

最近作成されたWikiのアクセスランキングです。見るだけでなく加筆してみよう！

人気Wikiランキング

atwikiでよく見られているWikiのランキングです。新しい情報を発見してみよう！

全体ページランキング

最近アクセスの多かったページランキングです。話題のページを見に行こう！

CSSコード

CSSコードの使い方

～CSSコードを入力して確認するまで～

目次

水平線

大見出し（*でできるやつ）

中見出し（**でできるやつ）

小見出し（***でできるやつ）

リンクの色変える

今何人見てるか

カレンダー

全部のCSSコードコピペ

コメントの返信ボタンのマーク変更

他のページ

他のWikiさん

遥空の日記(？)

7/22

7/23

7/24

7/25

7/26

7/27

7/29

随時更新中！

カレンダーですっ

2026-07-30 12:38:50 (Thu)

このWikiに対して意見あれば

意見を言う前に