settings
UserCSSを書く用のページ
色々な人のページを勝手に参考にしています…
＠import
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Huninn&family=Noto+Sans+JP:wght@100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@font-face {
font-family: "latin";
font-style: normal;
font-weight: 400;
font-display: swap;
src:url("https://fonts.gstatic.com/s/huninn/v2/OpNNnoINg9bQ4xkZiSvR.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
色の設定
code:style.css
body{
--dark: #222;
--dark-grey: #444;
--light-grey: #999;
--light-blue: #4476eb;
--light-red: #fb7476;
--dark-blue: #30364d;
--hover-color: rgba(0, 0, 0, 0.05);
--border-light-grey: #eee;
--border-gradient:linear-gradient(rgba(0, 0, 0, 0.04), var(--page-bg));
/*navbar*/
--navbar-title-color: var(--dark-grey);
--navbar-icon-color: var(--dark-grey);
--search-form-icon-color: var(--dark-grey);
--search-form-border-color: var(--light-grey);
--tool-text-color: var(--light-grey);
/*記事*/
--card-title-color: var(--dark-grey);　
--card-title-bg: white;
--card-bg: white;
--card-hover-bg: var(--hover-color);
--card-active-bg: rgba(243, 243, 243, 0.1);
--card-description-color: #b3b3b3;
--card-description-link-color: #95abff;
--card-box-shadow-color: white;
--card-border-color: var(--border-light-grey);
--card-border: 1px solid var(--card-border-color);
--card-border-radius-sm: 1px;
--card-border-radius-md: 2px;
--card-pin-overhang-color: #ddd;
--line-title-color:var(--dark-grey);
--body-bg: #d9d9d9;
--page-bg: white;
--code-bg: rgba(0, 0, 0, 0.04);
--quote-bg: linear-gradient(to right, rgba(245, 245, 245, 0.8) 55%, var(--page-bg));
/*関連記事*/
--relation-label-bg: var(--border-light-grey);
--relation-label-text: var(--light-grey);
--relation-label-links-bg: var(--dark-blue);
--relation-label-empty-bg: var(light-red);
--relation-label-empty-text: white;
/*ページリンク*/
--page-link-color: var(--light-blue);
--page-link-hover-color: var(--page-link-color);
--empty-page-link-color: var(light-red);
--empty-page-link-hover-color: var(--empty-page-link-color);
/*その他*/
--border-light: 1.5px;
--border-bold: 2px;
}
文字の設定
code:style.css
html, body, kbd, pre, samp, .tooltip, .editor, .grid li, .list li.page-list-item, .popup-menu,
.stream {
font-family: "Noto Sans JP", sans-serif;
font-size: 16px ;
line-height: 1.1em ;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.line-title {
font-family: "latin", "Kosugi Maru", sans-serif;
font-size: 2.5em!important;
line-height: 1.2em !important;
font-weight: 400;
font-style: normal;
font-kerning: normal;
}
.line code {
font-family: "Source Code Pro", monospace;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
.line {
font-size: 1em;
line-height: 1.9em;
}
装飾文字
強調1
強調2
強調3
強調4
強調5
枠強調　
code:style.css
.line strong.level-1 {
font-weight: 600;
border-bottom: solid var(--border-light) var(--page-text-color)
}
.line strong.level-2{
font-size: 14px;
font-weight: 500;
font-style: normal;
color: var(--page-bg);
background-color: var(--dark);
border-radius: 2px;
padding: 0 .3em;
}
.line strong.level-3{
font-weight: 600;
font-style: normal;
}
.line strong.level-4{
font-weight: 600;
font-style: normal;
color: var(--dark-grey);
background-color: var(--page-bg);
display: block;
border-bottom: solid var(--border-bold) var(--dark);
border-left: solid var(--dark) 5px ;
padding: 0em .6em 0 .3em ;
}
.line strong.level-5{
font-weight: 600;
font-style: normal;
line-height:1.5em;
color: var(--page-bg);
background-color: var(--dark-grey);
display: block;
padding: 0em .2em;
}
.deco-\!{
color: var(--page-text-color);
border: solid 1px var(--page-text-color);
border-radius: 2px;
padding: 0 .24em;
}
.deco-\+{
color: var(--page-text-color);
font-size: 12px;
line-height: 2rem;
}
タイトルの調整
code:style.css
.line.line-title .text {
border-bottom: solid var(--border-bold) var(--dark);
margin-bottom: .2em;
padding-bottom: .2em;
}
引用符の調整
code:style.css
.line .quote {
background: var(--quote-bg);
display: block;
border-left: solid 3px var(--page-text-color);
padding-left: 3px;
}
箇条書きのデザイン変更
code:style.css
.app .line .indent-mark .dot {
display: block;
position: absolute;
top: .8em;
width: 5px;
height: 5px;
background-color: #cdcdcd;
}
テーブルのデザイン変更
code:style.css
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px var(--light-grey);
border-bottom: solid 1px var(--light-grey);
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px var(--light-grey);
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px var(--light-grey);
}
.section-title + .line .table-block .cell {
text-align: center;
color: var(--page-bg);
background-color:var(--dark-grey)
}
.table-block .cell:nth-child(even){
background-color:var(--page-bg);
}
.table-block .cell:nth-child(odd){
background-color:var(--page-bg);
}
テロメア消去
code:style.css
.telomere {
display: none;
}
リンクとタグの設定
code:style.css
atype="hashTag"{
padding: 0 .2em;
}
atype="link".page-link{
border-bottom: solid var(--border-light) var(--page-link-color);
}
atype="link".empty-page-link{
border-bottom: solid var(--border-light) var(--empty-page-link-color);
}
@keyframes blink {
0% {opacity: 1;}
50% {opacity: .1;}
100% {opacity: 1;}
}
.line a.link:hover,.line a.page-link:hover {
color: #9A9A9A;
animation: blink 1s infinite;
}
画像のマージン設定
code:style.css
.text > span > span:not(:first-child) .image, .indent > span:not(:first-child) .image {
margin-left: 5px;
}
.line:not(.cursor-line).image-line-2 .image, .line:not(.cursor-line).image-line-2 .strong-image {
max-width: 49.67%;
}
.line:not(.cursor-line).image-line-3 .image, .line:not(.cursor-line).image-line-3 .strong-image {
max-width: 32.91%;
}
.line:not(.cursor-line).image-line-4 .image, .line:not(.cursor-line).image-line-4 .strong-image {
max-width: 24.53%;
}
セパレーター追加
code:style.css
.line:has(span.char-index.c-0data-char="-"):has(span.char-index.c-1data-char="-"):has(span.char-index.c-2data-char="-"){
&{
display: flex;
align-items: center;
text-align: center;
}
&:not(.cursor-line):after{
flex-grow: 1;
content: "";
border-top: solid var(--border-bold) var(--light-grey);
}
&:not(.cursor-line){
height:28px;
}
}
.line:not(.cursor-line):has(.c-0data-char="-"):has(.c-1data-char="-"):has(.c-2data-char="-") span.char-index{
&.c-0data-char="-",
&.c-1data-char="-",
&.c-2data-char="-"{
display:none;
}
}
記事の表示設定
code:style.css
.grid li.page-list-item a .header { border-top: unset }
.page {
background-color: var(--page-bg);
box-shadow: unset
}
記事タイトルを一行で表示
code:style.css
.grid li.page-list-item a .header .title {
font-size: 13px;
padding: 0;
width: 105%;
display: inline-block;
margin-left: -0.3em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
記事のグリッド周りの指定
code:style.css
div.page{
max-width:1000px; /* 横幅(px) */
margin-left:auto;
margin-right:auto
}
div.page-list li.page-list-item{
/* width:225px !important; */
/* height:170px !important; */
}
.grid li{
aspect-ratio: 1 / 0.765;
}
.page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: .8em;
}
@media screen and (max-width: 768px){
.page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: .6em;
}
}
ピンの装飾の設定
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
.grid li.page-list-item.pin::after {
width: 15px;
height: 15px;
top: 0px;
right: 0px;
transform: rotate(0deg);
}
ピン止め記事の表示位置調整
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
#日報 がついているページのタイトルを強調
code:style.css
.page-list .grid li.page-list-item:not(.pin)data-page-links*="'日報'" a .header .title {
color: var(--page-bg);
background-color: var(--light-grey);
border-radius: 0px;
padding: 0 .3em;
}
#private がついているページを隠す
code:style.css
.page-list-itemdata-page-links*="'private'",
.stream .pagedata-page-links*="'private'" {
display: none;
}
navbarの装飾
code:style.css
.navbar {
border: unset;
background-color: rgba(255, 255, 255, .9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, .02);
backdrop-filter: blur(3px);
padding-top: 10px;
padding-bottom: 10px;
}
.search-form .form-group input{
background-color: rgba(255, 255, 255, .8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .03);
border-color:var(--border-light-grey);
border-radius: 30px;
}
.search-form .form-group input:focus{
background-color: var(--page-bg);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .03);
border-color:var(--border-light-grey);
border-radius: 30px;
}
.search-form .form-group button {
right: 6px;
}
.new-button{
background-color: var(--border-light-grey);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .03);
width: 30px;
height: 30px;
border-radius: 15px;
.horizontal-line{
background-color: #fff;
width: 2px;
height: 16px;
}
.vertical-line{
background-color: #fff;
width: 16px;
height: 2px;
}
}
サムネイルの設定
code:style.css
div.page-list div.description{
padding:0 12px !important
}
.grid li.page-list-item a .icon {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 0;
}
ul.grid li.page-list-item .icon img {
display: table-cell;
width: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
border-radius: 2px;
filter: grayscale(0%) contrast(100%);
transition:
transform 0.4s ease,
filter 0.3s ease;
}
ul.grid li.page-list-item:hover .icon img {
transform: scale(1.1) rotate(2deg);
filter: grayscale(100%) contrast(40%) brightness(1.5);
}
.grid li.page-list-item:hover .description {
.page-link{
color: #939393;
}
.link{
color: #939393;
}
}
ページメニューの調整
code:style.css
.page-menu {
top: 72px;
.tool-btn{
color: var(--dark-grey);
}
}
.dropdown-menu {
background-color: rgba(255, 255, 255, .98);
backdrop-filter: blur(3px);
border: 1px solid var(--border-light-grey);
border-radius: 2px;
box-shadow: 0 3px 12px rgba(0, 0, 0, .03);
}
ブランドアイコンの変更
code:style.css
.brand-icon {
--logo-url: url('https://gyazo.com/a4fd275fc6c583532f49d835137d474d.png');
width: 30px;
height: 30px;
background-image:var(--logo-url);
background-size:cover;
background-repeat:no-repeat;
border-radius: 10%;
svg {display: none;}
}