settings
フォント
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@1,500;1,600;1,700;1,800&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@font-face {
font-family: 'l-safe';
src:local("Bahnschrift"), local("DIN"), local("ＭＳ Ｐゴシック"), local("MS PGothic");
unicode-range: U+006C;
}
html, body, #editor, .grid li{font-family:'l-safe','calibri','Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"Font Awesome 5 Free","Font Awesome 5 Brands","Roboto","メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
変数
code:style.css
:root {
--page-bgc: #202228;
--body-bgc: #373b44;
}
code:style.css
.grid li.page-list-item:not(data-page-title='音楽自習室', data-page-title='タグ一覧', data-page-title='tips'){
&data-page-links*='tips'::after {
content: "tips";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: #202228;
background-color: #babfe9;
}
/* ページのリンクに応じてホーム画面でラベルをつける */
&data-page-links*='reaper'::after {
content: "REAPER";
position: absolute;
bottom: 0px;
right: 0px;
padding: 2px 4px 1px;
background-color: #338c46;
color: #d3d3d3;
}
&data-page-links*='utau'::after {
content: "UTAU";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: #202228;
background-color: #ff71a3;
}
&data-page-links*='プラグイン'::after {
content: "プラグイン";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: #202228;
background-color: #fbf961;
}
&data-page-links*='音作り'::after {
content: "音作り";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
color: #d3d3d3;
background-color: #4d58de;
}
}
ホーム・本文・メニューバー
code:style.css
/* ホーム画面 */
.grid li.page-list-item a { box-shadow: none !important;}
/* ピン留めを段分け */
.page-list-item.pin + .page-list-item:not(.pin) {grid-column-start: 1;}
/* settingsを透明化 */
.page-list .grid li.page-list-itemdata-page-title="settings" {visibility: hidden;}
/* kofuを透明化*/
.page-list .grid li.page-list-itemdata-page-title="kofu" {display: none;}
/* "hid"を隠す */
.page-list .grid li.page-list-itemdata-page-links*="hid" {display: none;}
.page-list .grid li.page-list-itemdata-page-links*="転載" {display: none;}
.page {
box-shadow: none;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
/* タイトル */
.line.line-title .text {
border-bottom: 1px solid #c0c0c0;
padding-bottom: 1rem;
margin-bottom: 3rem;
}
/* テロメアをおとなしくする */
.line .telomere .telomere-border {
border-width: 0px 0px 0px 2.5px !important;
border-color: #52555D;
width: 0;
}
.unread {
border-color: #e7a270 !important;
}
/* メニューバー背景 */
.navbar{ background-color: rgba(32, 34, 40, 0.3);}
.search-form .form-group input:focus {
background-color: rgba(32, 34, 40, 0.4);
color: #d3d3d3);
}
.search-form .form-group input:is(:focus, .for-mobile) {
background-color: rgba(32, 34, 40, 0.4);
color: #d3d3d3;
}
.navbar-form .dropdown.open .dropdown-menu {
background-color: var(--body-bgc);
min-width: 100%;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.navbar-form .dropdown-menu a {
color: #d3d3d3;
}
.global-menu {
background-color: var(--body-bgc);
}
.global-menu li a {
color: #d3d3d3;
}
.global-menu li a.updated, .global-menu li a.highlight {
border-left: 2px solid #547efc;
}
.global-menu .project-list-tab a.active {
background-color: var(--body-bgc);
color: #d3d3d3;
}
.project-list-tab a {
color: #d3d3d3;
}
.global-menu li.project-list-filter a:hover {
background-color: var(--page-bgc);
}
code:コードブロック
code:style.css
.line span.code-block .code-block-start {
padding: 2px 4px 2px 4px;
}
table:テーブル
A1 A2 A3
B1 B2 B3
C1 C2 C3
code:style.css
.line span.table-block .table-block-start {
background-color: #272d35;
font-size: 1.1em;
padding: 2px 4px 2px 4px;
}
.line span.table-block .table-block-start a {
color: var(--font-color);
}
/* 折り返し */
.table-block {
overflow-wrap : break-word; /* できてない */
}
/* セル間に枠線 */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目を太字、中央揃え */
font-size: smaller;
font-weight: bolder;
text-align: center;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
インデント
code:style.css
/* 表示 */
.line .indent-mark .dot {
display: block;
position: absolute;
right: 10px;
top: 13px;
width: 2px;
height: 2px;
border-radius: 0;
}
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
/* 列の右に縦線*/
.indent-mark span:nth-child(6n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad,
.indent-mark span:nth-child(6n+6):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 1.5px solid #343740;
}
タグのラベル化 #settings
code:style.css
atype="hashTag" {
display: inline-block;
padding: 0.8px 6px;
margin: 0 8px 10px 0;
background: #2d3038;
color: #fff;
font-size: 0.9em;
border: 1.5px solid #535863;
border-radius: 4px;
transition: .3s;
transform: scale(1);
-webkit-transform: scale(1);
}
atype="hashTag":hover {
color: #fff;
border: 1.5px solid #909090;
transform: scale(1);
-webkit-transform: scale(1);
}
二重括弧による強調をマーカーっぽくする
code:style.css
.line strong:not(class) {
color: #fff;
background: linear-gradient(transparent 75%, rgba(255, 255, 102, 0.7) 25%);
}
文字色
code:style.css
.deco-\! {color: #dc322f;}
.deco-\# {color: #0000ff;}
.deco-\% {color: #a8a8a8;}
水平線
code:style.css
.deco-\' {
display: block;
border-bottom: 1px solid #c0c0c0;
}
小見出し
code:style.css
.deco-\| {
border-left: 4px solid #bbb;
padding-left: 11px;
margin-bottom: 3px;
}
大見出し
code:style.css
.deco-\~ {
display: block;
border-bottom-style: solid;
border-bottom-width:2px;
border-bottom-color: var(--level-3-border);
padding: 1px 0 1px 0.5em;
font-size: 1.7em !important;
margin-top: 0.1em;
margin-bottom: 0.1em;
}
右揃え
中央揃え画像下キャプション
code:style.css
.deco-\> {
position: absolute;
right: 0;
}
.deco-\+ {
display: block;
text-align: center;
}
.deco-\& {
display: block;
text-align: center;
font-size: smaller;
line-height: 1;
opacity: 0.8;
}
ポップアップメニュー
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: 900 100%/normal 'Font Awesome 5 Free';
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }