haku - suto3の大福帳

haku

https://lh3.googleusercontent.com/a-/AAuE7mCsJpT3Img67JJA_VJ7dQZQszuUwPj5AUlX5_grzA#.png

https://gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8

https://gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3

haku-yowane

yowane-haku

弱音ハク

↓そして、これが弱音ハクをテーマにした、UserCSS（痛Scrapbox）

初期設定

code:style.css

/*@import "/api/code/suto3/UserCSS:ダークテーマ"; /* */

:root {

--main-color: DarkGray; /* 主調色 */

--assort-color: White; /* 従属色 */

--base-color: WhiteSmoke; /* 背景色 */

--accent-color: BlueViolet; /* 強調色 */

--text-color: #666; /* 文字色 */

/* 1 ナビバーのアイコン（グローバルメニュー） */

/* --navi-icon: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */

--navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg"); /* */

--navi-icon-B: url('/api/pages/suto3/弱音ハク/icon'); /* */

--navi-icon-C: url('/api/pages/suto3/clipart/icon#.png'); /* */

/* 2 ブロジェクトホームのアイコン */

/* --project-home-icon: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */

--project-home-icon: url(https://i.gyazo.com/b127eec709b9e9882e7380073f5e836c.png); /* */

--project-home-icon-B: url('/api/pages/suto3/ビーバー君/icon'); /* */

/* 3 背景画像 */

/* --project-bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png"); /* haku */

--project-bg-image: url(https://i.gyazo.com/0412280e8d480b1b2444efa9227db4f6.png); /* */

/* 4 ページの背景画像 */

/* --page-bg-image: url("https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png"); /* haku */

--page-bg-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* */

/* 5 ページのヘッダー画像 */

/* --page-header-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */

/* --page-header-image: url(https://i.gyazo.com/0bb49875ab1232ae254038c7fe8d51ba.png); /* */

/* --page-header-image: url(https://i.gyazo.com/45d6db74daf33b99e371f96358025d82.png); /* */

/* --page-header-image: url(https://i.gyazo.com/4294ca4d00c6ce3c54bb2f310d1d41b6.png); /* */

/* --page-header-image: url(https://i.gyazo.com/2bbdfaab87b7f89bc29bbb2d661be24c.png); /* */

/* --page-header-image: url(https://i.gyazo.com/4e67e7a44dd3bcb304dd72ec364c4cf9.png); /* blue */

--page-header-image: url(https://i.gyazo.com/6dc44e98ae4770dd5b39dad2c1da26e7.png); /* */

/* 6 ページのフッター画像 */

/* --page-footer-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */

/* --page-footer-image: url(https://i.gyazo.com/0bb49875ab1232ae254038c7fe8d51ba.png); /* */

/* --page-footer-image: url(https://i.gyazo.com/2bbdfaab87b7f89bc29bbb2d661be24c.png); /* */

/*　--page-footer-image: url(https://idy.herokuapp.com/mame#.svg); /* */

--page-footer-image: url(https://i.gyazo.com/6dc44e98ae4770dd5b39dad2c1da26e7.png); /* */

/* 7 ページタイトルのアイキャッチ */

/* --eye-chacher: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */

--eye-chacher: url('/api/pages/suto3/haku/icon'); /* */

--li-color-0: #E0E0E0;

--li-color-1: hsla(300,100%,40%,0.8);

--li-color-2: hsla(270,100%,40%,0.8);

--li-color-3: hsla(240,100%,40%,0.8);

--li-color-4: hsla(210,100%,40%,0.8);

--li-color-5: hsla(180,100%,40%,0.8);

}

code:style.css

* {

margin: 0;

padding: 0;

}

.text {

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;

/* color: #444444; */

/* font-size: 16px; /* */

/* line-height: 32px; /* */

-webkit-font-feature-settings: 'palt' 1;

font-feature-settings: 'palt' 1;

word-wrap: break-word;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

-webkit-font-kerning: normal;

font-kerning: normal;

color: var(--text-color); /* */

}

body要素、背景画像

code:style.css

@media (prefers-color-scheme: dark){ /* */

/* @media (prefers-color-scheme: light){ /* */

:root {

--base-color: #000; /* 背景色 */

--text-color: #CCC; /* 文字色 */

--main-color: #83E; /* 主調色 */

--assort-color: #000; /* 従属色 */

--accent-color: #D00; /* 強調色 */

--project-bg-image: url(https://i.gyazo.com/deedb8127514d443642bb9985edd916b.png); /* */

--li-color-0: #909090;

--li-color-1: hsla(300,100%,60%,0.9);

--li-color-2: hsla(270,100%,60%,0.9);

--li-color-3: hsla(240,100%,60%,0.9);

--li-color-4: hsla(210,100%,60%,0.9);

--li-color-5: hsla(180,100%,60%,0.9);

--eye-chacher: url('/api/pages/suto3/薔薇/icon'); /* */

}

code:style.css

body{

--logo-url: var(--navi-icon);　/* */

--new-button-bg: var(--base-color, White);

/* --body-bg: var(--base-color, White); /* */

--navbar-link-color: var(--assort-color, White);

--relation-label-bg: var(--assort-color, White);

--page-bg: var(--assort-color, White);

--code-bg: var(--assort-color, White); /* */

--card-bg: var(--assort-color, White); /* */

--body-headings-color: var(--main-color, DarkGray); /* */

--card-title-bg: var(--main-color, DarkGray);

--new-button-horizontal-color: var(--main-color, DarkGray);

--new-button-vertical-color: var(--main-color, DarkGray);

--card-title-bg-pinned: var(--main-color, DarkGray);

--card-description-color: var(--main-color, DarkGray); /* */

--card-box-shadow-color: var(--main-color, DarkGray); /* */

--body-bg: var(--main-color, DarkGray); /* */

--line-title-color: var(--text-color, gray); /* */

--card-title-color: var(--text-color, gray); /* */

--relation-label-text: var(--text-color, gray); /* */

--relation-label-links-text: var(--text-color, gray); /* */

--relation-label-empty-text: var(--text-color, gray); /* */

--tool-text-color: var(--text-color, gray); /* */

--card-backside: var(--text-color, gray); /* */

--page-text-color: var(--text-color, gray); /* */

}

UserCSS:バックグラウンド

固定モード

code:style.css

body {

background:

var(--project-bg-image),

linear-gradient(to top,

var(--main-color, blue),

var(--base-color, cyan),

var(--assort-color, darkblue),

var(--base-color, cyan),

var(--main-color, blue)

);

background-repeat: no-repeat; /* */

background-attachment: fixed; /* */

background-position: right bottom ; /* */

background-size: auto 100%, auto,auto;

}

ワイドモード

code:stylexx.css

body {

background-image:

var(--project-bg-image),

linear-gradient(to right,

var(--main-color, blue),

var(--base-color, cyan),

var(--assort-color, darkblue),

var(--base-color, cyan),

var(--main-color, blue)

);

background-repeat: repeat-y;

background-attachment: scroll;

background-position: center top ;

background-size: 100% auto; // 横幅を100%にして算出

}

Navbar、ナビゲーションバー

UserCSS:ナビゲーションバー

code:style.css

.navbar {

opacity:0.8;

background:

linear-gradient(to top,

var(--base-color) 1%,

var(--text-color) 1%,

#444 33%,

var(--accent-color) 33%,

var(--accent-color) 67%,

#444 67%,

var(--text-color) 99%,

var(--base-color) 99%

);

}

code:style.css

.navbar-brand::before {

content: ''; /* */

margin: 0px 60px; /* */

width: 40px;

height: 40px;

position: absolute;

/* background-size: cover;　/* */

background-size: 40px 40px;

border-radius: 3px; /*角丸*/

}

code:style.css

.navbar-brand::after {

content: ''; /* */

margin: 0px 120px;

width: 40px;

height: 40px;

position: absolute;

background-size: cover;

border-radius: 3px; /*角丸*/

}

プロジェクトホーム

UserCSS:プロジェクトホーム

code:style.css

.quick-launch .project-home .title {

color: var(--main-color);

/* font-size: 32px; /* */

font-size: 1.1em;

line-height: 1.5;

letter-spacing: 0.04em;

font-weight: bold;

text-shadow: -1px -1px 0px var(--assort-color),1px 1px 0px var(--assort-color), 2px 2px 0px var(--accent-color);

padding: 24px 64px;

}

.quick-launch .project-home .icon-home::before {

color: var(--main-color);

}

プロジェクトホームに画像（プロジェクトアイコン）を追加

code:stylexx.css

/* .quick-launch .project-home .title::after { */

.quick-launch .project-home .title::before {

content: ''; /* */

width: 30px; /* */

height: 64px;

padding: 30px 64px;

position: right bottom;

/* background-size: cover; /* */

background-size: contain; /* */

background-repeat: no-repeat; /* */

border-radius: 4px;

}

UserCSS:PageMenu

code:stylexx.css

ページ

UserCSS:ページ

画像なしモード

code:stylexx.css

.page {

background-color: var(--assort-color, WhiteSmoke);

opacity:0.8;

filter: grayscale(50%); /* */

}

.page:Hover {

background-color: var(--assort-color, White);

opacity:1;

filter: none;

}

固定モード

code:stylexx.css

.page {

background:

linear-gradient(to right,

rgba(255,255,255, 1.0), 30%,

rgba(255,255,255, 0.8), 50%,

rgba(255,255,255, 0.5), 70%,

rgba(255,255,255,0)

) ,

var(--page-bg-image) /* */

;

background-origin: border-box,border-box; /* */

background-repeat: repeat-y,no-repeat; /* */

background-attachment: scroll,fixed; /* */

background-position: 0% 0%, 75% 65% ; /* */

background-size: 100% 100%,30% auto; /* */

}

ワイドモード

code:stylexx.css

.page {

background:

linear-gradient(to right,

rgba(255,255,255, 1.0), 30%,

rgba(255,255,255, 0.8), 50%,

rgba(255,255,255, 0.5), 70%,

rgba(255,255,255,0)

) ,

var(--page-bg-image) /* */

;

background-repeat: repeat-y;

background-attachment: scroll;

background-position: center top ;

background-size: 100% auto;'

}

ページタイトル

code:style.css

.editor .line-title .text {

/* font-size: 26px; /* */

font-size: 1.2em;

line-height: 1.5;

letter-spacing: 0.04em;

font-weight: bold;

border-bottom: solid 2px var(--main-color);

padding-left: 52px; /* */

padding-top: 4px;

padding-bottom: 5px;

margin-bottom: 10px;

text-shadow: 1px 1px 0px var(--assort-color), 2px 2px 0px var(--accent-color);

}

ページタイトルに画像（アイキャッチ）を追加

code:stylexx.css

.editor .line-title::before {

content: ''; /* */

display: block;

width: 40px;

height: 40px;

padding: 10px;

position: absolute;

background-size: cover;

border-radius: 4px

}

ページヘッダー

code:style.css

.page::before {

display: block;

content: ''; /* */

width: 96px;

height: 64px;

padding: 64px 96px;

position: left top; /* */

/* background-size: cover; /* */

background-size: contain; /* */

background-repeat: no-repeat; /* */

}

ページフッター

code:style.css

.page::after {

display: block;

content: ''; /* */

width: 144px;

height: 96px;

padding: 96px 144px;

position: left top; /* */

/* background-size: cover; /* */

background-size: contain; /* */

background-repeat: no-repeat; /* */

}

ページフッター（著作権表示する場合）

code:stylexx.css

.page::after {

display: block;

border-top: 1px solid #bbb;

margin-bottom: 2rem;

}

UserCSS:テロメア

code:style.css

/* 新着以外のテロメア */

.line .telomere .telomere-border {

border-color: var(--main-color); /* これ灰色のとこ */

}

/* 新着のテロメア */

.line .telomere .telomere-border.unread {

border-color: var(--accent-color) ; /* これ緑のとこ */

}

/* 日付が表示される部分 */

.line .telomere .telomere-border .description {

background-color: var(--main-color); /* 背景色 */

color: var(--assort-color); /* 文字色 */

}

UserCSS:箇条書き

code:style.css

.line.number-list .dot {

display: list-item; /* 表示する */

}

code:style.css

.line .indent-mark .dot::before {

content: ''; /* */

width: 1em;

height: 1em;

padding: 12px;

position: absolute; /* */

right: -5px;

top: -10px;

/*ここに画像へのリンクを貼る*/

background-size: cover; /* */

/* background-size: contain; /* */

background-color: var(--li-color-0,#EEE);

border-radius: 50%;

}

UserCSS:箇条書き - UserCSS:箇条書きをウザくする

色の指定

code:style.css

.line .indent-mark .c-0 + .dot::before {

background-color: var(--li-color-1,#fe0);

}

.line .indent-mark .c-1 + .dot::before {

background-color: var(--li-color-2,#F0F);

}

.line .indent-mark .c-2 + .dot::before {

background-color: var(--li-color-3,#0FF);

}

.line .indent-mark .c-3 + .dot::before {

background-color: var(--li-color-4,#F00);

}

.line .indent-mark .c-4 + .dot::before {

background-color: var(--li-color-5,#0F0);

}

番号つきリストの設定

1. 層

2. 層

3. 層

4. 層

5. 層

6. 層

7. 層

code:style.css

.line.number-list .dot {

display: list-item; /* 表示する */

}

UserCSS:ハッシュタグ

code:style.css

atype="hashTag" {

color: var(--base-color);

background: linear-gradient( to right,

var(--main-color) 25%,

var(--main-color),

var(--assort-color),

var(--main-color)

) 0% center / 400% auto ; /* グラデーション */

padding: 4px 6px;

border-radius: 4px;

font-size: 0.8em;

font-weight: bold;

box-shadow: 2px 2px var(--accent-color);

animation: emblue 6s linear infinite;

animation-direction: reverse;

}

@keyframes emblue {

to { background-position-x: 300%; }

}

atype="hashTag":hover {

background: none ;

background-color: var(--main-color);

color: var(--base-color);

}

ページリスト、関連ページリスト

UserCSS:関連ページリスト

code:style.css

.related-page-list {

opacity:0.5;

/* filter: grayscale(50%); /* */

}

.related-page-list:hover {

opacity:1;

filter: none;

}

code:stylexx.css

.related-page-list .grid li:hover {

transition: 1.6s;

transform: rotateY(360deg);

}

UserCSS:ページリスト

code:style.css

/* .page-list .grid li{ /* */

.page-list {

/* opacity:0; /* */

opacity:0.5; /* */

/* filter: grayscale(50%); /* */

}

/* .page-list .grid li:hover { /* */

.page-list:hover {

opacity:1;

filter: none;

}

code:stylexx.css

/* くるくる回すやつ */

.page-list .grid li:hover {

transition: 1.6s;

/*-webkit-transform: rotateZ(360deg);*/

/*-moz-transform: rotateZ(360deg);*/

/* transform: rotateZ(360deg);*/

transform: rotateY(360deg);

}

/* pinどめされたカードは回らない */

.page-list .grid li.pin:hover {

/* -webkit-transform: none;*/

/* -moz-transform: none;*/

transform: none;

}

ページリストの見出しにアイキャッチをつける

code:style.css

/*.grid li.page-list-item > ahref^="/suto3/" > .content > .header > .title::after {*/

.grid li.page-list-item > ahref^="/suto3/" > .content > .header > .title::before {

content: ''; /* */

width: 5px

height: 12px;

padding: 5px 12px;

position: left top;

right: -10px;

top: -20px;

margin: 1px;

/* background-size: cover; /* */

background-size: contain; /* */

background-repeat: no-repeat; /* */

}

UserCSS:ステータスバー

code:style.css

.status-bar {

color: var(--main-color);

background-color: var(--base-color, Red);

}

UserCSS:選択範囲の色の変更

code:style.css

.selection{

background-color: var(--accent-color, GreenYellow);

}

UserCSS:カーソル

code:style.css

.cursor {

background-color: var(--accent-color);

}

.shared-cursors .cursor {

background-color: var(--accent-color);

}

code:stylexx.css

/* カーソルのある行の背景色と下線を薄いグレーにする */

.cursor-line {

background-color: rgba(0, 0, 0, .02);

box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);

}

UserCSS:吹き出し記法

code:style.css

.deco-\{ {

font-size: 0.9em;

color: white ; /* */

/* color: var(--text-color) ; /* */

/* color: var(--assort-color) ; /* */

background-color: var(--li-color-1);

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.5em;

margin: auto 0.4em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(0.9em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

border-color: var(--li-color-1) transparent;

}

code:style.css

.deco-\} {

font-size: 0.9em;

color: white ; /* */

/* color: var(--text-color) ; /* */

/* color: var(--assort-color) ; /* */

background-color: var(--li-color-2);

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.5em;

margin: auto 0.4em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(0.9em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

border-color: var(--li-color-2) transparent;

}

hover時の設定

code:style.css

.deco-\{:hover {

color: var(--text-color);

background-color: var(--base-color);

}

.deco-\{:hover:before {

border-color: var(--base-color) transparent;

}

code:style.css

.deco-\}:hover {

color: var(--base-color) ;

background-color: var(--text-color);

}

.deco-\}:hover:after {

border-color: var(--text-color) transparent;

}

code:style.css

/* #haku をつけると… */

@media only screen and (min-width: 480px) {

atype="hashTag"href="/suto3/haku"::after {

content: "";

background-image: url('https://i.gyazo.com/de07fbaab5c961dc7fd3720ba956bbd3.png');

/*background-size: 512px 1024px;*/

display: block;

width: 512px;

height: 1024px;

position: fixed;

right: -80px;

bottom: -192px;

}

atype="hashTag"href="/suto3/%E5%BC%B1%E9%9F%B3%E3%83%8F%E3%82%AF"::after {

content: "";

background-image: url('https://i.gyazo.com/b127eec709b9e9882e7380073f5e836c.png');

background-size: 400px 400px; /* */

display: block;

width: 400px;

height: 400px;

position: fixed;

right: 0px;

bottom: 0px;

}

atype="hashTag"href="/suto3/%E3%81%9F%E3%81%84%E3%81%B8%E3%82%93%E3%82%88%E3%81%8F%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F"::after {

content: "";

background-image: url('https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/suto3/たいへんよくできました/good.svg');

background-size: 200px 200px; /* */

display: block;

width: 200px;

height: 200px;

position: fixed;

left: 0px;

bottom: 0px;

}

EOF

メモ

table:color-list

Black #000000

DarkGray #A9A9A9 黒の代わり。

WhiteSmoke #F5F5F5 白の代わり。

White #FFFFFF

BlueViolet #8A2BE2

↓使わなかった。

DarkViolet #9400D3

Violet #EE82EE

UserCSS:background-image

haku

#弱音ハク

#たいへんよくできました

settings.icon