CSSコード - ブイズ。【8/30更新】 | ブイズ。

ルール！

使ったら参考→ブイズ。って書いてね！
書いてくれたらCSS載せるページに書いておっけー！
1回目書かなかったのは注意するだけで済ませるけど、
2回目は破った人だけ使用禁止にさせるのでそのつもりで！

注意！

効かない場合あり！（他のCSSが強すぎて効かなかったりするんだって！）
PC（iPad）用あり！（スマホとかだったら効きません）

この大見出しのデザイン

/* 大見出し（*をつけたところ）をニンフィア風のグラデーションにする */
.plugin_minih2, h2 {

   background: linear-gradient(135deg, #ffb7c5 0%, #b3e5fc 100%) !important; /* ピンクから水色のグラデーション */
   color: #4a4a4a !important; /* 文字を読みやすい濃いグレーにする */
   padding: 10px 15px !important; /* 見出しの中に少し余白を作る */
   border-radius: 8px !important; /* 角を丸くして可愛くする */
   border-left: 5px solid #ff7096 !important; /* 左側にアクセントの濃いピンクの線を引く */
   font-weight: bold !important; /* 文字を太字にする */

}/* 中見出し（**をつけたところ）をグレイシア風の涼しい水色にする */
.plugin_minih3, h3 {

   background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%) !important; /* 涼しい薄い水色のグラデーション */
   color: #006064 !important; /* 文字をグレイシアの濃い青緑色にする */
   padding: 8px 12px !important; /* 見出しの中の余白 */
   border-radius: 6px !important; /* 角を少し丸くする */
   border-left: 5px solid #00bcd4 !important; /* 左側に氷の結晶のような鮮やかな水色の線を引く */
   font-weight: bold !important; /* 文字を太字にする */

}

この中見出しのデザイン

/* 中見出し（**をつけたところ）をグレイシア風の涼しい水色にする */
.plugin_minih3, h3 {

   background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%) !important; /* 涼しい薄い水色のグラデーション */
   color: #006064 !important; /* 文字をグレイシアの濃い青緑色にする */
   padding: 8px 12px !important; /* 見出しの中の余白 */
   border-radius: 6px !important; /* 角を少し丸くする */
   border-left: 5px solid #00bcd4 !important; /* 左側に氷の結晶のような鮮やかな水色の線を引く */
   font-weight: bold !important; /* 文字を太字にする */

}

この小見出しのデザイン

/* 小見出し（***をつけたところ）をサンダース風の鮮やかな黄色にする */
.plugin_minih4, h4 {

   background-color: #fffde7 !important; /* 優しい薄黄色の背景 */
   color: #f57f17 !important; /* 文字をサンダースの雷のような濃いオレンジ・黄色にする */
   padding: 6px 10px !important; /* 見出しの中の余白 */
   border-radius: 4px !important; /* 角を少しだけ丸くする */
   border-left: 5px solid #ffd600 !important; /* 左側に強くて鮮やかな電撃イエローの線を引く */
   border-bottom: 1px dashed #ffd600 !important; /* 下側をトゲトゲ感を意識した点線にする */
   font-weight: bold !important; /* 文字を太字にする */

}

水平線のデザイン↓この水平線はサンプル

---

/* 水平線（----を書いたところ）をブラッキー風の黒とゴールドにする */
hr {

   height: 4px !important; /* 線の太さを少し厚めにする */
   background: #1a1a1a !important; /* 基本の線をブラッキーの黒にする */
   border: none !important;
   border-radius: 2px !important;
   position: relative !important;
   margin: 20px 0 !important;

}
/* 線の真ん中にブラッキーのリング（模様）のような黄色いアクセントを入れる */
hr::after {

   content: "" !important;
   position: absolute !important;
   left: 50% !important;
   top: 50% !important;
   transform: translate(-50%, -50%) !important;
   width: 40px !important; /* 黄色いリングの横幅 */
   height: 8px !important; /* 黄色いリングの縦幅 */
   background-color: #ffd600 !important; /* 鮮やかなブラッキーイエロー */
   border-radius: 4px !important;
   box-shadow: 0 0 8px #ffd600 !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;

}

