settings
code:style.css
/* 背景色、記事の背景色を白に */
body, .page, .line span.code-block .code-block-margin { background-color: #fafafd; } /* 黒を若干濃くする */
/* 上のバーの色を変更する */
.navbar-default { background-color: #47a9d6; } /* 検索候補を全て表示する */
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
/* テロメアを消す(左の線のやつ) */
.telomere-border {
opacity: 0 !important; }
.telomere-border.unread {
border-color: #f9f9f9 !important; } /* ページ一覧のピン留めの色変更 */
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, rgba(0,0,0,0) 50%, rgb(232, 232, 232) 50%); }
/* カード型ページリンクの枠 */
.grid li.page-list-item a {
border: 1px solid rgba(0,0,0,.14);
.grid li.page-list-item a .header { border-top: unset }
@media screen {
/* 本文のフォント設定: 文字サイズ */
.app:not(.presentation) .editor { font-size: 115% }
/* 本文のフォント設定: 行間 */
.app:not(.presentation) .line .text:not(.code-block) { line-height: 2.1 }
.line .indent-mark .dot { top: calc(100% - .2em) }
/* ページタイトルのフォント設定と罫線 */
.app:not(.presentation) .line.line-title .text {
font-size: calc(1.2vw + 2rem); color: #555; font-weight: bold; line-height: 1.2 !important; border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem; margin-bottom: 4rem;} }
/* メニューバーのhoverをなめらかに表示 */
.tool-btn:hover, .project-home:hover {
background-color: rgba(49, 55, 66, 0.1) !important;
transition: background-color 0.3s; }
/* フォント */
.text{
font-family: 'Roboto', "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
font-weight: bold;
padding: 2px 5px 2px 5px !important; }
.line span.code-block .code-block-start a { font-size: 110%; color: #919191} table{ width:100%; }
.scroll{
overflow: auto; /*tableをスクロールさせる*/
white-space: nowrap; } /*tableのセル内にある文字の折り返しを禁止*/
.scroll::-webkit-scrollbar{ /*tableにスクロールバーを追加*/
height: 5px; }
.scroll::-webkit-scrollbar-track{ /*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/
code:style.css
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.9em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1); }
-webkit-transform: scale(1.1);
transform: scale(1.1); }
/* インデントレベルでドットの色を変える */
.line .indent-mark .c-0 + .dot { background-color: #8d83c7; } .line .indent-mark .c-1 + .dot { background-color: #67abff; } .line .indent-mark .c-2 + .dot { background-color: #8dd56f; } .line .indent-mark .c-3 + .dot { background-color: #F7C756; } .line .indent-mark .c-4 + .dot { background-color: #EF7F47; } /* 画像の表示設定 */
.image {
border-radius: 7px;
max-height: none !important;
max-width: 95% !important; }
/* strongのレベルによって画像のサイズを変える */
.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; }
/* strongの時の線を左側に付けたり…とか */
.line strong.level-4{
padding: .2em .8em; /*文字周りの余白*/
border-left: solid .5em #ffaf58; /*左線（実線 太さ 色）*/ line-height: 2em; }
.line strong.level-5{
border-left: solid .5em #d14; line-height: 2em;
padding: .2em .8em;}
/* strongの時の文字色 */
.line strong.level-2 { color: #6a81ff; } .line strong.level-3 { color: #26abb3; } /* デフォルトの下線を消す */
/* マーカー(下線) */
.deco-\_{
background: linear-gradient(transparent 60%, #a4e6ff 60%, #a4e6ff 100%, transparent 100%); } /* アイコンサイズを大きくする */
.line img.icon {
height: 1.8em;
border-radius: 5px; }
/*数式でも点を表示する*/
.line.formula-line .dot { display: block }
/*控えめに表示するコメント機能*/
.deco-\# { color: gray; font-size: smaller; padding: 0 .2em }
/* !で強調（色を変える） */
.deco-\!{ color: rgb(249, 124, 0)}
/* 二重括弧[[]]を"[]"に変換する */
/* 選択範囲の背景色 */
hogehoge
hogehoge
こんな感じ。マーカーが引ける。 普通に強調もできる。
Strong 1
Strong 2
Strong 3
Strong 4
Strong 5
Strong 6
そうだなぁ… Pocala.icon
$ 3+4=7
これま？
へー
にゃー
うおー
プログラミングコンテストチャレンジブック
table:hoge
A B あ な ぐ
それな あい う え ら
強調はこんな感じで、コメントはこんな感じ