settings
外部から見たサイトの見え方の設定。
https://scrapbox.io/files/677dc6c432ce99675ddaf3de.png
/icons/hr.icon
infobox
code:style.css
.info-line {
font-size: 11px;
line-height: 1.5;
font-weight: 500 !important;
/* font-weight: bold !important; ← 太字指定を追加 */
}
dt.definition-term {
font-size: 11px !important;
width: 50px; /* 項目見出し幅を狭く */
white-space: normal; /* 折り返し許可 */
word-break: break-word; /* 長い単語も折り返し */
font-weight: 500 !important;
}
.definition-list {
display: grid !important;
grid-template-columns: 60px 1fr !important;
}
参考文献
code:style.css
.line:not(.cursor-line) .deco-\~ {
text-indent: -1.5em; /* 一行目を左にずらす */
padding-left: 0em; /* 全体を元に戻す */
/* display: block; ブロックレベル要素として扱う */
}
/* .parent-class { */
/* overflow: hidden; : */
}
指定範囲の文字縮小（行間は効かない）
code:style.css
.line:not(.cursor-line) .deco-\< {
display: inline; /* インライン要素として扱う（文字として整列） */
font-size: 12px; /* フォントサイズを小さくする（例: 通常の80%） */
line-height: 0.5; /* 行の高さを調整（必要に応じて変更） */
vertical-align: baseline; /* テキストの基準線に揃える */
color: inherit; /* 必要に応じて文字色を親要素と同じにする */
}
画像の上部マージン
code:style.css
div.line-title {
margin-bottom: 25px; /* タイトル下部の余白を調整 */
}
ページタイトルのフォントサイズや行間
code:style.css
div.line-title span.text {
font-size: 20px !important;
font-weight: 460 ;/* bold で700 */
line-height: 1.3;
background-color: #EEEEEE;
padding-top: 25px; /* 上部の余白を設定 */
}
本文のフォントサイズ
code:style.css
div.line:not(.line-title) {
font-size: 16px; /* 本文のフォントサイズ */
line-height: 1.8; /* 行の高さを調整（必要に応じて変更） */
text-align: justify;
hyphens: auto; /* 単語のハイフネーションを有効にする */
word-break: break-word; /* 単語の折り返しを有効にする */
padding: 0px 0;　/* 改行後のスペース */
}
本文中の太字指定
code:style.css
.line:not(.cursor-line) .deco-\* {
font-size: 18px !important;
font-weight: 550; /* bold で700 */
}
左右の空白
code:style.css
.line {
font-size: 15px;
margin: 0 150px; /* 上下は0 */
margin-right: 50px;
margin-left: 125px;
}
@media screen and (max-width: 768px) {
.line {
margin: 0 20px; /* スマートフォン向けに左右のマージンを縮小 */
}
}
ドットの非表示
code:style.css
.line .dot {
display: none !important;
}
CSSセレクタの明確化
code:style.css
.project-name .level-1 img { width: 50%; max-height: none !important; }
中央揃え
code:style.css
.line:not(.cursor-line) .deco-\' {
position: absolute;
width: 100%;
text-align: center;
}
[> ]でその行だけ右寄せにする
code:style.css
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
画像の拡大縮小
code:style.css
.level-1 img { width: 50%; max-height: none !important; }
.level-2 img { width: 75%; max-height: none !important; }
.level-3 img { width: 100%; max-height: none !important; }
.level-4 img { width: 125%; max-height: none !important; }
.level-5 img { width: 150%; max-height: none !important; }
.level-6 img { width: 175%; max-height: none !important; }
スマートフォン専用のフォント指定
code:style.css
@media screen and (max-width: 768px) {
span {
font-size: 18px !important;
line-height: 1.6 !important;
font-weight: 550 !important;
}
}
code:style.css
@media screen and (max-width: 768px) {
span.deco strong.level.level-1 {
all: unset;
display: inline-block !important;
font-size: 22px !important;/* 効かないので課題 */
font-weight: 700 !important;/* 効かないので課題 */
color: #007BFF !important;
line-height: 1.4 !important;
}
}
文字の装飾
code:style.css
.deco-\# {
color: #fff; /* 白文字 */
background-color: #6a6; /* 緑背景 */
}
.deco-\& {
color: #fff; /* 白文字 */
background-color: #0000FF; /* 青色背景 */
}
.deco-\! { /* 赤文字部分は!を付ける */
color: #FF0000;
}
.deco-\+ { /* 緑文字は+を付ける */
color: #008000;
}