深みCSSに嵌れ…
このツールは簡単なCSSテーマを作成するためのものです。更なるwikidotマジックを知りたいならば、下記のページをチェックしてみましょう。
- 高度なフォーマットとあなた
— byDrMagnus
- SCPスタイルリソース
— byShaggydredlocks
- ListPagesの魔法とあなた
— byCroquembouche
— byRounderhouse
- Wiki構文
— byghostchibi
CSSテーマ作成ツール
Wikidotにサインインしてください…
このツールは自身の記事のテーマを変えてみたい人のために作られています。あなたは使ってみたいですか？では、レッツゴー！
使う色を作成する
- » カラーピッカー&サンプル
"カラーピッカー&サンプル"で、あなただけのオリジナルカラーを作れます。
以下のステップに従ってください。
(1) 「この色を使いたい！」
(2) 更新をクリック
(3) フォームを選び、ピッカーの値を代入をクリック
サイトのタイトルを"SCP財団"から変更する
» ヘッダー » 疑似タイトル » タイトル (div#header h1 a:before)
注: "タイトル"フォームを入力しない場合、"color"並びに"text-shadow"フォームは機能しません。
サイトのサブタイトルを"確保、収容、保護"から変更する
» ヘッダー » 疑似タイトル » サブタイトル (div#header h2 span:before)
注: "サブタイトル"フォームを入力しない場合、"color"並びに"text-shadow"フォームは機能しません。
ヘッダーのロゴを 変更する
» ヘッダー » logo (div#header)
ヘッダーの背景画像を 変更する
» ヘッダー » div#container-wrap
リンクの色を変更する
» 通常オプション » a (リンク) color
通常の文字色を変更する
» 通常オプション » body » text color
通常の背景色を変更する
» 通常オプション » body » background
見出し要素の色を変更する
» 通常オプション » 見出し要素 » color
注: "h1のみ"あるいは"すべて"(h1, h2, h3, h4, h5, h6)を選択できます。
標準フォントを変更する
- : » 通常オプション » font » @import (Google font)
- : » 通常オプション » body » font-family
1. https://fonts.google.com/に移動する。
2. フォントを選ぶ。
フォントを選んでください
3. "@import url('https://fonts.googleapis.com/css?family=XXXXX');"をコピーし、"α"に貼り付ける。
"<style>"並びに"</style>"を除いて
4. "'<あなたのフォント名>', <総称ファミリ名>1"をコピーし、"β"に貼り付ける。
"font-family:"並びに";"を除いて
見出し要素のフォントを変更する
» 通常オプション » font » @import (Google font)
» 通常オプション » 見出し要素 » font-family
注: 詳しくは"標準フォントを変更する" (4.)をチェックしてください。
サイドバーの色を変更する
» サイドバー » div.side-block » background
サイドバーの見出しの色を変更する
» サイドバー » div.side-block » color (div.side-block div.heading)
サイドバーボタンの色を変更する
» サイドバー » サイドバーボタン » color
タブの背景色を変更する
» タブ » div.yui-content » background
タブのセレクタの色を変更する
» タブ » 通常のセレクタ
» タブ » ホバー中のセレクタ
» タブ » 選択中のセレクタ
選択中/ホバー中/通常のセレクタ
インターウィキの色を調整する
» インターウィキ » div.scpnet-interwiki-wrapper » filter
注: 更なる情報については、" tips4: インターウィキフィルター"タブを確認してください。
評価モジュールの色を変更する
» 評価モジュール » background
» 評価モジュール » color
text-shadow
<offset-x>, <offset-y>: 必須。これらの <length> 値はテキストに対する影のオフセットを指定します。 <offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの真後ろに配置されますが、 <blur-radius> の効果により一部だけが見えるかもしれません。
<length>2
<blur-radius>: 省略可。これは <length> 値です。指定されなければ、既定では 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。
<length>2
<color>: 省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。
<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>3 | currentcolor | <deprecated-system-color>
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y*/
/* デフォルトのcolor並びにblur-radius */text-shadow: 5px 10px;
text-shadow - CSS: Cascading Style Sheets | MDN
by Mozilla Contributors
CC-BY-SA 2.5
box-shadow
<inset>キーワードを除けば、"text-shadow"とほぼ同じです。
<inset>: 指定されていない場合（デフォルト）、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
inset キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 inset な影は背景の上、境界や内容の下に描画されます。inset
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* カンマで区切れば複数の影を適用できます */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
box-shadow - CSS: Cascading Style Sheets | MDN
by Mozilla Contributors
CC-BY-SA 2.5
border
<width>: 境界線の太さを設定します。指定されなかった場合は既定値の medium になります。
<length>2 | thin | medium | thick
<style>: 境界線の種類を設定します。指定されなかった場合は既定値の none になります。
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color>: 境界線の色を設定します。指定されなかった場合は既定値の currentcolor になります。
<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color>3 | currentcolor | <deprecated-system-color>
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
border - CSS: Cascading Style Sheets | MDN
by Mozilla Contributors
CC-BY-SA 2.5
| H | S | V |
|---|---|---|
| 355deg | 100% | 73% |
| hue-rotate | saturate | / |
| 0deg | 0% | 100% |
| / | / | brightness |
| … | ||
| … | ||
| filter: | hue-rotate(0deg) saturate(100%) — |
|
"How to adjust Interwiki color?"
a
注1: 上記のツールで計算できるのは大雑把な値のみです。
注2: side-blockの色がモノトーン(#ffffff, #DCDCDC, etc.)ではない場合、"第三法則テーマ"(#E2E4E7)のように、この手法では上手く対応できません。
注3: hue-rotate(-70deg) = hue-rotate(290deg)
通常
| デフォルト色 (Sigma-9) by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(360deg) — |
|||
| デフォルト色 (Sigma-9) by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(360deg) — — — |
|||
| デフォルト色 (Sigma-9) by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #bb0011 | 355deg | 100% | 73% |
| 0deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(360deg) — — — |
|||
| MC&Dテーマ by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #6C4279 | 285deg | 45% | 47% |
| -70deg | 45% | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(290deg) — |
|||
| MC&Dテーマ by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #6C4279 | 285deg | 45% | 47% |
| -70deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(290deg) — 饱和度(45%) — |
|||
| MC&Dテーマ by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #6C4279 | 285deg | 45% | 47% |
| -70deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(290deg) — saturate(45%) — |
|||
| 蛇の手テーマ by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(122deg) — |
|||
| 蛇の手テーマ by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(122deg) — — — |
|||
| 蛇の手テーマ by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #059400 | 117deg | 100% | 58% |
| -238deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(122deg) — — — |
|||
| 第三法則テーマ by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #4682B4 | 207deg | 61% | 70% |
| -148deg | 61% | / | ||
| side-bg | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| filter: |
hue-rotate(212deg) — |
|||
| 第三法則テーマ by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #4682B4 | 207deg | 61% | 70% |
| -148deg | / | / | ||
| 侧边栏背景 | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| 滤镜： | 色调偏移(212deg) — 饱和度(61%) 亮度(90%) |
|||
| 第三法則テーマ by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #4682B4 | 207deg | 61% | 70% |
| -148deg | / | / | ||
| side-bg | #E2E4E7 | 216deg | 2% | 90% |
| / | / | 90% | ||
| filter: | hue-rotate(212deg) — saturate(61%) brightness(90%) |
|||
| SPCテーマ by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #0c499c | 214deg | 92% | 61% |
| -141deg | 92% | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: |
hue-rotate(219deg) — |
|||
| SPCテーマ by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| 侧边栏背景 | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| 滤镜： | 色调偏移(219deg) — 饱和度(92%) — |
|||
| SPCテーマ by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #0c499c | 214deg | 92% | 61% |
| -141deg | / | / | ||
| side-bg | #ffffff | 0deg | 0% | 100% |
| / | / | 100% | ||
| filter: | hue-rotate(219deg) — saturate(92%) — |
|||
| Darkbodyテーマ by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #2F4F4F | 180deg | 40% | 30% |
| -175deg | 40% | / | ||
| side-bg | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| filter: |
hue-rotate(185deg) — |
|||
| Darkbodyテーマ by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #2F4F4F | 180deg | 40% | 30% |
| -175deg | / | / | ||
| 侧边栏背景 | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| 滤镜： | 色调偏移(185deg) — 饱和度(40%) 亮度(86%) |
|||
| Darkbodyテーマ by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #2F4F4F | 180deg | 40% | 30% |
| -175deg | / | / | ||
| side-bg | #DCDCDC | 0deg | 0% | 86% |
| / | / | 86% | ||
| filter: | hue-rotate(185deg) — saturate(40%) brightness(86%) |
|||
| 空想科学部門テーマ by FloppyPhoenixに合致するユーザーネームは存在しません, |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #5b2f8e | 268deg | 67% | 56% |
| -87deg | 67% | / | ||
| side-bg | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| filter: |
hue-rotate(273deg) — |
|||
| 空想科学部門テーマ by FloppyPhoenixに合致するユーザーネームは存在しません, |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #5b2f8e | 268deg | 67% | 56% |
| -87deg | / | / | ||
| 侧边栏背景 | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| 滤镜： | 色调偏移(273deg) — 饱和度(67%) 亮度(95%) |
|||
| 空想科学部門テーマ by FloppyPhoenixに合致するユーザーネームは存在しません, |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #5b2f8e | 268deg | 67% | 56% |
| -87deg | / | / | ||
| side-bg | #f3f3f3 | 0deg | 0% | 95% |
| / | / | 95% | ||
| filter: | hue-rotate(273deg) — saturate(67%) brightness(95%) |
|||
| SAPPHIREテーマ by |
||||
|---|---|---|---|---|
| color code | H | S | V | |
| Link | #151a61 | 236deg | 78% | 38% |
| -119deg | 78% | / | ||
| side-bg | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| filter: |
hue-rotate(241deg) — |
|||
| SAPPHIREテーマ by |
||||
|---|---|---|---|---|
| 颜色代码 | H | S | V | |
| 链接 | #151a61 | 236deg | 78% | 38% |
| -119deg | / | / | ||
| 侧边栏背景 | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| 滤镜： | 色调偏移(241deg) — 饱和度(78%) 亮度(90%) |
|||
| SAPPHIREテーマ by |
||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #151a61 | 236deg | 78% | 38% |
| -119deg | / | / | ||
| side-bg | #e5e5e5 | 0deg | 0% | 90% |
| / | / | 90% | ||
| filter: | hue-rotate(241deg) — saturate(78%) brightness(90%) |
|||
例外
| 終焉の始まりテーマ | ||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #e80e0e | 0deg | 93% | 90% |
| -5deg | 93% | / | ||
| side-bg | #161616 | 0deg | 0% | 8% |
| / | / | 8% | ||
| filter: | invert(92%)4 hue-rotate(189deg)5 saturate(1200%) |
|||
| IJAMEAテーマ | ||||
|---|---|---|---|---|
| カラーコード | H | S | V | |
| リンク | #000000 | 0deg | 0% | 0% |
| / | / | / | ||
| side-bg | #FFFFFF | 0deg | 0% | 100% |
| / | / | / | ||
| filter: | grayscale(100%) drop-shadow(0 1px 1px #000000) |
|||