settings

https://gyazo.com/c8d505e2ff6a54cd076b848eeaa41135

注意：このページの記述はサイト全体のデザインに関わるため、編集しないでください

前提：ProjectのThemeは City > Kyoto がベースでCSSをカスタマイズしています

https://gyazo.com/62d06a16a2ae5e90e9030e338e5160e2

サイト全体

タイトルロゴ

code:style.css

.project-home::before {

content:"";

display:inline-block;

width:340px;

height:49px;

background-size:contain;

}

.project-home .title{

padding-left:1.2em;

}

@media screen and (max-width: 768px) {

.quick-launch .project-home, .quick-launch .project-home .title {

overflow: visible!important;

}

.project-home::before {

display: block;

margin-left: auto;

margin-right: auto

}

.project-home .title{

display:none;

}

}

追加ボタンの位置

code:style.css

.layout-page > .new-button {

margin-top:10px;

}

ページタイトルのフォントサイズを少し小さく

code:style.css

.line.line-title .text {

font-size: 0.8em;

}

角丸UserCSS

code:style.css

.page,

.grid li.page-list-item a,

.grid.grid-md li.page-list-item a,

.grid.grid-lg li.page-list-item a {

border-radius: 15px;

}

.grid li.page-list-item a .header {

position: absolute;

bottom: 0px;

z-index: 1;

background: rgba(240, 240, 240, 0.9);

border-top: 1px;

}

.grid li.page-list-item a .icon img {

position: absolute;

top: 0px;

left: 0px;

}

.grid li.page-list-item a:hover {

border-radius: 10px ;

}

.container {

max-width: none;

}

Scrapboxアイコンをバーガーアイコンに置き換え

code:style.css

/* Scrapboxアイコンをバーガーアイコンに置き換え */

.navbar-brand img, .navbar-brand span, .brand-icon { display: none !important }

.navbar-brand::before {

}

ページ追加ボタンを検索ボックスの右に移動

code:style.css

.navbar-form { flex-flow: row-reverse }

.new-button { margin-left: 10px; margin-right: 0 }

code:style.css

.app .line .indent-mark .dot {

height: .2em; width: .4em; border-radius: 25%;

background-color: rgba(173,173,173,.85) }

.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }

code:style.css

/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */

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

.lines { counter-reset: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.line:not(.line-title) { counter-increment: line }

/* タイトルから数えるときは :not(.line-title) を消してね */

.app:not(.presentation) .line:not(.line-title)::before {

content: counter(line);

position: absolute; display: inline-block; left: -110px; z-index: 10;

min-width: 50px; text-align: right; vertical-align: middle;

/* 行番号のフォントとか色とかの指定はここ */

font-family: monospace; color: grey }

/* カーソル行の行番号を濃く表示する */

.line:not(.line-title)::before { opacity: .5 }

.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder }

}

code:style.css

/* コード記法の行番号を表示する -- ウィンドウ幅768px以上で適用 */

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

.section-title, .code-block-start { counter-reset: codeline }

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:style.css

.line .telomere .telomere-border,

.line .telomere .telomere-border.unread {

transition: none;

.line .telomere .telomere-border:hover

.line .telomere .telomere-border.unread:hover {

box-sizing: border-box; width: auto;

/* ↓新着以外のテロメアの色と太さ */

/* ↓新着のテロメアの色と太さ */

ページ追加ボタンの色を赤色に

code:style.css

.new-button .vertical-line {

}

.new-button .horizontal-line {

}

ドロップダウンメニューの強調色を赤色に

code:style.css

}

.global-menu li a.updated, .global-menu li a.highlight {

padding-left: 18px;

}

タイトル文字のフォントサイズを少し小さく

code:style.css

.title{

font-size:0.86em;

}

カーソルを少しだけ太く

code:style.css

.cursor {width: 2px; background-color: rgba(0,0,0);}

ページ装飾

引用

code:style.css

span.quote {

padding: 4px;

width: 100%;

display: block;

font-family: 'Times New Roman','UDデジタル教科書体','游教科書体 横用','YuKyo_Yoko-Medium','游明朝体','YuMincho','游明朝','Yu Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','BIZ UDP明朝 Medium',serif;

}

テーブル

code:style.css

.table-block .cell {

/* 全てのセルの右と下 */

}

.table-block .cell:first-child {

/* 1列目のセルの左 */

}

.section-title + .line .table-block .cell {

/* 1行目のセルの上 */

}

/* 1行目を太字、中央揃え */

.section-title + .line .table-block .cell {

font-weight: bolder;

text-align: center;

}

コードスタイル

code:style.css

.line span.code-block .code-block-start {

padding: 2px 5px 2px 5px !important;

}

タグ

# ではじまるタグをラベル風にする

code:style.css

display: inline-block;

padding: 0px 8px;

margin: 0 6px 0 0;

font-size: 0.6em;

border-radius: 3px;

/* transition: .3s; */

-webkit-transform: scale(1);

transform: scale(1);

}

}

吹き出し

code:style.css

/* フキダシ記法版 */

.line:not(.cursor-line) .deco-\{ {

display: inline-block; position: relative; max-width: calc(100% - 4em);

padding: 3px 4px 2px 5px; margin-left: .6em;

border-radius: .4em; border-bottom-left-radius: 0 }

.line:not(.cursor-line) .deco-\{::after {

display: block; /* reduce the damage in FF3.0 */

position: absolute; bottom: 0; left: -0.45em;

width: 0; content: '';

border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(161, 136, 127, 0.85) transparent }

太字

code:style.css

/*.deco-\! {*/

.deco-\* {

font-weight: bold;

}

赤太字

code:style.css

/*.deco-\! {*/

.deco-\" {

color: red; /* 赤文字 */

font-weight: bold;

}

バーニング記法

code:style.css

/*.deco-\! {*/

.deco-\' {

background: linear-gradient( to right,

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

padding: 0.1em 0.2em 0.1em 0.2em;

animation: rainbow 4s linear infinite;

}

@keyframes rainbow {

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

}

EOL