settings
レベル3以上は使用不可にするCSS
レベル3以上を使うと際限なく増えていき、ページに余計な情報が入りやすいため
そこまでのレベルが必要ということは、ページを切り出した方がいいということだと思ってます
レベル1 ← [* レベル1]
レベル2 ← [** レベル2]
レベル3 ← [*** レベル3]
code:style.css
.level-3:before,
.level-4:before,
.level-5:before,
.level-6:before,
.level-7:before,
.level-8:before,
.level-9:before,
.level-10:before {
content: "レベル3以上は使わない。改行やページの切り出しを考えよう。";
color: red;
}
トップページのピン留めされていないものは改行して一段下から始めるようにするCSS
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
赤色のアンダーラインを引けるようにするCSS
[! Text] → Text
code:style.css
.deco-\! {
background: linear-gradient(transparent 80%, #ff9393 80%); }
/icons/hr.iconを押せなくするCSS
/icons/hr.icon
↑
こんなの
code:style.css
pointer-events: none;
}
トップ画面から特定のページを見えなくするCSS
一般の学生にとって頻繁に更新されるTAのToDoリストなどは表示される必要があまりないから
一覧に表示されないだけで検索したりすれば普通に見れます
TAはこれを使ってください
code:style.css
{
display: none;
}
ページ情報を常に表示するCSS
code:style.css
@media (min-width: 768px) and (min-height: 500px) {
* {
/* --page-menu-columns: 10; */ /* 適当に大きい値にしておけば良さそう */
--page-menu-columns: 3;
}
.col-page-side {
/* width: initial; */
/* max-width: initial; */
}
.page-menu {
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(var(--page-menu-columns), 1fr);
border-radius: 4px;
/* width: initial; */
}
/* ランダムボタンは個別に中央揃えにしないといけない */
.page-menu > .random-jump-button {
margin: auto;
}
/* ページメニューのボタン配置を中央揃えに */
.page-menu > .dropdown {
align-self: center;
justify-self: center;
}
margin: 0;
position: relative;
display: flex;
inset: auto;
border: none;
box-shadow: none;
width: fit-content;
}
.page-menu > .dropdown:nth-child(1) {
grid-column: 1 / calc(var(--page-menu-columns) + 1);
width: 100%;
}
.page-menu > .dropdown:nth-child(2) {
grid-row-start: 2;
}
.page-menu .dropdown:not(:first-child) ul.dropdown-menu-right {
top: 50px;
right: 0;
}
display: none;
}
}
メモ
画像の表示サイズを［** ］で設定できるようにする
[*** [画像のURL]]
という記法で画像の表示サイズを変えられるようにするUserCSSです。 記法の*の数とyy
cssの.level-xxのxxの部分
が対応しています。
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
参考