settings
https://gyazo.com/f5aad8e143b8d197c25d5e884bb315a2
これはかわいい設定アイコン
全体設定
Helpfeel Style
code:style.css
@import "/api/code/pon-no-blog/Helpfeel_Fixture/style.helpfeel.custom.css";
フォント設定
code:style.css
body {
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.editor {
font-family: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
font-size: 1.2em;
line-height: 2.0em;
}
color theme
code:style.css
:root {
}
記法関連
マーカー
[[ moji ]] と [* moji] を区別して、 [[ moji ]]を マーカー にする
code:style.css
.line strong:not(class) { background: linear-gradient(transparent 25%, rgba(58,215,254,0.6) 40%);
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
良さげな見出しにする
*を3~5個使って強調すると、左側にマーク付く
code:style.css
.line strong {
width: 100%;
margin: 0.2em 0;
}
.line strong a:link {
text-decoration: none;
}
.line strong:not(.level-1) {
line-height: 170%;
}
.line strong.level-3 .deco-\*,
.line strong.level-4 .deco-\*,
.line strong.level-5 .deco-\* {
padding: 0.25em 0.5em 0.3em 0.5em;
}
.line strong.level-4 .deco-\* {
border-width: 7px;
}
.line strong.level-5 .deco-\* {
border-width: 9px;
}
.line strong.level-4 .deco-\*:after,
.line strong.level-5 .deco-\*:after {
display: block;
position: absolute;
content: "";
width: 100%;
height: 3px;
}
＃で始まるタグをラベル風にする
code:style.css
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: rgba(0, 0, 0, 0);
font-size: 0.8em;
border-radius: 4px;
}
}
visibility: hidden;
position: absolute;
}
div.cursor-line a.page-linktype=hashTag > span:first-child { visibility: visible;
position: relative;
}
テーブルに罫線を追加
table:a
ラベル1 ラベル2 ラベル3
uouo uouo uouo
ouou ouou ouou
テーブルの直前の行が空白でないとおかしくなるので注意
table:b
ラベル1 ラベル2 ラベル3
uouo uouo uouo
ouou ouou ouou
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-size: smaller;
font-weight: bolder;
text-align: center;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
文字の位置揃えをする
[| センタリング]
[> 右寄せ]
[< 左寄せ]
センタリング
右寄せ
左寄せ
code:style.css
.line .deco-\|,
.line .deco-\>,
.line .deco-\< {
border-left: none !important;
}
/* 中央寄せ */
.line:not(.cursor-line) .deco-\| { position: absolute; width: 100%; text-align: center }
.line:not(.cursor-line) .deco-\| img.image { object-fit: contain; margin: 0; flex-wrap: wrap}
/* 右寄せ */
.line:not(.cursor-line) .deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
.line:not(.cursor-line) .deco-\< { position: absolute; width: 100%; text-align: left }
付箋記法
[~ こんな感じに書くと ] 付箋が貼られる
code:style.css
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
border-right: 1rem solid var(--highlight);
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
.presentation .line .deco-\~ { position: static; max-width: 100% }
/* 太字記法との組み合わせでスタイルを変える場合 */
.line .level-2 .deco-\~ { border-right-color: #009175 } .line .level-3 .deco-\~ { border-right-color: #EFBB33 } .line .level-4 .deco-\~ { border-right-color: #F23E2E } /* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
文中に引用を挿入
[" ここは引用] ここは引用
例）文章の途中ですがここだけ引用です。
code:style.css
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f10d'; vertical-align: super } 補足
[# コメントっぽい]コメントっぽい
code:style.css
.deco-\# { color: var(--default); font-size: smaller; padding: 0 .2em }
落ち着いた打ち消し線
code:style.css
.deco-\-, .deco strike { color: var(--default) }
バッジっぽいやつ
Ex [! Ex]
Tips [& Tips]
Info [% Info]
code:style.css
.deco-\%,.deco-\!,.deco-\& { display: inline-block; min-width: 3.2em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF;} .deco-\! {
}
.deco-\% {
}
.deco-\& {
}
赤文字
code:style.css
.deco-\+ { color: red;}
見出し用
文頭で使う、これ単体だとあんまりうれしくない
code:style.css
.deco-\) { font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif; font-weight: bold; }
画像を小さくして表示
[* [hoge.png]]で小さく表示できる
gyazoでも適応できます
height: 10emの10emの値を弄れば、画像サイズを変更できる
code:style.css
span.deco strong.level-1 span.modal-image a img.image{
height: 10em;
}
span.deco strong.level-2 span.modal-image a img.image{
width: 15em;
}
/* ついでにビデオも */
span.deco strong.level-1 div.video-player video{
height: 10em;
}
span.deco strong.level-2 div.video-player video{
width: 15em;
}
画像を大きくする
[[https://image/url.png]]で横幅を100%まで広げる
code:style.css.disable
.strong-image {
width: 100%;
}
ページカスタマイズ関連
カーソルをカスタマイズ
code:style.css
.cursor {
width: 3px;
background-color: rgba(255, 255, 255,.6);
animation: blink 1.2s infinite;
}
@keyframes blink {
0% { opacity: 0; }
25% { opacity: 0.5; }
50% { opacity: 1; }
75% { opacity: 0.5; }
100% { opacity: 0;}
}
.cursor-line.with-image {
animation-name: none;
}
カーソル行ハイライト
code:style.css
.cursor-line {
border-right: 3px solid var(--theme);
border-bottom: 0.5px dashed var(--default);
box-sizing: border-box;
}
テロメアをおとなしくする
code:style.css
.line .telomere .telomere-border {
border-width: 0px 0px 0px 3px !important;
border-color: var(--theme);
width: 0;
}
.line .telomere .telomere-border.unread { border-color: var(--highlight) !important }
バックグラウンドの色を変える
code:style.css
body { background-color: var(--bg-color) !important }
行頭ドットをおとなしく
code:style.css
.line .indent-mark .dot {
top: 1.0em;
width:5px;
height:2px;
background-color:#cccccc;
}
ページ内スタイル
code:style.css
.page {
background-color: rgba(230, 235, 255, 0.05);
box-shadow: none;
border: var(--lightgray) solid 0.5px;
border-radius: 5px;
}
ページタイトルをいい感じに
code:style.css
.line.line-title .text{
text-align:center !important;
}
.line.line-title {
border-bottom:thin solid var(--lightgray);
margin-bottom:40px;
font-weight:bold;
color:#424242;
}
字下げをしない場合に記法で小見出しに
code:style.css
.line.section-title strong {
/* display: inline-block; */
font-weight:bold;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.line.section-title strong.level-1 {
font-size:1.25em;
margin-bottom: 0.5em;
}
.line.section-title strong.level-2 {
font-size:1.3em;
margin-bottom: 0.5em;
}
.line.section-title strong.level-3 {
width: 100%;
padding: 0.1em 0.3em;
margin-bottom: 0.5em;
}
コードブロックのファイル名を見やすく
code:style.css
.line span.code-block .code-block-start {
background-color: var(--theme);
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: var(--bg-color)}
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
コードブロックに行番号を表示
code:style.css.disable
/* コード記法の行番号を表示 -- ウィンドウ幅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: 'Source Code Pro', monospace; color: gray; }
/* カーソル行の行番号を濃く表示する */
.code-block code > span:not(class)::before { opacity: .5 } .cursor-line .code-block code > span:not(class)::before { opacity: 1; font-weight: bolder } } 画像を角丸に
code:style.css
img.image {
border-radius: 8px;
}
.strong-image {
border-radius: 8px;
}
角丸
code:style.css
@import "/api/code/shio/角丸UserCSS/style.css";
ヘッダーメニューに要素を集約
code:style.css
/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */
/* ※次のnavbar固定と同時に使う必要がある */
.quick-launch .project-home:hover {background-color: rgba(150,150,150,0.25)!important}
@media screen and (min-width: 768px) {
.quick-launch .project-home {
position: fixed; top: 0px; left: calc((100% - 1080px)/2); z-index: 990; }
/*.page { padding-top: 0 }*/
.quick-launch .title { color: #FFF; font-size: 22px; }} /*
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home { left: 80px }
.quick-launch .title { color: #FFF; font-size: 22px; }} @media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home { left: 120px }
.quick-launch .title { color: #FFF; font-size: 22px; }} @media screen and (min-width: 1261px) {
.quick-launch .project-home { left: calc((100% - 1260px)/2 + 120px) }
.quick-launch .title { color: #FFF; font-size: 22px; }} */
@media screen and (min-width: 768px) {
.quick-launch .project-home { left: 96px }
.quick-launch .title { color: #FFF; font-size: 22px; }} ヘッダーメニューを固定する & 色を変更
code:style.css
/* はりつくメニューバー */
/*
body:not(.presentation) {
padding-top: 90px;
padding-right: 0 !important
}
*/
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset;
border-bottom: solid #666 0.5px; background-color: rgba(34,34,34,0.95);
}
.dropdown.open .dropdown-menu {
position: absolute;
left: auto;
top: auto;
max-height: calc(100vh - 100px);
overflow-y: auto
}
.page-menu {
top: 64px;
}
.page-menu .dropdown.open .dropdown-menu {
position: absolute;
top: 0
}
.search-form .form-group input {
background-color: var(--gray);
border: solid var(--default) 0.5px;
}
.new-button {
background-color: var(--bg-color);
border: solid var(--default) 0.5px;
}
.new-button .vertical-line,
.new-button .horizontal-line {
background-color: var(--default);
}
.new-button:hover {
background-color: var(--highlight);
border: none;
}
.new-button:hover .vertical-line,
.new-button:hover .horizontal-line {
background-color: var(--bg-color);
}
a.mobile-pagemenu-toggle {
display: none !important
}
a.mobile-search-toggle {
color: var(--bg-color) !important
}
水平線を押せなくする
/icons/hr.icon
code:style.css
pointer-events: none;
}
ヘッダーのアイコンをScrapboxから変更する
Scrapboxのロゴ画像を変更する
丸だと40×40、四角だと35×35がちょうどよかったり
code:style.css
/* ロゴ変更 */
/* 2021/01/18以前
.navbar .navbar-brand img {
display: none;
}
*/
.navbar .navbar-brand .brand-icon {
display: none;
}
.navbar-brand {
position: relative;
}
.navbar-brand:before {
content: '';
background-size: contain;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 20%;
}
.global-menu-for-user.global-menu.dropdown-menu {
position: absolute;
left: 0px;
}
ページリスト設定
ページリストに表示されるアイコンをカード内に収める & 角丸
code:style.css
.grid li.page-list-item a .header {
padding-bottom: 0;
margin-bottom: 1%;
overflow: hidden;
padding: 7px 5px !important;
height: 35%;
}
.grid li.page-list-item a .icon {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5px;
height: 65%;
}
.grid li.page-list-item a .icon img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: 6px;
}
カードの設定
code:style.css
/* 形状 */
.page-list ul.grid {
display: flex;
}
.page-list .grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
padding: 3% 3%;
}
.page-list .grid li {
/* margin: 20px 15px; */
margin: 20px auto;
aspect-ratio: auto;
}
.grid li.page-list-item a {
/* background-color: var(--bg-color); */
/*box-shadow: none !important;*/
box-shadow: 0 1px 0 rgba(0,0,0,0);
width: 100%;
height: 100%;
transition: all 300ms 0s ease;
}
.grid li.page-list-item a .content {
border-radius: 4px;
height: 100%;
justify-content: center;
}
/* 上部ライン */
ul.grid li.page-list-item a .header{
border-top: solid 2px var(--gray) !important;
transition: all 200ms 0s ease;
}
ul.grid li.page-list-item a:hover .header{
border-top: solid 2px var(--highlight) !important;
}
ul.grid li.page-list-item a:hover{
box-shadow: 0 1px 0 rgba(0,0,0,0);
}
ul.grid li.page-list-item a:hover .icon{
z-index: 2;
}
/* タイトル */
.grid li.page-list-item a .header .title {
text-align:center;
border-bottom:thin solid var(--lightgray);
margin-bottom:40px;
/*font-size:smaller;*/
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
/* カードを大きくする */
/* 全てのカード設定 */
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
/*
width : 226px !important;
height: 264px !important;
*/
width: auto;
height: 264px;
max-width: 30%; /* カードの最大幅 */
min-width: 12%;
}
/* ページ内の関連ページへのリンクカード */
.page-list .grid li:has(.page-wrapper),
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
width: 100%;
height: 264px;
max-width: 100%;
min-width: 20%;
}
@media screen and (max-width:900px) {
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
max-width: 100%;
min-width: 34%;
width: auto;
}
}
@media screen and (max-width:600px) {
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
max-width: 100%;
min-width: 68%;
width: auto;
}
}
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '='; font-family: 'Yu-Gothic'; font-size: 18px; color: var(--default); bottom: 0;
display: inline-block;}
リストからsettingsを消す
code:style.css.disable
display: none;
}
code:style.css
display: none;
}
display: none;
}
display: none;
}
display: none;
}
;){kind=link}