settings
https://www.shi.co.jp/tech/create/img/turbine_im01.png
目次
検索画面
外部 import
code:style.css
/* Font Awesome */
/* google fonts */
code:style.css
@import "/api/code/sorutrt/カラースキーム/theme-darkdark.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: blur(4px);
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 .row .project-home {
height: 40px /* 縦幅広げて頭から足まで見えるように */
}
.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(--base-color);
}
.new-button .horizontal-line {
background-color: var(--accent-color);
}
.new-button .vertical-line {
background-color: var(--accent-color);
}
検索バー
code:style.css
.search-form .form-group input {
padding: 0 20px;
background-color: var(--base-color) !important; /* 強制して focus 時にも適用 */
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
border: none;
pointer-events: auto;
}
.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: "Zen Kaku Gothic New";
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' ,'calibri', 'Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
}
/* プロジェクトタイトル */
.project-home {
font-family: "Doto";
font-size: 4;
font-style: italic;
}
背景の色を変える
code:style.css
body {
background-color: var(--bg-color) !important;
}
ページのリスト
code:style.css
ul.grid {
& li.page-list-item {
aspect-ratio: 1/1;
a {
box-shadow: none;
background: var(--page-color);
border: 1px solid 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; /* タイトル上の謎の線を消す */
padding: 10px;
.title {
text-align: center;
font-style: italic;
}
} /* end of header */
} /* end of content */
}
/* ------------------------- */
/* 特殊ページ */
/* ------------------------- */
/* ピンしたページ */
a .pin {
background-image: none;
}
.pin::after {
background: var(--accent-color,transparent);
background: none;
}
/* タグに応じた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; */
}
}
} /* end of li.page-list-item */
li {
aspect-ratio: 1/1;
}
}
/* ピンされたページの次の非ピンページの配置調整 */
.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;
border-radius: 4px;
}
一覧カードをスマホのみ小さくする
code:style.css
@media(max-width:720px){ /* 最大横幅1080px以下 */
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 常に3つ表示 */
gap: clamp(4px, 0.1svw, 12px);
}
.related-page-list ul.grid {
grid-template-columns: repeat(3, 1fr); /* 常に3つ表示 */;
}
}
記法を追加
警告記法
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
.deco-\" {
border-radius: .2em;
padding: 0 .25em;
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
font-style: normal;
}
.line:not(.cursor-line) .deco-\"::before {
color: var(--tx-3);
font-size: .65em;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -.75em;
left: -.175em;
}
.line:not(.cursor-line) .deco-\"::after {
color: var(--tx-3);
font-size: .65em;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10e';
position: relative;
top: .25em;
left: .175em;
}
code:style.css
&{
display: flex;
align-items: center;
text-align: center;
}
&:not(.cursor-line):after{
flex-grow: 1;
content: "";
}
&:not(.cursor-line){
height:28px;
}
}
display:none;
}
}
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(--light-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 {
/* --empty-page-link-hover-color: #CC2954; */ }
.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); /* テーブルのタイトル */
}
.table-block .cell:nth-child(2n) {
background-color: rgba(0,0,0,.15);
}
.table-block .cell:nth-child(2n+1) {
background-color: rgba(0,0,0,.25);
}
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: var(--base-color);
}
ホームの見た目を変更
flexbox 右側のアレ
code:style.css
.quick-launch .flex-box {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
text-transform: uppercase;
}
検索画面の見た目を変更
code:style.css
.list li.page-list-item {
background-color: transparent;
font-family: "Zen Kaku Gothic New";
/* box-shadow: 0 2px 2px rgba(0,0,0,.35); default*/
a {
color: var(--card-title-color);
.description {
color: var(--page-text-color);
}
}
}
.list li.page-list-item a:hover {
background-color: var(--page-color) !important;
}