settings
基本方針
デスクトップ想定
だけど携帯環境やログアウトした状態でもレイアウトそんな変わらない
日記みたいなの書いた時にわかりやすくしたい
色々な人のページから拝借していてライセンス表記がないものもあるので怒られたら消えます。
全部コピーしたいときは以下
1. settings というページを作る
2. code:style.cssという行を作りEnterを押す すると多分コードブロック出る
3. そのコードブロックに、以下ページを開いて出てきた内容をペースト
自分のfavicon似合わせたり出来る（プロジェクトとページ名を変えるだけ）
code:style.css
.brand-icon {
--logo-url: url("/api/pages/benkiopen/mouii/icon");
width: 40px;
height: 40px;
background-color: none;
background-image: var(--logo-url);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 2px solid transparent;
border-radius: 30%;
svg { display: none; }
}
ページのサイズが微妙だったから左右広げて調整とマージンとった
table:infobox
に対応した
code:style.disable
/* ページの表示幅とずれるボタンの調整をするっぷる */
@media (min-width: 768px) {
.container {
max-width: none;
padding-right: 1%;
padding-left: 1%;
transform-origin: top right;
}
}
@media (min-width: 768px) {
.col-page {
max-width: initial !important;
position: absolute;
padding-top: 0px;
padding-right: 4%;
padding-bottom: 2%;
padding-left: 1%;
transform-origin: top right;
}
}
@media (min-width: 768px) {
.page-menu {
position: absolute !important;
top: 10%;
right: 3px;
z-index: 100;
transform-origin: top right;
}
}
/* ScrapboxのフォントをUbuntu Fontに変更する */
font-family: 'Ubuntu', sans-serif !important;
}
homeのsort byを常時展開し中央で表示する
code:style.disable
@media(width > 768px) {
/* ホーム画面 */
.quick-launch .right-box {
gap: 1em;
}
.page-sort-menu {
width: 100%;
.tool-btn {
display: none;
}
.dropdown-menu {
z-index: 0;
position: relative;
width: auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
background: transparent;
box-shadow: none;
border: none;
column-gap: 1.4em;
margin: 0;
li > a {
padding: 0;
}
}
.dropdown-header {
display: none;
}
}
/* 関連ページ */
}
ピンどめを段落わけ、テキストのみに
mediaの指示いじったら奇数でも動くようになったかも
code:style.css
/* ------- 共通ルール ------- */
/* pin の直後の通常カードは列頭に戻す */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/* pin 基本スタイル */
.grid li.pin {
height: 32px;
width: 100%;
margin-bottom: -3px;
}
/* pin カードの装飾 */
.grid li.page-list-item.pin a {
background-color: var(--card-bg);
border-radius: 7px;
margin: 0;
box-shadow: none;
}
.grid li.page-list-item a .header.pinned {
border-top: none;
padding: 6px 5px;
}
.grid li.page-list-item.pin a .title {
font-size: 12px;
color: var(--card-title-color);
max-height: 20px;
text-align: center;
}
.grid li.page-list-item.pin a .content :is(.description, .icon) {
display: none;
}
.grid li.page-list-item a .pin {
background: none;
}
/* ------- タッチ端末かつ横幅 640px 以上でだけ発動 ------- */
@media (hover: none) and (min-width: 640px) {
/* 6 列グリッドに張り替え */
.page-list ul.grid {
grid-template-columns: repeat(6, 1fr);
}
/* pin は 2 列ぶん確保 (= 6 枚／行) */
.grid li.pin {
grid-column: span 2;
}
/* 通常カードを左右 3 列ずつに配置 (= 4 枚／行) */
.grid li:not(.pin):nth-child(odd) {
grid-column: 1 / 4;
}
.grid li:not(.pin):nth-child(even) {
grid-column: 4 / 7;
}
}
ホーム画面のサムネイル調整。どこかで拾ったが失念してしまった。調整済み…
code:style.d
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
position: relative;
max-height: 100px;
max-width: 95%;
padding-left: 5%;
vertical-align: middle;
border-radius: 3px;
}
外部リンクにアイコン付与。どこかで拾ったものを少しいじった。
code:style.css
.line a.link {
color: var(--new-button-bg, #7F92FF) !important; }
.line a.link:hover {
color: var(--new-button-hover-bg, #3a9d50) !important; }
/* 外部リンクにアイコンをつける */
.line a:not(.icon).link::after {
font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
content: '\f35d';
display: inline-block;
font-size: 0.8em;
font-weight: bold;
margin-left: .4em;
}
homeのcard群のデザイン変更。同上。
code:style.d
/* タイトルの上のBorderを消して 背景色を設定 */
.grid li.page-list-item a .header{
border-top: 3px;
}
code:style.disable
@media screen {
.quick-launch .project-home {
position: fixed;
top: -2px;
left: 60px;
z-index: 1000;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home {
left: 75px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home {
left: 90px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .project-home {
/* left: calc((100% - 1280px)/2 + 80px); */
left: calc((100% - 1280px)/2 + 100px);
}
}
.quick-launch .project-home {
--tool-text-color: white;
}
code num
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅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: Menlo,Monaco,Consolas,"Courier New",monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.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
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
}
中央寄せ
code:style.css
.line:not(.cursor-line) .deco-\' {
position: absolute;
width: 100%;
text-align: center;
}
do
code:style.css
/* 拡張装飾記法 見出しっぽい太字テキスト */
.deco-\( { border-left: .3em solid #800080; padding-left: .4rem; font-weight: bold; font-size: 120%; line-height: 1.42857; }
これをする
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background:linear-gradient(transparent 80%, #6cf 50%); }
改行時横線をいれる
code:style.css
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: 100%;
position: absolute;
left: -0%;
border: 1px lightgray solid;
}
mouii.icon size
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 2em; }
titleをcenter,boldに
code:style.css
.line-title .text{
text-align: center;
font-weight: bold;
}
Settingsページをトップページから隠匿する
code:style.no
li.page-list-item:is(
背景画像
code:style.css
body::before{
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: bottom;
z-index: -1;
filter: blur(2px) brightness(0.5);
}
code:style.css
.dropdown-toggle {
color: white !important;
}
インデント
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 4
background-color: rgb(140 140 140);
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {
position: relative;
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
content: " ";
position: absolute;
left: 50%;
margin: -4px 0;
border-left: 1px solid var(--page-text-color, #4a4a4a); /* 色の指定 */ opacity: 0.125;
}
code:style.disable
/* Scrapbox全体に BIZ UDPGothic を適用 */
font-family: 'BIZ UDPGothic', sans-serif !important;
}
ページ幅
code:style.css
/* iPhone SE2 クラスの狭幅（640px 未満）は触らず、トップページだけ幅を広げる */
@media (min-width: 640px) {
/* .page-list を直下に持つ container ＝ トップページだけ */
.container:has(> .page-list) {
max-width: initial;
width: 85vw;
}
/* 個別ページで強制されている .page-column の列指定を解除したい場合 */
body:has(.page-list) .page-column {
grid-template-columns: initial;
}
}
;){kind=link}