settings
code:style.css
code:style.css
code:style.css
.page-list ul.grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 基本は2列 */
gap: 10px;
grid-auto-flow: dense; /* 自動で隙間を詰める */
}
/* 奇数行(1列にする) */
.page-list ul.grid > *:nth-child(3n + 1) {
grid-column: span 2; /* 幅いっぱいに */
}
/* 画面幅が650px未満のとき、すべて1列に */
@media (width < 650px) {
.page-list ul.grid {
grid-template-columns: 1fr !important; /* 1列に */
}
.page-list ul.grid > * {
grid-column: span 1 !important; /* すべて通常幅 */
}
}
code:style.css
display: none!important;
}
display: none!important;
}
.page-menu .tool-btn .fa, .page-menu .tool-btn .fab, .page-menu .tool-btn .far, .page-menu .tool-btn .fas{
display:none!important;
}
code:style.css
.page-list-item .description .link {
}
code:style.css
.page-list-item .description .page-link {
}
code:style.css
.line a.page-link {
}
.line a.link {
}
infoをクリックした時のやつ整理する
code:style.css
.dropdown-menu.dropdown-menu-right {
border: none;
font-size:12px;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 400;
}
.page-menu .dropdown-menu .divider {
display: none;
}
.page-menu .dropdown .created img, .page-menu .dropdown .updated img, .page-menu .dropdown .collaborators img {
width: 20px;
height: 20px;
vertical-align: text-bottom;
display: none;
}
display: none;
}
code:style.css
.list li.page-list-item a .description {
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 800;
display: block;
margin: 15px 0 10px;
font-size: 11px;
line-height: 13px;
max-height: 28px;
overflow: hidden;
}
.list li.page-list-item a .title-with-description {
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 800!important;
font-size: 15px;
line-height: 20px;
}
.project-search {
display:none!important;
}
.search-result-list .search-result-list-header .search-result-list-tab {
display: none!important;
}
.search-result-list .search-options {
display: none!important;
}
code:style.css
.grid li.page-list-item a .description {
font-family: 'Noto Sans JP', 'Zen Kaku Gothic New', 'Zen Maru Gothic', sans-serif!important;
font-weight: 400!important; /* Medium 500 */
line-height: 2.1!important; /* 行間を広げる */
letter-spacing: 0.05em!important; /* 字間を広げる */
}
.grid li.page-list-item a {
}
検索したときの見た目調整といらない要素消す
code:style.css
.list li.page-list-item {
list-style: none;
margin: 0;
padding: 0;
box-shadow: none!important;
font-family: "Roboto", Helvetica, Arial, "Hiragino Sans", sans-serif;
}
.list li.page-list-item {
list-style: none;
margin: 0;
padding: 0;
box-shadow: none !important;
font-family: "Roboto", Helvetica, Arial, "Hiragino Sans", sans-serif;
}
code:style.css
.lines{
line-height:3!important;
font-size:14px!important;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
letter-spacing: 0.2px;
}
@media (max-width: 649px) {
.lines {
line-height: 2.5 !important; /* スマホ用の行間 */
font-size: 10.5px !important; /* スマホ用の文字サイズ */
letter-spacing: 0.1px; /* スマホ用の文字間 */
}
}
code:style.css
.grid li.page-list-item a .header {
padding: 0px 0px;
}
code:style.css
.dropdown-menu>li>a {
text-overflow: ellipsis;
font-family: "Noto Sans JP", serif;
font-weight: 400;
overflow: hidden;
padding: 0 16px;
font-size:12px!important;
line-height: 28px;
display: flex;
align-items: center;
}
.project-list-tab > a.active {
font-size:13px;
}
}
.user-menu li a.highlight {
}
code:style.css
.search-form .form-group input {
width: 100%;
border-radius: 50px;
padding: 0 10px;
height: 32px;
border: 2px solid rgba(0, 0, 0, 1)!important;
box-shadow: none;
font-size: 14px;
color: var(--search-form-text-color, rgba(255, 255, 255, 0.35));
background-color: var(--search-form-bg, rgba(255, 255, 255, 0.15));
code:style.css
.project-display-name{
font-family: "Noto Sans JP", serif;
line-height:3!important;
font-size:12px!important;
}
code:style.css
.lines{
line-height:3!important;
font-size:13px!important;
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
letter-spacing: 0.2px;
}
code:style.css
.open > .dropdown-menu {
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
}
.project-list-filter{
display:none!important;
}
.dropdown-menu>li>a {
}
}
.project-list-tab > a.active {
font-size:13px;
}
.navbar .navbar-brand .kamon-caret-down {
}
.navbar {
--button-hover-color: rgba(0, 0, 0, 0);
--button-active-color: rgba(0, 0, 0, 0);
}
}
.project-home .title:hover {
}
code:style.css
/* .open > .dropdown-menu の影をなくす */
.open > .dropdown-menu {
box-shadow: none; /* 影を完全に消す */
}
code:style.css
/* .body のフォントを変更 */
.body {
.noto-sans-jp-<uniquifier> {
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
}
code:style.css
/* .page のフォントを変更 */
.page {
font-family: font-family: "Noto Sans JP", serif;
font-weight: 400; /* フォントの重さを 500 に設定 */
}
code:style.css
/* .line.line-title .text のフォントを変更 */
.line.line-title .text {
font-family: "Noto Sans JP", serif;
font-weight: 500; /* フォントの太さを 900 に設定 */
}
code:style.css
body {
--search-form-bg: transparent!important;
--body-bg: white;
}
code:style.css
/* .navbar .navbar-menu .user-name のフォントを変更 */
.navbar .navbar-menu .user-name {
font-family: "Noto Sans JP", serif;
}
code:style.css
/* .quick-launch のフォントを変更し、太字にする */
.quick-launch {
font-family: "Noto Sans JP", serif;
font-weight: bold; /* フォントを太字に設定 */
}
code:style.css
page-list-mode-menu{
}
.form-control {
border-bottom: 1px solid #000000; /* 下に1pxのボーダーラインを追加 */ }
code:style.css
/* scrapboxのアイコンを変える */
.brand-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; }
}
/* .navbar の背景色を透明に */
.navbar {
background-color: transparent;
padding-top: 10px; /* 上の余白 */
padding-bottom: 10px; /* 下の余白 */
backdrop-filter: none; /* 背景のぼかし効果を無効にする */
-webkit-backdrop-filter: none; /* Safari 用のぼかし効果を無効にする */
}
/* 変数の設定 */
:root {
--new-button-bg: var(--body-bg); /* body-bgに基づく背景色 */
}
/* .new-button の基本的なスタイル */
.new-button {
background-color: var(--new-button-bg); /* 背景色は変数から */
color: black; /* 文字色は黒 */
}
}
}
code:style.css
.search-form .form-group {
& input {
background: rgba(255, 255, 255, .0);
&:focus {
border-radius: 16px 16px 0 0 !important;
}
}
& .dropdown-menu {
border: 1px solid black;
margin: 0 -1px 0;
border-radius: 0 0 16px 16px;
max-width: auto;
width: calc(100% + 100px);
}
& button {
right: 5px;
}
}
.search-form .form-group input {
border-radius: 150px; /* 角を丸く設定 */
border: 2px solid #000000; /* 2pxのボーダーラインを追加 */ }
.scroll-bar-overlay .scroll-bar-overlay-quiet{
background-color: transparent;
}
.search-form .form-group button .kamon {
height: 16px;
}
hideタグで記事を消す
code:style.css
display: none;
}
画像をクリックしてgyazo開いてごちゃるのが嫌
code:style.css
.full-content-modal .modal-body .full-content {
display: inline-block;
pointer-events: none;
height: 90vh; /* 画面の高さの90%に縮小 */
width: auto; /* 幅は内容に合わせる */
object-fit: contain;
}
@media (max-width: 650px) {
.full-content-modal .modal-body .full-content {
height: auto;
width: auto;
}
}
.full-content-modal .modal-body img.full-content, .full-content-modal .modal-body svg.full-content {
background: none !important;
}
button.btn.btn-primary.draw-button {
display: none;
}
code:style.memo2
.full-content-modal .modal-body .full-content {
display: inline-block;
pointer-events: none;
max-height: none;
max-width: none;
height: auto;
width: auto;
object-fit: none; /* オリジナルサイズで表示 */
}
@media (max-width: 650px) {
.full-content-modal .modal-body .full-content {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
}
button.btn.btn-primary.draw-button {
display: none;
}
code:style.memo
.full-content-modal .modal-body .full-content {
display: inline-block;
pointer-events: none;
height: 90vh; /* 画面の高さの90%に縮小 */
width: auto; /* 幅は内容に合わせる */
object-fit: contain;
}
@media (max-width: 650px) {
.full-content-modal .modal-body .full-content {
height: auto;
width: auto;
}
}
.full-content-modal .modal-body img.full-content, .full-content-modal .modal-body svg.full-content {
background: none !important;
}
button.btn.btn-primary.draw-button {
display: none;
}
画像を100%に
code:style.css
.line {
width: 100%;
}
.line .image {
width: 100%;
max-width: 100%;
max-height: none;
height: auto;
}
新規ページ消す
code:style.css
.grid li.page-list-item.empty {
display:none;
}
.relation-label.empty-links {
display: none !important;
}
既存リンクのカードを消す
code:style.css
.relation-label.links {
display:none !important;
}
.related-page-list {
padding: 0 8px;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
& .grid li {
width: 100%;
height: 100%;
}
ページリンク消す
code:style.css
.relation-label.headword {
display: none !important;
}
リンク
code:style.css
.related-page-list {
padding: 0 8px;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
& .grid li {
width: 100%;
height: 100%;
}
& li.relation-label.empty-links a {
background-size: 4px 4px;
background-color: black;
}
& li.relation-label.empty-links .title,
& li.relation-label.empty-links .icon-bg {
color: white;
}
& li.relation-label.empty-links .arrow {
display:none;
}
}
.relation-label.empty-links {
display:none !important;
}
.relation-label.links {
display:none !important;
}
.related-page-list {
padding: 0 8px;
display: flex;
flex-direction: column;
gap: var(--grid-gap);
& .grid li {
width: 100%;
height: 100%;
}
& li.relation-label.links a {
background-size: 4px 4px;
background-color: black;
}
& li.relation-label.links .title,
& li.relation-label.links .icon-bg {
color: white;
}
& li.relation-label.links .arrow {
display:none;
}
}
.grid li.page-list-item.empty {
display:none;
}
.related-page-list .toolbar .related-page-list-search {
border-bottom: 1px solid #333; /* 下に1pxの黒い線を追加 */ padding-bottom: 8px; /* 線と要素の間に少し余白を追加 */
}
& .grid li.relation-label a {
background-size: 4px 4px;
background-color: black;
}
& .grid li.relation-label a .title,
& .grid li.relation-label a .icon-bg {
color: white;
}
& .grid li.relation-label .arrow {
display:none;
}
}
& .grid li.relation-label a {
display:none !important;
}
消す
code:style.css
display: none !important;
}
.page-filter-menu {
display: none;
}
toppage_size
code:style.css
div.page-list{
max-width:1000px;
margin-left:auto;
margin-right:auto
}
page_size
code:style.css
.page{
max-width:1000px;
margin-left:auto;
margin-right:auto
}
page 一行ずつにしたりする設定
code:style.css
.page-list ul.grid {
grid-template-columns: repeat(3, 3fr);
}
.related-page-list ul.grid {
grid-template-columns: repeat(3, 3fr);
}
@media (width < 650px) {
.page-list ul.grid {
grid-template-columns: repeat(1, 1fr);
}
.related-page-list ul.grid {
grid-template-columns: repeat(1, 1fr);
}
}
トップページのリストの比率
code:style.css
input.grid-size-range { display: none }
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
/* width : 300px !important; */
width: 100%!important;
height: 190px !important;
}
@media (width < 850px) {
.page-list .grid li,
.related-page-list .grid li.page-list-item,
.related-page-list .grid li.relation-label {
/* width : 300px !important; */
height: 200px !important;
}
}
カードのタイトルの線とか
code:style.css
.grid li.page-list-item {
}
.grid li.page-list-item a {
box-shadow: 0 0px 0 rgba(0,0,0,0);
}
.grid li.page-list-item a .content{
height: 100%;
}
.grid li.page-list-item a .header{
border-top: none;
}
.grid li.page-list-item a:hover {
box-shadow: none!important;
}
}
.grid li.page-list-item a .icon img {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
object-fit: cover;
}
.grid li.page-list-item a .content {
height: 100%;
position: relative;
padding-bottom: 0px; /* タイトル部分のスペースを確保 */
}
.grid li.page-list-item a .icon {
margin-inline: -6px
}
.grid li.page-list-item a .icon img {
display: block;
width: 100%;
height: 100%;
margin: 0; /* 画像の上下左右の余白をゼロに */
object-fit: cover;
}
カードのタイトル
code:style.css
.grid li.page-list-item a .header .title {
display:none;
}
消すページ
code:style.css
display: none !important;
}
.page-filter-menu {
display: none;
}
テロメア消去
code:style.css
.telomere {
display: none;
}
ページの下の影みたいなの消す
code:style.css
.page {
box-shadow: 1px 2px 4px 2px rgba(0,0,0,0);
}
ページ固定したときのピン消す
customize pin
code:style.css
.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: 5px; color: #000000; bottom: 0; display: inline-block;}
}
カード設定
code:style.css
.line {
font-size:36px;
}
search
code:style.css
.navbar .row {
display: flex; /* フレックスボックスに設定 */
justify-content: flex-end; /* 子要素を右詰めにする */
min-width: 0;
gap: 2px;
height: 100%;
width: 100%;
max-width: 1000px;
margin: 0 auto; /* ページ中央に配置 */
}
.search-form {
display: flex; /* フレックスボックスに設定 */
justify-content: flex-end; /* 右詰めにする */
width: 100%; /* 幅を50%に設定 */
}
.search-form .form-group {
display: flex; /* 子要素をフレックスボックスにする */
align-items: center; /* 中央揃え */
width: 100%; /* 幅を100%に設定 */
}
.search-form .form-group input {
width: 100%; /* 入力フィールドは親要素の幅に合わせる */
border-radius: 50px;
padding: 0 10px;
height: 32px;
border: 2px solid rgba(0, 0, 0, 0.5); /* ボーダーを追加 */
box-shadow: none;
font-size: 14px;
color: var(--search-form-text-color, rgba(255, 255, 255, 0.35));
background-color: var(--search-form-bg, rgba(255, 255, 255, 0.15));
}
.navbar, .navbar-default {
margin-top: 40px; /* 上に20pxの余白を追加 */
margin-bottom: 20px; /* 下に20pxの余白を追加 */
}
code:style.css
.container {
margin-top: 80px; /* 上に20pxの余白を追加 */
}
タイトル
code:style.css
.project-home .title {
display: none; /* .title を非表示にする */
}
.project-home::before {
content: "memo"; /* 任意のテキストを追加 */
font-size: 15px; /* フォントサイズを大きくする */
color:#000000!important;
mix-blend-mode: difference!important; /* 背景との合成に基づく色変化 */
transition: color 0.3s ease!important; /* 色の変更にトランジションを追加 */
}
.project-home {
font-family: "Noto Sans JP", serif;
font-weight: 400!important;
}
display: none!important;
ボーダー
code:style.css
main.page {
position: relative;
padding-bottom: 80px; /* ボーダー下に余白を追加 */
}
main.page::after {
content: '';
display: block;
width: 80%; /* ボーダーラインの幅を調整 */
margin: 0 auto;
border-bottom: 2px solid #000000; /* ボーダーラインの色 */ border-radius: 10px; /* 丸みを追加 */
position: absolute;
bottom: 0; /* main.page の下に配置 */
left: 50%;
transform: translateX(-50%);
}
code:style.css
.related-page-list .toolbar{
display: none;
}
code:style.css
.related-page-list {
margin-top: 70px; /* ここで余白の大きさを調整 */
}
code:style.css
.line a.page-link {
text-decoration: none; /* 下線を削除 */
outline: none; /* リンクがフォーカスされたときのアウトラインを削除 */
transition: color 0.3s;
}
/* 点滅アニメーションを定義 */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* ホバー時に点滅を追加 */
.line a.page-link:hover {
animation: blink 1s infinite; /* 1秒間隔で点滅 */
}
code:style.css
.line a.link {
text-decoration: none; /* 下線を削除 */
outline: none; /* リンクがフォーカスされたときのアウトラインを削除 */
transition: color 0.3s;
}
/* 点滅アニメーションを定義 */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* ホバー時に点滅を追加 */
.line a.link:hover {
animation: blink 1s infinite; /* 1秒間隔で点滅 */
}
code:style.css
/* 記事用 画像下キャプション */
.deco-\#{
display: block;
text-align: center;
font-size: smaller;
line-height: 1.6;
opacity: 0.8;
}
code:script.js
code:style.css
.icon {
}
ツール
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%) }
code:script.js
// 選択した文字列にマーカー
scrapbox.PopupMenu.addButton({
title: 'マーカー',
onClick: text => [[${text}]]
})
test
code:style.css
.expandable-menu {
top: 12px;
backdrop-filter: none;
box-shadow: 0 0 0 0px black;
border-radius: 1000px 0 0 1000px;
background: white;
&:has(> .closed) {
box-shadow: none;
--navbar-bg: transparent;
}
& .toggle-button {
opacity: 1;
}
& .page-menu .tool-btn {
color: black;
}
}
.page-menu xs {
mix-blend-mode: screen; /* ブレンドモードをスクリーンに設定 */
}
.page-menu .tool-btn {
}
code:style.css
@media (max-width: 650px) {
.navbar .navbar-menu .user-name,
.navbar .mobile-search-toggle {
display: none!important;
}
}
code:style.css
.status-bar{
display:none!important;
}
code:style.css
.flex-box{
display:none!important;
}
code:style.css
/* PC用:ホバー時のスタイル */
.grid li.page-list-item a .hover {
transition: .1s;
}
.grid li.page-list-item a .hover:hover {
background-color: rgba(255, 255, 255, 0.8) !important;
mix-blend-mode: screen;
}
code:style.css
.grid li.page-list-item a .description {
font-family: "Noto Sans JP", serif;
font-weight: 300;
letter-spacing: 0.5px; /* 文字間を調整(例: 0.5px) */
font-size:11px;
}
.page-list-item .description .link {
}
.page-list-item .description .page-link{
}
3本線で区切り線
yozba君から拝借
code:style.css
&{
display: flex;
align-items: center;
text-align: center;
}
&:not(.cursor-line):after{
flex-grow: 1;
content: "";
}
&:not(.cursor-line){
height:28px;
}
}
display:none;
}
}
code:style.css
.project-links-1-hop{
display:none!important;
}
code:style.css
.video-player video {
display: block; /* 必要なら inline-block から変更 */
width: 100%;
max-height: 600px;
vertical-align: middle;
cursor: pointer;
}
code:style.css
.page-list ul.grid {
row-gap: clamp(8px, 1.5svw, 18px);
column-gap: clamp(8px, 1.5svw, 18px);
}
code:style.css
.user-name{
display:none!important;
}
.search-form {
display:none!important;
}
code:style.css
.brand-icon{
display:none!important;
}
code:style.css
.navbar .navbar-brand {
padding: 0;
display: none;
align-items: center;
color: var(--navbar-icon-color, #fff); min-width: 40px;
justify-content: center;