メニューの見出し

/* 7. メニューバーの見出しを確実にイーブイ耳の中風ピンクにする */

#menubar

h2, #menubar h3, #menubar h4,

#side_menu

h2, #side_menu h3, #side_menu h4,
.side_menu h2, .side_menu h3, .side_menu h4,
.side-box h2, .side-box-title {

   background-color: #ffe4e1 !important; /* イーブイの耳の中風の薄いピンク */
   background-image: none !important;    /* 元のデザインの背景色を完全に消す */
   color: #8b5a2b !important;            /* 文字をイーブイの体のような可愛い茶色 */
   padding: 8px 12px !important;         /* 見出しの中の余白 */
   border-radius: 6px !important;         /* 角を丸くしてふんわりさせる */
   border: none !important;              /* 本文用の余計な線をすべて消す */
   font-weight: bold !important;          /* 文字を太字にする */

}

検索ボタン

/* 8. 検索の入力枠を確実にイーブイの茶色にする */
.forum_search input[type="text"],
.forum_search_box input,
.search_input,

#search_word

,
input[type="text"][name="word"],
input[id*="search"] {

   border: 3px solid #8b5a2b !important; /* 3pxのしっかりした茶色い枠線 */
   border-color: #8b5a2b !important;     /* 枠線の色を絶対に固定 */
   border-radius: 6px !important;        /* 角を丸くする */
   background-color: #ffffff !important;  /* 中身を白にする */
   color: #4a3b32 !important;             /* 文字を濃い茶色にする */
   outline: none !important;              /* カチッと押したときの青い線を消す */

}
/* 検索ボタン（虫眼鏡マークなどの背景も茶色にする） */
.forum_search input[type="submit"],
.forum_search_box button,
input[type="submit"][value*="検索"] {

   background-color: #8b5a2b !important; /* ボタンを茶色にする */
   color: #ffffff !important;            /* 文字を白にする */
   border: none !important;
   border-radius: 6px !important;
   font-weight: bold !important;

}

目次の枠

/* 9. 目次をエーフィ風（ミント色背景と紫の点線）にする */
.plugin_contents,
div.contents,
div.ichiran,

#contents_list

/* 目次の中のリンク（文字）も読みやすい濃い紫にする */
.plugin_contents a,
div.contents a {

   color: #7b1fa2 !important;
   font-weight: bold !important;
   text-decoration: none !important;

}
/* 目次の中の文字にマウスを合わせたときはピンクに光る '''/
.plugin_contents a:hover,
div.contents a:hover {

   color: #ff7096 !important;

}
'''

リンクの色

/* プロゼ民wiki リンクカスタマイズ */
a {

   color: #ff69b4 !important;            /* 文字をピンクに変更 */
   text-decoration: none !important;     /* 通常の下線を消去 */
   border-bottom: 2px solid #87ceeb !important; /* 下線を水色で作成 */
   padding-bottom: 1px;                  /* 文字と下線の隙間調整 */

}
/* マウスを乗せたとき（ホバー時）の動き */
a:hover {

   color: #ff1493 !important;            /* 濃いピンクに変化 */
   border-bottom-color: #00bfff !important; /* 濃い水色に変化 */

}

黒い見出しのデザイン

