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

×スマイル！×【公式】

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

最終更新：

nknie

- view
だれでも歓迎！ 編集

目次

CSSコード（コード通りにならなかったところもあります)

コピー自由！下の文字は全てコードです！

この見出しのデザイン（中見出しでも大見出しでも同じデザイン）

/* 中見出し（** や ***）のスタイル */
h2, h3 { 
   color: #ffffff !important; /* 文字：白 */
   background-color: #87ceeb !important; /* 背景：水色 */
   border: none !important; /* 一度元々の枠線を全部消す */
   border-left: 6px solid #ffb6c1 !important; /* 左の縦線：少し太めの薄ピンク */
   padding: 8px 12px !important; /* 内側の余白 */
   border-radius: 10px; /* 角を少し丸くする設定 */
}

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

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

リンクの色変更（普通はピンク、タップしたら水色）

/* リンクの文字色（修正版：ずっと下線を残す） */
a { 
   color: #ffb6c1 !important; /* リンク：少し薄めのピンク */
   text-decoration: underline !important; /* 下線をずっとつける */
}
a:hover { 
   color: #87ceeb !important; /* マウスを乗せた時の色：水色に変更 */
   text-decoration: underline !important; /* マウスを乗せた時も下線を残す */

水平線の色変更（薄紫色なのでパステルモチーフな人におすすめ！）

/* 水平線（----）のスタイル */
hr { 
   border: none !important;
   border-top: 2px solid #e0b0ff !important; /* 水平線：薄紫 */
   margin: 20px 0; /* 上下の余白 */
}
例↓

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


★ハチワレ風☆ 【書き込む（送信）ボタン】ピンクハチワレ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;               /* ★フチを薄紫から水色に変更！★ */
}


記事メニューなどのデザイン

/* 記事メニュー */
.atwiki-list-title { 
   background-color: #e0b0ff !important;
   border: 1px solid #e0b0ff !important;
   border-left: 6px solid #ffb6c1 !important;
   border-radius: 2px;
}

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

 /* ==================================================
  ★追加修正★ あらゆるコメントプラグインの〇を絶対に消し去る設定（色変更＆特大サイズ版）
  ================================================== */
.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: #87ceeb !important; /* 選択前：可愛い水色 */
   font-size: 36px !important; /* ← キラキラ文字もドカンと36pxに！ */
   font-weight: normal !important;
   line-height: 1 !important;
}

/* 3. マウスを乗せた（ホバー）時の色変更 */
.comment_form input[type="radio"]:hover::before,
pluginエラー: pcommentは1ページに3つしか使えません。
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: #e0b0ff !important; /* ホバー時：薄紫 */
}

/* 4. チェック（選択）された状態：『✦』（塗りつぶしキラキラダイヤ） */
.comment_form input[type="radio"]:checked::before,
pluginエラー: pcommentは1ページに3つしか使えません。
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: #ffb6c1 !important; /* 選択後：可愛いピンク */
   transform: translate(-50%, -50%) scale(1.1) !important;
}

×スマイル！×【公式】のCSSコードを全部使いたい場合（エラーになってるのでここだけ編集画面にして、コピーしてください）

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

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

/* ================================================== 
  ★シンプル版（隙間なし）★ リンクの設定
  ================================================== */
a { 
   color: #ffb6c1 !important; /* リンク：少し薄めのピンク */
   text-decoration: underline !important; /* 下線をずっとつける */
   font-size: 1.1em !important; /* 文字のサイズを少し大きく */
   font-weight: bold !important; /* 太字にしてクッキリ見やすく */
}
a:hover { 
   color: #87ceeb !important; /* マウスを乗せた時の色：水色に変更 */
   text-decoration: underline !important; /* マウスを乗せた時も下線を残す */
}

/* 水平線（----）のスタイル */
hr { 
   border: none !important;
   border-top: 2px solid #e0b0ff !important; /* 水平線：薄紫 */
   margin: 20px 0; /* 上下の余白 */
}

/* 本文の箇条書きの文字・点・中の要素をすべて赤にする */
#atwiki
  • body ul li, #atwiki-body ol li,
.atwiki_body ul li, .atwiki_body ol li,
#atwiki
  • body ul li *, #atwiki-body ol li * {
   color: #ff0000 !important;
}

