settings

外部から見たサイトの見え方の設定。

https://gyazo.com/dbf9fe9b992f6d34ad6c9f0f1806a1c7

/icons/hr.icon

参考文献

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.5;

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、左右は20px */

}

@media screen and (max-width: 768px) {

.line {

margin: 0 20px; /* スマートフォン向けに左右のマージンを縮小 */

}

}

ドットの非表示

code:style.css

.line .dot {

display: none !important;

}

code:style.css

/* 右寄せ */

.deco-\> {

position: absolute;

width: 100%;

text-align: right;

}

CSSセレクタの明確化

code:style.css

.project-name .level-1 img { width: 50%; max-height: none !important; }

画像の拡大縮小

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;

}

}