Common
Common
更新履歴
#2021/02/04 公開
#2021/09/06 更新
#2023/11/08 更新 ハッシュタグの装飾をコンパクトにした
トップページのプロジェクトタイトルとページリストの間の間隔を広げる
code:style.css
.page-list {
margin-top: 4em;
}
トップページだけはプロジェクトタイトルを移動せず、大きなフォントで
code:style.css
.quick-launch.layout-list .project-home {
font-size: 2em;
position: initial;
z-index: initial;
color: var(--tool-text-color);
}
見やすさのための太字、行間
code: style.css
/* ページタイトルを太字に */
.line.line-title {
font-weight: 600 !important;
}
/* * 構文で書かれた行を見出しっぽくするために、行の下に少し空白を空ける。そのために透明のsesameを使っている。 */
.line strong {
font-weight: 600 !important;
text-emphasis: filled sesame rgba(255,255,255,0);
text-emphasis-position: under right;
-webkit-text-emphasis: filled sesame rgba(255,255,255,0);
-webkit-text-emphasis-position: under right;
}
/* レベル1だけは本文中の太字にも使用するので、行の下に空白を作らない（＝sesameを無効にする） */
.line strong.level-1 {
text-emphasis: none;
-webkit-text-emphasis: none;
}
行揃え
code: style.css
/* 中央寄せ */
.deco-\| {
position: relative;
display: inline-block;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: relative;
display: inline-block;
width: 100%;
text-align: right;
}
強調
サンプル：蛍光ライン 青のライン オレンジのライン オレンジの太字 傍点
code:style.css
/* ! 蛍光ライン */
.deco-\!{
background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(255,255,0,0.3),rgba(255,255,0,0.9));
font-weight: 600;
}
/* " 青のライン */
.deco-\"{
background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(123,104,238,0.3),rgba(123,104,238,0.9));
font-weight: 600;
}
/* # オレンジのライン */
.deco-\#{
background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0),rgba(243,152,0,0.3),rgba(243,152,0,0.9));
font-weight: 600;
}
/* % オレンジの太字 */
.deco-\%{
color: orange;
font-weight: 600;
}
/* ' 傍点 */
.deco-\'{
-webkit-text-emphasis: filled sesame;
text-emphasis: filled sesame;
font-weight: 600;
}
/* < 文字を小さく */
.deco-\<{
font-size: 0.7em;
}
目立つ見出し
code: style.css
/* 白抜き */
.deco-\~{
text-emphasis: none;
-webkit-text-emphasis: none;
display: inline-block;
/* position: relative; */
width: 100%;
padding-left: 0.5em;
padding-top: 15px;
padding-bottom: 10px;
margin-top: 1.5em;
margin-bottom: 0.5em;
color: #fff;
background-color: var(--tool-text-color);
}
/* 囲みボーダー */
.deco-\.{
text-emphasis: none;
-webkit-text-emphasis: none;
display: inline-block;
/* position: relative; */
width: 100%;
padding-top: 4px;
padding-left: 0.5em;
margin-top: 1.5em;
margin-bottom: 1em;
color: var(--tool-text-color);
border-color: var(--tool-text-color);
border-left: 16px solid;
border-bottom: 2px solid;
border-right: 16px solid;
border-top: 2px solid;
}
/* L字ボーダー */
.deco-\&{
text-emphasis: none;
-webkit-text-emphasis: none;
display: inline-block;
/* position: relative; */
/* width: 100%; */
/* padding: 2px 16px; */
padding-left: 0.5em;
padding-right: 5em;
padding-top: 2px;
padding-bottom: 2px;
margin-top: 0.5em;
margin-bottom: 0.8em;
color: var(--tool-text-color);
border-color: var(--tool-text-color);
border-left: 16px solid;
border-bottom: 2px solid;
}
/* 長方形アクセント */
.deco-\+{
text-emphasis: none;
-webkit-text-emphasis: none;
display: inline-block;
/* position: relative; */
width: 100%;
padding-left: 0.5em;
padding-top: 2px;
/* margin-top: 1.2em; */
margin-bottom: 0.8em;
color: var(--tool-text-color);
border-color: var(--tool-text-color);
border-left: 16px solid;
}
箇条書きを見やすくするための行頭文字
参考： /customize/インデントレベルごとに行頭文字を変更
code:style.css
/* インデントレベルごとに行頭文字を切り替えるスタイル指定*/
/* メニューのHide Dotと連動する */
/* この例では、第５レベルまでの行頭文字を指定。第６レベルからはドットに戻る */
/* すべてのビュレット文字に共通の設定 */
.line .indent-mark .dot:before {
display: block;
position: absolute;
right: -0.3em;
top: -0.85em;
/* color: var(--page-text-color); */
color: var(--page-text-color, #4a4a4a);
}
/* 第１レベルのインデント（c-0）の設定 */
/* ドットはバックグラウンドカラーなので透明にする */
/* セレクタとして .line .indent-mark .dot { ... }を使うとインデントレベルごとに background-color: transparent; を指定する必要はないが、指定のないレベルのドットが消える */
.line .indent-mark .c-0 + .dot {
background-color: transparent;
}
/* このレベルの行頭文字を表示 */
.line .indent-mark .c-0 + .dot:before {
content:"◆";
font-size: 80%;
}
/* 以下同様　*/
.line .indent-mark .c-1 + .dot {
background-color: transparent;
}
.line .indent-mark .c-1 + .dot:before {
content:"▶";
font-size: 80%;
}
.line .indent-mark .c-2 + .dot {
background-color: transparent;
}
.line .indent-mark .c-2 + .dot:before {
content:"-";
font-size: 150%;
top: -0.45em;
font-weight: bold;
}
.line .indent-mark .c-3 + .dot {
background-color: transparent;
}
.line .indent-mark .c-3 + .dot:before {
content:"●";
font-size: 100%;
top: -0.7em;
}
.line .indent-mark .c-4 + .dot {
background-color: transparent;
}
.line .indent-mark .c-4 + .dot:before {
content:"■";
font-size: 70%;
top: -0.95em;
}
表を見やすく
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #ffffff;
border-bottom: solid 1px #dddddd;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #ffffff;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #ffffff;
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
リンクを見つけやすく
code:style.css
.line a.page-link {
font-weight: 600;
}
.line a.link {
font-weight: 600;
}
二重の大括弧で囲んだ画像は幅いっぱいに表示
code: style.css
.line:has(.strong-image) {
display: flex;
justify-content: center;
}
.line .strong-image {
max-width: 100%;
max-height: 75vh;
background-color: red;
}
.line a.link .image {
border-style: none;
}
https://gyazo.com/b1878828e4aeb2447d15872243dc8a3d