settings
https://scrapbox.io/files/671af8f88e87f21c674b184f.png
↑画像変えたい 白だから背景が白だと見にくい ノイズ掛けたりする？
目次
外部import
code:style.css
/* Font Awesome */
/* google fonts */
code:style.css
@import "/api/code/sorutrt/カラースキーム/theme-bunko.css";
ベース
拡張絵文字を使う
code:style.css
@import "/api/code/sorutrt/Font_Awesomeを常時使う/style.css";
共通項目
navbar透明
code:style.css
.navbar {
background-color: transparent;
padding-top: 10px;
padding-bottom: 10px;
backdrop-filter: none;
border-bottom: 0px solid var(--navbar-border-color, transparent);
}
ブランドアイコン
code:style.css
.brand-icon {
--brand-icon-x-color: var(--page-color);
--brand-icon-y-color: var(--accent-color);
}
左上にアクセスカウンター
参考
h:60 w:135.944
code:style.css
.navbar .project-home::after {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
content: "";
display: block;
height: 40px;
margin-left: 20px;
width: 90.6px;
top: 100px;
}
新しいページを作成するボタン
code:style.css
.new-button {
background-color: var(--accent-color);
}
.new-button .horizontal-line {
background-color: var(--page-color);
}
.new-button .vertical-line {
background-color: var(--page-color);
}
検索バー
code:style.css
.search-form .form-group input {
border-radius: 0vh;
padding: 0 20px;
/* background-color: transparent !important; 強制して focus 時にも適用 */
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
border: none;
pointer-events: auto;
webkit-backdrop-filter: none;
}
.search-form .form-group button {
right: 8px;
}
.search-form .form-group button .kamon {
width: 18px;
height: 18px;
}
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important;
overflow-y: auto;
font-family: "Noto Serif JP";
background-filter: blur(3px);
}
スクロールバーの見た目をスッキリする
code:style.css
::-webkit-scrollbar{
width: 7px;
}
::-webkit-scrollbar-thumb{
background-color: var(--accent-color);
/* border-radius: 4px; */
}
::-webkit-scrollbar-track{
background-color: transparent;
}
フォント変更
code:style.css
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
font-family:'l-safe','Noto Serif JP' ,'calibri', 'Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
/* プロジェクトタイトル */
.project-home {
font-family: "Noto Serif JP";
font-size: 8;
}
背景の色を変える
code:style.css
body {
background-color: var(--bg-color) !important;
background-attachment: fixed; /* 背景を固定 */
}
ページのリスト
code:style.css
ul.grid {
& li.page-list-item {
border-radious: none;
a {
box-shadow: none;
background: var(--page-color);
border: 1px dotted var(--light-color);
.content {
height: calc(100% - 5px);
display: list-item;
flex-direction: column; /* ここ後で下見切れないかつ上下で中央に揃える */
/* font-family: "Zen Kaku Gothic New"; */
overflow: hidden;
.header {
border-top: none; /* タイトル上の謎の線を消す */
.title {
text-align: center;
}
}
}
}
/* ------------------------- */
/* 特殊ページ */
/* ------------------------- */
/* ピンしたページ */
a .pin {
background-color: transparent;
background-image: none;
}
.pin::after {
background: var(--accent-color,transparent);
}
/* タグに応じたCSS */
a {
background-color: rgba(0, 0, 0, 0);
border: none;
}
.header {
display: none;
}
img {
position: absolute;
object-fit: contain;
height: 100%;
inset: 0;
border-radius: 4px;
}
}
a {
background: none;
border: none;
}
.header {
display: none;
}
img {
position: absolute;
object-fit: cover; /* 比率を変えずに余す所なく */
height: 100%;
inset: 0;
/* border-radius: 4px; */
}
}
}
}
/* ピンされたページの次の非ピンページの配置調整 */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.grid li.page-list-item.pin::after {
background: var(--accent-color, transparent);
width: 25px;
height: 11px;
}
一覧カードをスマホのみ小さくする
code:style.css
@media(max-width:1080px){ /* 最大横幅1080px以下 */
.two-two {
width: 110px !important;
height: 110px !important;
}
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
width: 124px !important;
height: 124px !important;
}
.two-two .icon {
padding-top: 30px !important;
}
.two-two .title {
height: 0px !important;
}
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(109px, 1fr));
gap: clamp(4px, 0.1svw, 16px);
}
.related-page-list .links-container {
gap: 10px;
}
.related-page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
}
記法を追加
警告記法
code:style.css
/* 警告表記を使えるようにする */
.deco-\! {
color: var(--warning-text-color);
background-color: var(--warning-bg);
padding: 1px 2px;
border-radius: 1px;
/* 単色の赤色背景に変更 */
background-color: var(--warning-bg);
}
俺がセンタリングだ！
俺が右寄せだ！
俺が左寄せだ！
code:style.css
/* 中央寄せ */
.deco-\| { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
.deco-\< { position: absolute; width: 100%; text-align: left }
ネタバレ防止記法
これは見本です
code:style.css
.deco-\~:not(:hover) {
filter: blur(4px);
}
.cursor-line .deco-\~:not(:hover) {
filter: none;
}
外部リンクをファビコンに置き換える記法
code:style.css
/* ベース */
}
}
}
}
}
}
}
}
}
}
}
}
}
.line:not(.cursor-line) .deco-\. a.link:is(href$=".pdf")::before { }
}
}
}
}
/* End of リンク登録 */
/* ベース */
.line:not(.cursor-line) .deco-\. a.link span{
display: inline-block;
height: 100%;
}
.line:not(.cursor-line) .deco-\. a.link span:nth-of-type(1){
width: 34px;
}
.line:not(.cursor-line) .deco-\. a.link span:not(:nth-of-type(1)){
display:none;
}
.line:not(.cursor-line) .deco-\. a.link{
position: relative;
display: inline-block;
text-decoration: none;
color: transparent;
background: var(--bg-color);
height: 23px;
width: 34px;
border-radius: 3px;
margin-left: 3px;
margin-right: 3px;
transform: translateY(3px);
}
.line:not(.cursor-line) .deco-\. a.link::before{
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-size: contain;
pointer-events: none;
background-repeat: no-repeat;
border-radius: 2px;
filter: saturate(1.2) brightness(0.8);
}
/* ホバーアニメーション */
.line:not(.cursor-line) .deco-\. a.link::after{
content: "";
position: absolute;
top: 0;
left: 0;
display: inline-block;
outline-offset: -1px;
border-radius: 3px;
height: 100%;
width: 100%;
z-index: -1;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
.line:not(.cursor-line) .deco-\. a.link:hover::after{
outline: 2px solid var(--accent-color);
}
/* End of ベース */
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
ページの見た目を変更
ページ背景の色
code:style.css
.page {
background-color: var(--page-color);
box-shadow: none;
border: #666 solid 0.5px; border-radius: 5px;
}
ページ枠の色
code:style.css
.page {
/* border: var(--accent-color) solid 0.5px; */
border: none;
}
テロメアの色
//code:style.css
--telomere-updated: var(--accent-color);
テロメアを消す
code:style.css
.line .telomere .telomere-border {
border-width: 0 0 0 1px !important;
left: -30px;
}
コードブロックの見た目
code:style.css
/* コードブロック背景 */
.line span.code-block {
/* background-color: var(--bg-color, rgba(0, 0, 0, 0.04)); */
}
/* コードブロックのファイル名など*/
.line span.code-block .code-block-start a {
color: var(--accent-color);
font-size: 1.0em;
text-decoration: none;
}
.line span.code-block .code-block-start {
color: var(--accent-color);
background-color: var(--page-color);
}
ページ横幅を広げる
code:style.css
.col-page {
max-width: none;
}
.col-page-side {
width: 1000px;
}
太字の色
code:style.css
.line strong {
color: var(--accent-color);
}
階層を分かりやすくする
テスト
テスト2
テスト3
code: style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 1px solid var(--base-color);
}
/* インデントカラー（コードブロック） */
span.pad.code-block-margin {
background-color: var(--page-color) !important;
}
sorutrt.icon
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em; top: -0.2em }
from
code:style.css
body {
}
.line a:hover {
text-decoration: underline;
}
/* External links (icon)*/
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
font-size: 10px;
}
テロメアの色変更
code:style.css
line .telomere .telomere-border {
}
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not(class) { counter-increment: codeline } .code-block code > span:not(class)::before { content: counter(codeline);
position: absolute; display: inline-block; left: -4em; z-index: 10;
min-width: 50px; text-align: right; vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 } .cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } } テーブルの色変更
table:ex
1 2
3 4
code:style.css
.table-block .cell {
background-color: var(--bg-color) !important;
}
.table-block .table-block-start {
background-color: transparent;
}
.table-block .table-block-start a {
color: var(--accent-color); /* テーブルのタイトル */
}
code:style.css
color: var(--assort-color);
background-color: var(--main-color);
padding: 4px 6px;
border: 1px solid currentColor;
border-radius: 4px;
font-size: 0.9em;
}
編集時の見た目を変更
カーソルを太くする
code:style.css
.cursor {
width: 5px !important;
background-color: var(--accent-color);
}
/* 黒い線が気になるのでカーソルと同じ色にする */
.cursor {f
color: var(--accent-color);
border-color: var(--accent-color);
}
.cursor svg {
display: none;
}
code:style.css
.cursor-line {
background-color: transparent;
border-bottom: 1px solid var(--light-color);
}
ホームの見た目を変更
flexbox 右側のアレ
code:style.css
.quick-launch .flex-box {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
text-transform: uppercase;
}
;){kind=link}
;){kind=link}