settings
https://gyazo.com/f5aad8e143b8d197c25d5e884bb315a2
これはかわいい設定アイコン
全体設定
Helpfeel Style
code:style.css.disable
@import "/api/code/pon-no-blog/Helpfeel_Fixture/style.helpfeel.custom.css";
Base CSS
他のプロジェクトでも使いまわせるCSSは base.css に記載するため、そちらをインポートする
code:style.css
@import "/api/code/pon-no-blog/settings/base.css";
code:base.css
/*
# AJpon Scrapbox CSS
## Overview
このCSSの詳細は以下のページを確認してください
## Variables
本CSSをインポート後、インポート先のCSSで !important 属性を付与して変数を上書きすることでいくつかの設定を変更することができます
変数はこのコメントの直後で宣言しているので、適宜上書きして使ってください
*/
外部インポート
code:base.css
変数
color theme
code:base.css
/* Color theme variables */
:root {
}
Font
code:base.css
body {
--base-fonts: 'Noto Serif JP', 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'AppIcons', sans-serif;
}
Image
code:base.css
/* Image variables */
:root {
--brand-logo: url('/assets/img/logo_cut.svg');
}
code:style.css
:root {
}
その他 / グローバル設定
フォント設定
code:base.css
body {
font-family: var(--base-fonts);
}
.editor {
font-family: var(--base-fonts);
font-size: 1.2em;
line-height: 2.0em;
}
Cosense サービス名変更の通知を消す
code:base.css
.rebrand-cosense-alert { display:none; }
記法関連
マーカー
[[ moji ]] と [* moji] を区別して、 [[ moji ]]を マーカー にする
code:base.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;
}
あ iiii aaa
あa
10%
a
良さげな見出しにする
*を3~5個使って強調すると、左側にマーク付く
code:base.css
/* レベルごとのオフセット追加や、フォントなどの全体設定 */
.line strong a:link {
text-decoration: none;
}
.line .deco:has(span.c-0) > strong {
width: 100%;
margin: 0.2em 0;
&:not(.level-1) {
line-height: 170%;
}
& > strong.level-1 {
font-size:1.25em;
margin-bottom: 0.5em;
}
& > strong.level-2 {
font-size:1.3em;
margin-bottom: 0.5em;
}
}
.line.section-title .deco:has(span.c-0) > strong.level-3 {
width: 100%;
padding: 0.1em 0.3em;
margin-bottom: 0.5em;
}
.line.section-title .deco:has(span.c-0) > strong {
display: inline-block;
font-weight:bold;
font-family:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}
/* 行頭にに装飾 */
.line.section-title .deco:has(span.c-0) {
& > strong.level-3, > strong.level-4, > strong.level-5 {
& .deco-\* {
padding: 0.25em 0.5em 0.3em 0.5em;
}
}
}
.line.section-title .deco:has(span.c-0) > strong.level-4 .deco-\* {
border-width: 7px;
}
.line.section-title .deco:has(span.c-0) > strong.level-5 .deco-\* {
border-width: 9px;
}
/* 下線追加 */
.line.section-title .deco:has(span.c-0) > strong.level-3 .deco-\*:after {
display: block;
position: absolute;
content: "";
width: 98%;
height: 2px;
opacity: 0.25;
}
.line.section-title .deco:has(span.c-0) > strong.level-4 .deco-\*:after,
.line.section-title .deco:has(span.c-0) > strong.level-5 .deco-\*:after {
display: block;
position: absolute;
content: "";
width: 100%;
height: 3px;
}
＃で始まるタグをラベル風にする
code:base.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
テーブルの直前の行が空白でないとおかしくなるので注意
24/12/22 :has 疑似クラスが主要ブラウザに対応したので解決
Sample Text
table:b
ラベル1 ラベル2 ラベル3
uouo uouo uouo
ouou ouou ouou
code:base.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
}
.line:has(.table-block-start) + .line .table-block .cell {
/* 1行目のセルの上 */
}
code:base.css
/* テーブルセルの背景設定 */
.table-block {
& .cell {
&:nth-child(odd), &:nth-child(even) {
background: unset;
}
}
& .table-block-start {
padding: unset;
font-size: unset;
background-color: unset;
& a {
color: unset;
}
}
}
code:style.css
/* 1行目を太字、中央揃え */
.line:has(.table-block-start) + .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;
}
table:long
A B C D E
title Test ABCDabcdABCDabcdABCD
code:base.css.d
/* 長いテーブルがあるページで、ビューをScroll可能にする */
.lines {
overflow-x: auto;
}
code:base.css.d
/* 長いテーブルがあるページで、ビューをScroll可能にする */
.table-block {
max-width: 100% !important;
overflow-x: auto;
}
.line:not(.cursor-line) .table-block .cell {
width: 25%;
min-width: 25% !important;
overflow-x: auto;
}
文字の位置揃えをする
[| センタリング]
[> 右寄せ]
[< 左寄せ]
センタリング
右寄せ
左寄せ
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:base.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:base.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:base.css
.deco-\# { color: var(--default); font-size: smaller; padding: 0 .2em }
落ち着いた打ち消し線
code:base.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:base.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:base.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: 20em;
}
/* ついでにビデオも */
span.deco strong.level-1 div.video-player video{
height: 10em;
}
span.deco strong.level-2 div.video-player video{
width: 20em;
}
画像を大きくする
[[https://image/url.png]]で横幅を100%まで広げる
code:style.css.disable
.strong-image {
width: 100%;
}
ページカスタマイズ関連
Helpfeel
? 設定
code:base.css
.line:not(.cursor-line) .helpfeel > :not(.entry){
display:none;
}
外部Scrapboxのリンク表示を変更
code:style.css.d
.line:not(.cursor-line) a.page-link::before {
content: attr(data-page-title)
}
.line:not(.cursor-line) a.page-link > span.char-index {
display:none;
}
カーソルをカスタマイズ
code:base.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:base.css
.cursor-line {
border-right: 3px solid var(--theme);
border-bottom: 0.5px dashed var(--default);
box-sizing: border-box;
}
テロメアをおとなしくする
code:base.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:base.css
body { background-color: var(--bg-color) !important }
行頭ドットをおとなしく
code:base.css
.line .indent-mark .dot {
top: 1.0em;
width: 5px;
height: 2px;
}
.line.number-list .dot {
width: 2px;
height: 2px;
}
ページ内スタイル
code:base.css
.page {
background-color: rgba(230, 235, 255, 0.05);
box-shadow: none;
border: var(--lightgray) solid 0.5px;
border-radius: 5px;
}
ページタイトルをいい感じに
code:base.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.d
.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:base.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:base.css
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body > span {}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.5em;
width: 1.6em;
height: 100%;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 0.5px var(--code-number-border-color);
/* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--code-accent-color);
}
}
画像を角丸に
code:base.css
img.image {
border-radius: 8px;
}
.strong-image {
border-radius: 8px;
}
角丸
code:style.css
@import "/api/code/shio/角丸UserCSS/style.css";
ヘッダーメニューに要素を集約
code:base.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:base.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
}
水平線を押せなくする
hr.icon
code:base.css
.line:not(.cursor-line) a.icon:is(
) {
pointer-events: none;
}
水平線を画像ではなく、CSSで描画
-.icon
code:base.css
.line:not(.cursor-line) .text>span:has(a.link.icon:is(
)) {
display: flex;
flex-wrap: wrap;
}
.line:not(.cursor-line) .text>span span:has(a.link.icon:is(
)) { flex-grow: 1 }
.line:not(.cursor-line) a.link.icon:is(
) {
width: 100%;
img, span { display: none; } /* spanはiconが読み込まれるまでの間に表示される */
&::before {
display: inline-block;
width: 100%;
vertical-align: middle;
content: "";
}
border-style: dashed none none;
}
}
ヘッダーのアイコンをScrapboxから変更する
Scrapboxのロゴ画像を変更する
丸だと40×40、四角だと35×35がちょうどよかったり
code:base.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: var(--brand-logo);
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:base.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:base.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}