/* 「人気記事ランキング」などの黒い見出しだけをプロゼミの緑に変更 */
.plugin_box_title,
.side-box-title,
div[class*="title"]:not(#b_menu):not(#side_menu) {

   background-color: #5cb85c !important; /* プロゼミのきみどり色 */
   color: #ffffff !important;            /* 文字色を白 */
   border: 3px solid #ffffff !important; /* 白い内枠 */
   outline: 3px solid #5cb85c !important;/* 外側の緑枠 */
   border-radius: 14px !important;       /* 角丸 */
   padding: 8px 12px !important;         /* 余白 */
   font-weight: bold !important;         /* 太字 */
   box-shadow: 0 5px 0 #3e8e41 !important; /* 下側の立体的な影 */
   text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
   margin-bottom: 18px !important;       /* 下との隙間 */

コメントの書き込みボタン

/* @wiki コメント欄の投稿ボタンをブラッキー風に変更 */
input#comment_submit,

#comment_form

input[type="submit"],
.comment_form_submit,
form[id*="comment"] input[type="submit"],
input[type="submit"][value*="投稿"] {

   background-color: #1a1a1a !important; /* ブラッキーの体（深い黒） */
   color: #ffffff !important;            /* 文字は白 */
   border: 3px solid #ffee00 !important; /* 特徴的な模様（鮮やかな黄色） */
   border-radius: 12px !important;       /* 丸みのある角 */
   padding: 8px 20px !important;         /* ボタンのサイズ調整 */
   font-weight: bold !important;         /* 文字を太字に */
   box-shadow: 0 4px 0 #b3a700 !important; /* 黄色い立体的な影 */
   text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
   cursor: pointer;

}
/* 指やマウスを乗せたときはブラッキーの「赤い目」に変化！ */
input#comment_submit:hover,

#comment_form

input[type="submit"]:hover,
.comment_form_submit:hover,
form[id*="comment"] input[type="submit"]:hover {

   background-color: #2b2b2b !important;
   border-color: #ff3b30 !important;     /* 枠線が赤に */
   box-shadow: 0 4px 0 #b3241c !important; /* 影も赤に */

}

コメントの書き込み欄（コメントのボタンと使うのおすすめ！）

/* @wiki コメント欄の全ての入力箱をブラッキー風（黒・黄色の点線）に強制変更 */
div[class*="comment"] input,
div[class*="comment"] textarea,
form[id*="comment"] input,
form[id*="comment"] textarea,
.comment_form input,
.comment_form textarea,

#comment_name

,

#comment_body

/* 入力欄をタップ・クリックした時はブラッキーの赤い目の点線に！ */
div[class*="comment"] input:focus,
div[class*="comment"] textarea:focus,
form[id*="comment"] input:focus,
form[id*="comment"] textarea:focus,
.comment_form input:focus,
.comment_form textarea:focus,

#comment_name

:focus,

#comment_body

:focus {

   border: 3px dashed #ff3b30 !important; /* 赤い点線に変化 */
   background-color: #2b2b2b !important;   /* 背景を少し明るく */
   outline: none !important;

}

箇条書きの・

↓サンプル

/* 箇条書きの小さな四角（・）を、色違いブラッキーの「青い輪っか」に変更 */

#wikibody

ul,
.atwiki-content ul {

   list-style: none !important;        /* 元のちっちゃい四角を消す */
   padding-left: 20px !important;      /* 左側の余白調整 */

}

#wikibody

ul li,
.atwiki-content ul li {

   position: relative !important;

}
/* 箇条書きの先頭に色違いブラッキーの青い模様（〇）を出現させる */

#wikibody

ul li::before,
.atwiki-content ul li::before {

   content: "" !important;
   position: absolute !important;
   left: -18px !important;             /* 〇の位置調整 */
   top: 6px !important;                /* 上下の高さ調整 */
   width: 8px !important;              /* 〇の横幅 */
   height: 8px !important;             /* 〇の縦幅 */
   border: 2px solid #00bfff !important; /* 色違いブラッキーの綺麗な「水色の輪っか」 */
   border-radius: 50% !important;       /* 完全な正円（〇）にする */
   background-color: transparent !important; /* 中は透明（くり抜き） */

}/* 箇条書きの青い輪っか（〇）の中身を水色で塗りつぶす */

#wikibody

ul li::before,
.atwiki-content ul li::before {

   background-color: #00bfff !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;

}