/* 箇条書きの「点（・）」や「数字」も赤にする */
#atwiki
  • body ul li::marker, #atwiki-body ol li::marker,
.atwiki_body ul li::marker, .atwiki_body ol li::marker { 
   color: #ff0000 !important;
}

/* 本文の箇条書きの中にあるリンクの色だけはピンクで守る */
#atwiki
  • body ul li a, #atwiki-body ol li a,
.atwiki_body ul li a, .atwiki_body ol li a { 
   color: #ffb6c1 !important;
}

/* ================================================== 
  【超重要】オンライン人数の行をカラフルに可愛くする設定
  ================================================== */
p:has(span.atwiki_online_user),
div:has(span.atwiki_online_user),
li:has(span.atwiki_online_user) { 
   color: #ff69b4 !important; /* 「現在、」をピンクにする */
}
span.atwiki_online_user { 
   color: #e0b0ff !important; /* 数字：薄紫 */
}
span.atwiki_online_user ~ span,
span.atwiki_online_user ~ font,
span.atwiki_online_user ~ strong { 
   color: #87ceeb !important;
}
p:has(span.atwiki_online_user) { 
   font-weight: bold;
}

/* ================================================== 
  ★天才のアイデア★ 中見出し＆記事メニュー達をお揃いの立体3Dボックスにする
  （共通のデザイン設定をここにギュッとセットにしたよ！）
  ================================================== */
h1, h2, h3, h4, h5, h6, #header h1, #sitename,
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title { 
   border: none !important; /* 元の線をリセット */
   border-left: 6px solid #ffb6c1 !important; /* 左の縦線：薄ピンク */
   display: block !important; /* 全体を立体的な箱にする */
   box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1) !important; /* 斜め右下のクッキリ立体影 */
   padding: 10px 15px !important; /* ぷっくりした余白 */
   border-radius: 4px !important; /* はみ出さない絶妙な角丸 */
   position: relative !important;
   width: 100% !important; /* 横幅いっぱいにのびのび広げる */
   box-sizing: border-box !important;
}

/* それぞれの固有の背景色だけを個別に指定 */
h1, h2, h3, h4, h5, h6, #header h1, #sitename { 
   background-color: #87ceeb !important; /* 普通の中見出しの背景：水色 */
   margin-bottom: 15px !important;
}
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title { 
   background-color: #e0b0ff !important; /* 記事メニュー達の背景：薄紫 */
   margin-bottom: 0px !important; /* 下の水色部分とピッタリくっつける */
   overflow: hidden !important; /* はみ出し隠しのお守り */
}

/* ================================================== 
  ★ふちどり★ サイト名と中見出しの文字だけをピンクでふちどる設定
  ================================================== */
body h1, body h2, body h3, body h4, body h5, body h6,
#header
h1, #header h1 a, #sitename, #sitename a,
.atwiki-content h3, #atwiki-body h3, #menubar h3, #side h3 { 
  color: #ffffff !important; /* 文字の色は白 */
  text-decoration: none !important; /* サイト名のリンク下線を消す */
  text-shadow: 
      -2px -2px 0 #ffb6c1,  
       2px -2px 0 #ffb6c1,
      -2px  2px 0 #ffb6c1,  
       2px  2px 0 #ffb6c1,
      -2px  0px 0 #ffb6c1,  
       2px  0px 0 #ffb6c1,
       0px -2px 0 #ffb6c1,  
       0px  2px 0 #ffb6c1 !important; /* 文字の周りにピンクのフチ */
}

/* ================================================== 
  ★記事メニュー＆記事メニュー2専用★ 白文字に水色のふちどりをする設定
  ================================================== */
.atwiki-list-title, .atwiki-list2-title, .atwiki_list2_title { 
  color: #ffffff !important; /* 文字の色は白 */
  text-shadow: 
      -2px -2px 0 #87ceeb,  
       2px -2px 0 #87ceeb,
      -2px  2px 0 #87ceeb,  
       2px  2px 0 #87ceeb,
      -2px  0px 0 #87ceeb,  
       2px  0px 0 #87ceeb,
       0px -2px 0 #87ceeb,  
       0px  2px 0 #87ceeb !important; /* 文字の周りに水色のフチ */
}

