settings
code:style.css
display: none;
}
code:style.css
code:style.css
/* 横幅をさらに広げる */
.col-page {
max-width: 1600px; /* 必要に応じて数値を調整 */
margin: 0 auto;
}
.page {
max-width: 100%;
}
.line {
max-width: 100%;
}
.app-container {
max-width: 100%;
width: 100%;
}
.col-side {
display: none;
}
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em; top: -0.1em }
code:style.css
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
箇条書きを薄くする
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
}
縦の角印 [<> 田中]
code:style.css
font-size: 1.3em;
display: inline-block; border-radius: 18%; border: .09em solid #f40; max-width: 1.25em; min-width: 1em; padding: 0.05em; vertical-align: text-bottom;
line-height: 1; color: #f40; font-weight: 600; }
,+って書くとこうなるやつ
code:style.css
.line .deco > .empty-char-index {
display: none;
}
@media screen and (min-width: 1092px) {
:root {
--col-page-width: 960px;
--wordbox-width: calc(var(--col-page-width) * 0.7);
}
}
@media screen and (min-width: 768px) and (max-width: 1091px) {
:root {
--col-page-width: calc(100vw - 132px);
--wordbox-width: calc(var(--col-page-width) * 0.7);
}
}
@media screen and (max-width: 767px) {
:root {
--wordbox-width: 90%;
}
}
display: block;
width: var(--wordbox-width);
max-width: 100%;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
margin: 10px auto;
padding: 10px;
}
あああ あああ あああ
code:style.css
/* 拡張装飾記法:重要 青下線 */
.deco-\# {
background: linear-gradient(transparent 75%, #69c9FF 40%); }
/* 拡張装飾記法：とても重要 赤下線 */
.deco-\| {
background: linear-gradient(transparent 75%, #FF88bb 40%); }
.deco-\~ {
background: linear-gradient(transparent 75%, #66FF88 40%); }
インライン引用
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 {
font-size: 85%;
font-family: 'Font Awesome 5 Free';
content: '\f10d';
font-weight: 900;
vertical-align: super;
}
aaaaa
code:style.css
/*.deco-\! {*/
.deco-\! {
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
youtubeちいさく
code:style.css
.iframe-video-player:not(.floating) iframe.youtube {
width: 99%;
max-width: 446.7px;
height: 30vw;
max-height: 260px;
}
.iframe-video-player:not(.floating):hover div.control {
/* ポップアウトボタンのスタイル（適当に書いた） */
bottom: 25px;
right: auto;
left: 86%;
}
ピンどめ独立
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
折り返しの色
code:style.css
.grid li.page-list-item a .pin {
}
code:style.css
/* 強調記法 hoge.icon のアイコンのとき、サイズをもっと大きくする */
.line img.strong-icon { max-height: 7em; height: auto }
外部リンクの先頭にアイコンをつける
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
font-family: 'Font Awesome 5 Free';
content: ' \f360';
font-weight: 900;
font-size: 0.9rem;
padding-right: 0.5rem;
display: inline-block;
}
もじちいさく
code:style.css
@import url("/api/code/ePi5131/文字を小さくする装飾で打ち消し線の位置が壊れるのを何とかするUserCSS/style.css");
.deco-\> {
font-size: 0.7em;
}
strongで画像小さく
code:style.css
span.deco strong.level-1 span.modal-image a img.image{
/*display:none;*/
}
code:style.css
/* 拡張装飾記法:重要 青下線 */
.deco-\+ a img.image{
width: 100px; /* または必要なサイズ */
height: auto;
}
code:style222.css
/* スマートフォンには適用しない */
@media screen and (min-width: 768px) {
/* 各要素を非表示 */
.grid li.relation-label a .icon-lg, /* 「Links」のアイコン */
.grid li.relation-label .arrow, /* ラベルの右しっぽ */
.related-page-list .grid li.page-list-item a .description, /* ページの概要 */
.related-page-list .grid li.page-list-item a .icon /* サムネイル */ {
display: none;
}
/* 関連ページを左ペイン化 */
.related-page-list {
position: fixed;
left: 10px;
margin: -30px 20px 0 3vw; /* -30pxの部分はプロジェクトタイトルの位置に応じて変えてください */
padding: 0 10px 0 20px;
width: 18vw;
/* 関連リンク一覧部分を独立してスクロール */
height: 86vh;
overflow-y: auto;
z-index: 20; /* エディタ部分と領域が重なる可能性があるのでエディタより上層に設定 */
}
.related-page-list-search{
display: block;
}
.drag-and-drop-enter {
position: absolute;
left: calc(20vw + 30px);
width: calc(55vw + 60px);
margin-top: -30px;
padding-left: 40px; /* 行番号表示が隠れないように設定 */
}
.related-page-list .grid {
width: 100%;
}
.related-page-list .grid li {
width: 100%;
margin: 2px;
height: auto;
}
.related-page-list .grid li.page-list-item a {
background: unset;
border: unset;
box-shadow: unset;
}
.related-page-list .grid li a .header {
padding: 0;
}
.related-page-list .grid li.page-list-item a {
background-color: var(--card-bg, #fff); /* 定義されているテーマでなければ白を設定 */ }
.related-page-list .grid li.page-list-item a .title {
font-size: 12px; /* ページタイトルを小さめに表示 */
}
.related-page-list .grid li.relation-label {
width: 100%;
min-height: 33px;
}
.related-page-list .grid li.relation-label .title {
display: block;
font-size: 12px; /* ラベルタイトルを小さめに表示 */
}
.related-page-list .grid li.relation-label.headword a {
display: block;
background-color: #888; /* ラベルの色 プロジェクトテーマに合わせて変えてください */ }
.related-page-list .grid li.relation-label:is(.links,.project-links,.empty-links) {
min-height: unset;
height: auto;
}
.related-page-list .grid li.relation-label:is(.links,.project-links,.empty-links) a {
display: block;
cursor: default; /* クリックしても何も起こらないのにデフォルトのカーソルがリンク用になっているのが気になったため */
background: unset; /* 「Links」のラベルの色 好きな色に設定してください */
margin: auto;
}
.grid li.splitter.splitter {
height: auto;
}
/* 「・・・」部分の調整 */
.grid li.ellipsis a {
display: block;
text-align: right;
height: 36px;
}
.grid li.ellipsis a .circle {
border-radius: 0;
height: 20px;
width: 40px;
}
/* 関連ページ要素のカウント */
/* ラベルをナンバリング */
.related-page-list {
counter-reset: label;
}
.related-page-list .grid li.relation-label.headword {
counter-increment: label;
}
.related-page-list .grid li.relation-label.headword::before {
content: counter(label);
position: absolute;
display: block;
left: 0px;
z-index: 10;
text-align: right;
font-size: 12px;
color: #fff; /* テーマに合わせて変えてください */ }
/* 各ラベルごとにページをナンバリング */
.related-page-list .grid {
counter-reset: item;
}
.related-page-list .grid li.page-list-item {
counter-increment: item;
}
.related-page-list .grid li.page-list-item::before {
content: counter(item);
position: absolute;
display: block;
left: -32px;
z-index: 10;
min-width: 30px;
text-align: right;
font-size: 12px;
}
/* ページメニューを固定 */
.col-page-side .page-menu {
position: fixed;
top: 100px;
}
/* 検索欄に対応 */
.related-page-list .toolbar {
display: block;
margin-bottom: 4px;
}
.page-sort-menu {
line-height: unset;
height: fit-content;
text-align: right;
}
.related-page-list .toolbar .related-page-list-search {
display: block;
line-height: unset;
}
.related-page-list .toolbar .related-page-list-search .fa-spinner,
.related-page-list .toolbar .related-page-list-search .fa-search {
position: absolute;
margin-top: -18px;
}
.related-page-list .toolbar .related-page-list-search input {
font-size: 14px;
border-radius: 2px;
background-color: white;
width: 100%;
margin-left: 2px;
}
}
みぎがわ
code:style22.css
.col-page {
max-width: 1200px;
}
@media (min-width: 768px) {
.related-page-list {
flex-basis: 140px !important;
}
.related-page-list-search input {
width: 120px !important;
}
}
@media (min-width: 1240px) {
.related-page-list {
flex-basis: 285px !important;
}
.related-page-list .relation-label {
width: 285px !important;
}
.related-page-list-search input {
width: 265px !important;
}
}
@media (min-width: 768px) {
.page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 20px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 2;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
}
.related-page-sort-menu {
display: none;
}
.related-page-list .grid li {
margin-bottom: 5px !important;
margin-right: 5px !important;
width: 140px;
}
.related-page-list .grid .splitter {
height: 15px !important;
}
.related-page-list .relation-label {
height: auto !important;
}
.related-page-list .relation-label .arrow {
display: none !important;
}
.related-page-list .relation-label a {
/* 関連リンク ラベル */
padding: 4px !important;
/* border-bottom: 2px solid var(--relation-label-bg); */
}
.related-page-list .relation-label .title{
font-size: 12px;
}
.related-page-list .relation-label .icon-lg{
display: none !important;
}
.related-page-list .page-list-item {
/* カードサイズ変更 */
height: 50px !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 5px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
z-index: 1;
/* background-color: var(--translucent-card-bg)*/
}
.related-page-list .page-list-item .header .title {
font-size: 12px !important;
filter: drop-shadow(0px 0px 6px var(--card-bg, #fff)) drop-shadow(0px 0px 8px var(--card-bg, #fff)) drop-shadow(0px 0px 10px var(--card-bg, #fff)) drop-shadow(0px 0px 14px var(--card-bg, #fff)) }
.related-page-list .page-list-item .description {
padding-top: 0px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
z-index: 1;
}
.related-page-list .page-list-item .description .line {
font-size: 11px !important;
}
.related-page-list .page-list-item .description .line .inline-icon {
font-size: 9px !important;
}
.related-page-list .page-list-item .icon {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
padding: 5px !important;
}
.related-page-list .page-list-item .icon img {
width: 100% !important;
height: 150% !important;
width: auto !important;
margin-right: 0 !important;
object-fit: contain;
}
.related-page-list .ellipsis {
height: 30px !important;
}
.related-page-list .ellipsis a {
padding: 2px !important;
}
.related-page-list .ellipsis .circle {
width: 30px !important;
height: 30px !important;
}
.related-page-list-search {
display: flex;
width: 100%;
align-items: baseline;
}
}