CSSコード - ぐれーぷ。 | ぐれーぷ。

使うときのルール！

• 使ったら参考→ぐれーぷ。って書いてね！
• 効かない時もあるので注意！

---

目次

• 大見出し（紫）
• 中見出し（緑）
• 小見出し（黒）
• リンクの文字（緑、タップしたら紫）
• メニューの点線（点線は紫、背景は緑）
• コメントの書き込みボタン（紫）
• 文字のフォント（ゆめカフェちゃん参考）

---

大見出し（紫）

h2 {

   background-color: #f3ebf7 !important; /* 薄紫の背景色 */
   border-left: 6px solid #6f42c1 !important; /* 左の濃い紫の縦線 */
   border-radius: 4px !important; /* 👈 角をちょっとだけ丸くする（数字を大きくするともっと丸くなります） */
   padding: 10px 15px !important; /* 文字の周りの余白 */
   color: #000000 !important; /* 文字の色 */

}

中見出し（緑）

h3 {

   background-color: #eef5f0 !important; /* 薄い緑色の背景（大見出しと合わせた優しい色） */
   border-left: 6px solid #4a7c59 !important; /* 左のぶどうの葉っぱ色の縦線 */
   border-radius: 4px !important; /* 大見出しとお揃いのちょっと角丸 */
   padding: 8px 12px !important; /* 文字の周りの余白 */
   color: #333333 !important; /* 文字の色 */

}

小見出し（黒）

h4 {

   font-size: 1.17em !important; /* 中見出し（h3）と同じ文字の大きさ */
   background-color: #ffffff !important; /* 背景は白 */
   border: 2px solid #333333 !important; /* クッキリさせる黒い外枠の線 */
   border-radius: 6px !important; /* 他の見出しとお揃いの角丸 */
   padding: 8px 12px !important; /* 文字の周りの余白 */
   color: #333333 !important; /* 文字の色 */
   
   /* 👇 ここで右と下に黒い影をつけて立体（3D）に見せています */
   box-shadow: 4px 4px 0px #333333 !important; 
   margin-bottom: 15px !important; /* 下の文字と被らないための余白 */

}

リンクの文字（緑、タップしたら紫）

/* 通常のリンク（本文・メニュー）を緑色にするコード */

#wikibody

a, #wikibody a:link, #wikibody a:visited,
.atwiki_menubar a, #menubar a {

   color: #4a7c59 !important;
   text-decoration: none;

}

#wikibody

a:hover, .atwiki_menubar a:hover, #menubar a:hover {

   color: #8250df !important;
   text-decoration: underline;

}

メニューの点線（点線は紫、背景は緑）

/* メニュー全体の背景を薄い黄緑にして紫の点線で囲む */
.atwiki_menubar,

#menubar

,
td.menu,
div[id*="menu"] {

   background-color: #f1f9f3 !important; /* 薄い黄緑色の背景 */
   border: 3px dashed #6f42c1 !important; /* 3pxの太さの紫の点線 */
   border-radius: 8px !important; /* 角を少し丸くして可愛く */
   padding: 15px !important; /* 枠線と中の文字の間の余白 */
   box-sizing: border-box !important;

}h3 {

   background-color: #eef5f0 !important; /* 薄い緑色の背景（大見出しと合わせた優しい色） */
   border-left: 6px solid #4a7c59 !important; /* 左のぶどうの葉っぱ色の縦線 */
   border-radius: 4px !important; /* 大見出しとお揃いのちょっと角丸 */
   padding: 8px 12px !important; /* 文字の周りの余白 */
   color: #333333 !important; /* 文字の色 */

}

コメントの書き込むボタン（紫）

/* コメントエリア全体のボタンを強制的に紫色にする */

#wikibody

input[type="submit"],

#wikibody

input[type="button"],
.wcomment input,
.comment input,
div[id*="comment"] input {

   background: #6f42c1 !important; /* 背景を濃い紫に */
   background-color: #6f42c1 !important; /* 二重で紫を指定 */
   color: #ffffff !important; /* 文字の色を白に */
   border: none !important; /* 枠線を消す */
   border-radius: 4px !important; /* 角を丸く */
   padding: 4px 10px !important; /* 余白 */
   font-size: 12px !important;
   cursor: pointer !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;

}