/* ================================================== 
  ★広々版★ 記事メニュー達の下の中身部分をうっすーい水色にする設定
  ================================================== */
.atwiki-list-body, .atwiki_list_body, .atwiki-list-title + ul, div:has(> .atwiki-list-title) ul,
.atwiki-list2-body, .atwiki_list2_body, .atwiki-list2-title + ul, div:has(> .atwiki-list2-title) 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; /* 横幅を100%（広め）に固定 */
   max-width: 100% !important;
   box-sizing: border-box !important;
}

/* ================================================== 
  ★大成功版★ コメントボタン設定コード（斜め影＆ゆっくり沈む＆サイズUP仕様）
  ================================================== */
input[type="button"], input[type="submit"],
.comment_form input[type="button"], .comment_form input[type="submit"],
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="button"], #pcomment input[type="submit"] { 
   -webkit-appearance: none;
   appearance: none;
   background-color: #e0b0ff !important; /* ボタン背景：薄紫 */
   background: #e0b0ff !important;
   color: #ffffff !important;            /* ボタン文字：白 */
   border: 2px solid #ffb6c1 !important; /* ボタンのフチ：ピンク */
   border-radius: 24px !important;       /* 大きさに合わせて角丸も少しUP */
   font-weight: bold !important;
   padding: 8px 24px 6px 24px !important; 
   font-size: 16px !important;
   border-bottom: 4px solid #87ceeb !important; /* 底の線：水色 */
   cursor: pointer;
   box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1) !important; /* 影の角度を斜め右下に */
   transition: all 0.3s ease !important; /* ゆっくりなめらかに動く設定 */
}

/* コメントボタンをポチッと押したときの動き */
input[type="button"]:hover, input[type="submit"]:hover,
.comment_form input[type="button"]:hover, .comment_form input[type="submit"]:hover,
pluginエラー: pcommentは1ページに3つしか使えません。
input[type="button"]:hover, #pcomment input[type="submit"]:hover { 
   transform: translate(2px, 2px) !important; 
   box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1) !important; /* 影も半分縮む */
}

/* ================================================== 
  ★大成功コード★ コメント返信の特大キラキラダイヤボタン
  ================================================== */
.comment_form input[type="radio"], #pcomment 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;   
   height: 36px !important;  
   background: transparent !important; /* 背景透明 */
   border: none !important; 
   box-shadow: none !important;
   cursor: pointer !important;
   vertical-align: middle !important;
   margin: 0 4px 2px 4px !important;
}

/* 1. まだ選択されていない状態：絶対に水色の『✧』（中抜きダイヤ・36px） */
.comment_form input[type="radio"]:not(:checked)::before, #pcomment input[type="radio"]:not(:checked)::before, .atwiki_comment_form input[type="radio"]:not(:checked)::before,
div[id^="atwiki-comment"] input[type="radio"]:not(:checked)::before, [class*="comment"] input[type="radio"]:not(:checked)::before { 
   content: "✧" !important;
   font-size: 36px !important; /* 記号の大きさを36pxに固定 */
   color: #87ceeb !important;  /* 塗りつぶされていない水色 */
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   line-height: 1 !important;
}

/* 2. タップされて選択された状態：ピンク色に塗りつぶされた『✦』（36px） */
.comment_form input[type="radio"]:checked::before, #pcomment 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;
   font-size: 36px !important; /* 記号の大きさを36pxに固定 */
   color: #ffb6c1 !important;  /* ピンク色に塗りつぶし */
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   line-height: 1 !important;
}

タグ：

+ タグ編集
  • タグ：
タグの更新に失敗しました
エラーが発生しました。ページを更新してください。
ページを更新
「×スマイル！×【公式】のCSSコード」をウィキ内検索
最近更新されたスレッド
    +新規スレッドを作成する
    人気記事ランキング
    1. ファンア描いてほしい人集まれ〜！
    2. 作品一覧
    3. ×スマイル！×【公式】のメンバー立ち絵
    4. お友達紹介！
    5. ぽこぽけやってる人集まれ〜！
    6. ×スマイル！×【公式】のCSSコード
    7. お知らせ
    8. 美麗言葉辞典
    9. ×スマイル！×【公式】の秘密の日記
    10. 参考元
    もっと見る
    最近更新されたページ
    もっと見る
    ウィキ募集バナー