【コピペのみ】便利なUser Css一覧
https://gyazo.com/004af9dda8e524d5e6904a8006f6d825
とびだすニゴロ.icon 「code:style.css」から灰色の部分全部をコピーしないと使えません！！
※変更不可＝何もわからない人向けの基準です。わかる人は変更しても問題ないし、多分勝手に改造してるのでは。
※User CSSはSettings、自分のページの両方に使えます。Settingsだと全体に、自分のページだけだと自分だけに適用されます！
/icons/水平線.icon
目次
table:目次
/icons/水平線.icon
カラーコード一覧表
https://gyazo.com/c6a60dacaf189a1a3b7fa622af514331
table:コピペ表
１ # fff
２ # 7F7F7F
３ # 000
４ # E60033
５ # F391BB
６ # E95388
７ # E95464
８ # A22041
９ # EE7948
10 # FFF462
11 # FFEC47
12 # FFA963
13 # E45E32
14 # 3EB370
15 # 89C997
16 # 7EBEAB
17 # 38B48B
18 # 006948
19 # 2F5597
20 # A0D8EF
21 # 00A1E9
22 # 5A79BA
23 # 043C78
24 # 884898
25 # DBD0E6
26 # C7A5CC
27 # AF0082
28 # 5654A2
※リンク化を防ぐために半角スペースいれてます。コピペの際は半角スペースを消してください (´;ω;｀)
/icons/水平線.icon
全体の設定を変える
code:style.css
.body{
font-size: 14px; /* 文字サイズ。変更可能 */
}
全体の設定を変えられる
背景の色はとりあえず白。
/icons/水平線.icon
背景を変える
背景とは？
https://gyazo.com/a07fb9056cc968dbf3860d8cea1cdbb7.png
背景：このストライプの部分
ストライプにする方法は「css ストライプ」等で検索すると運が良ければ見つかります！
文字を編集する部分：この白い部分
背景部分
code:style.css
.body{
background-color: #fff; /* 背景をかえる。変更可能 */ }
文字を編集する部分
code:style.css
.page {
background-color: #202228; /* 文字を書く部分の背景 */ }
.editor, .stream, li.page-list-item {
background-color: #202228; /* 文字を書く部分の背景 */ }
サンプル
https://gyazo.com/18076486996186aea6fe6f91f7d8dd65.pnghttps://gyazo.com/8b3eee1bc1fe3242e448bef6f5e2890a.png
端っこも中も全部同じ色で統一できます。テロメアも隠せば真っ黒真っ白。
/icons/水平線.icon
文字のフォントを変える
code:style.css
.editor, .stream{
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; /* フォントを変える。フォントファミリーで検索、コピペ。変更可能 */
font-size: 14px; /* 文字サイズ。こちらを入れるならbodyの文字サイズを削除してください。変更可能 */
font-weight: 500; /* フォントの太さ。boldで太字。＋100すれば太く、-100すれば細くなる。変更可能 */
line-height: 150%; /* 行の高さ。増やせば1行の高さが広くなり、減らせば狭くなる。変更可能 */
}
font-familyで検索すればゴシック体以外にも変えられます。
通常は明朝体。ここはニゴロブナの人の趣味でゴシック体になっています
コピペしてフォントファミリーを置き換えるだけです。
font-sizeはフォントのサイズです。14pxはこのサイトの文字のサイズと同じ。
font-weightは文字の太さ。bold or 600にすると太字、400とか500くらいだと少し太いかなくらい。100はめちゃくちゃ細い。
https://gyazo.com/a448400c64369903d2e80db8dd8a1633/thumb/300.png
/icons/水平線.icon
文字の色を変えるページ全体/一部の文字/太字
ページ全体の文字色を変える
code:style.css
.body{
--page-text-color: #000; /* 編集部分の文字色を変える。font-color等では適用されないので注意。カラーコード変更可能 */ }
※プロジェクトの色を変更したときのため背景色が白なら#000、背景色が黒なら#fff
colorでは適用されないので注意！
＊ ＊ ＊ ＊
一部の文字色をこういう感じで変えたい
code:style.css
.deco-\& { /* ←記号を変えれば文字色を増やせる */
font-weight: bold; /* 太字にできます。細字のままがよければ消す */
color:#a22041 ; /* 文字色。デフォ赤。カラーコード変更可能 */
}
.deco-\% { /* ←記号を変えれば文字色を増やせる */
font-weight: bold; /* 太字にできます。細字のままがよければ消す */
color: #ee7948; /* 文字色。デフォ橙。カラーコード変更可能 */ }
.deco-\( { /* ←記号を変えれば文字色を増やせる */
font-weight: bold; /* 太字にできます。細字のままがよければ消す */
color:#00a381 ; /* 文字色。デフォ緑。カラーコード変更可能 */
}
.deco-\" { /* ←記号を変えれば文字色を増やせる */
font-weight: bold;/* 太字にできます。細字のままがよければ消す */
}
※後ろに出てくるマーカーの記号と被らないよう注意する！
沢山の人がいるプロジェクトでUser CSSとして使うと他の人には適用されません。
＊ ＊ ＊ ＊
マーカーを作る
code:style.css
.deco-\'{ /* ←記号を変えればマーカーを増やせる */
color:#fff; /* 文字色。カラーコード変更可能 */
background: linear-gradient(#ffffff00 67%, #a0d8ef 90%); /* （マーカーの背景,マーカーの色）。 マーカーの太さは前者の％で変えられます*/ font-weight: bold; /* 文字の太さ。通常の文字の太さにしたい場合は消す。変更可能 */
}
※記号部分は文字色の記号とかぶらないように注意
マーカーの背景の％について：大きいほどマーカーが細くなり、小さいほどマーカーが太くなります。
文字色とマーカーのサンプル
https://gyazo.com/c7c5169e9116d07877cb502eb5715f83
＊ ＊ ＊ ＊
太字の色を変える
code:style.css
.line strong {
}
*←これで適用できる太字の色を変えられます。
サンプル
https://gyazo.com/2a86bb0f9fddaa0997175f82007b9644
/icons/水平線.icon
リンクの文字色を変える
code:style.css
.line a.link, .line a.page-link {
font-style: normal; /* 斜体にするかどうか。斜体にするならitalic。変更可能 */
font-weight: bold; /* 文字の太さ。変更可能 */
color: #ff669c; /* ︎★ココは同じカラーコードにしてください */ }
.line a:hover {
text-decoration: underline; /* リンクにカーソルを合わせると下線が引かれます。いらない場合はこれを消す */
}
.line a {
font-style: normal; /* 斜体にするかどうか。斜体にするならitalic。変更可能 */
font-weight: bold; /* 文字の太さ。変更可能 */
}
.line a:hover {
text-decoration: underline; /* リンクにカーソルを合わせると下線が引かれます。いらない場合はこれを消す */
color: #ff669c; /* ★ココは同じカラーコードにしてください */ }
リンクの色が鮮やかな水色になります。
a.link .line以下略とa:hoverのカラーコードは同じにしてください
.line aは存在しないリンクに対してつく色。
サンプル ↓色を変えられます。
アイコンを丸くする
code:style.css
.icon{
border-radius: 50%; /* 変更不可 */
}
「ctrl/command+i」で打てるアイコンを丸くする。
サンプル
ニゴロブナの人.icon 丸いでしょ？
引用の書式を変える
code:style.css
.line .quote {
color: #fff; /* 文字の色。カラーコード変更可能 */ background-color: #676767; /* 背景の色。カラーコード変更可能 */ padding: .1rem 1em; /* 変更不可 */
font-style: italic; /* 斜体。斜体が嫌な人は消す */
font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; /* フォントを変えている人は絶対に入れる。変えていない人は消してください */
}
↓サンプル
半角で＞を打つとこのような感じになります。
通常の引用をいじるためのもの。
フォントファミリーは消しても良い。明朝体で統一したいなら消してください。
ゴシック体の人はフォントファミリーを入れないと明朝体のままになります。
↓イタリック、文字白、背景グレー版
code:style.css
.line .quote {
color: #000; /* 文字の色。カラーコード変更可能 */ background-color: #676767; /* 背景の色。カラーコード変更可能 */ font-style: italic; /* 斜体。斜体が嫌な人は消す */
padding: .1rem 1em; /* 変更不可 */
}
インデントの「・」を消す
code:style.css
.line .indent-mark .dot {
top: 50%;
width: 6px;
height: 4px;
} /* 変更不可 */
通常は「●」（中黒）のところを、細い四角にする。
←サンプル
ページの編集部分を広げる
code:style.css
.page{
padding: 41px 0px 27px 0px; /* (上,右,下,左)で、左右の数値を大きくすると横幅が小さくなる。上下を大きくすると上下の余白が増える */
}
編集部分が小さかったので拡大。
横幅が広がり、一行に書ける文字数が増えます。
左右値変更推奨。↑デフォルトだとほぼ全画面で編集できる仕様になってます
中央寄せ
code:style.css
/* 中央寄せ */
.deco-\| { /* 記号部分のみ変更可能 */
position: absolute;
width: 100%;
text-align: center;
} /* 変更不可 */
右寄せ
code:style.css
/* 右寄せ */
.deco-\> { /* 記号部分のみ変更可能 */
position: absolute;
width: 100%;
text-align: right;
} /* 変更不可 */
右寄せの場合、かっこの中に＞を入れないと引用になります。間違えないでね
↓クリックしてみよう！！
これは引用
かっこの中だと右寄せ
/icons/水平線.icon
ナビゲーションバーの色を変える
code:style.css
/* navbarを目立たなくする */
.navbar {
background-color:#e8e8e885; /* バーの色。7桁目8桁目は透明度です。お好みで */
--search-form-bg: none; /* 本来存在する検索バーの背景を削除。カラーコードに変更可能 */
}
上の検索ボックスや新規ページボタンのあるバーの色を変える。
新規ページのボタンをお洒落にしたい
code:style.css
.new-button {
background-color: #fff0; /* 十時キーの背景。カラーコード変更可能 */ border-radius: 0px; /* 変更不可 */
--new-button-hover-bg: #efefef; /* カーソルを持って行った際の色を変える。カラーコード変更可能 */ }
.new-button .horizontal-line { /* 十字を調整。変更不可 */
position: absolute;
top: 16px;
left: 7px;
width: 22px;
height: 3px;
border-radius: 0px;
}
.new-button .vertical-line {
position: absolute;
top: 7px;
left: 17px;
width: 2px;
height: 21px;
border-radius: 0px;
}
左上の画像を好きな画像に変える
code:style.css
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-image: url(/*ここに画像へのリンクを貼る*/);
background-size: cover;
border-radius: 4px;/*角丸はお好みで*/
}
テロメアを細くする/色を変える
code:style.css
/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fefefe } .line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent }/* 色変更可能 */ /* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { border-color: #9dd3e4; width: 1px } /* 色、幅変更可能 */ /* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { border-color: #9dd3e4; width: 1px } /* 色、幅変更可能 */ background-colorだと適用されないので、border-colorに変更しています。
サンプル
ナビゲーションバーの色/ 十字キーが新規ページボタン/左上のニゴロブナ画像がScrapboxアイコン/テロメアを細くする/色を変える
https://gyazo.com/bd64899ab3f6946625030dd412c37e17