第4章 2.4 ④ tom-editor.css のソースコードと詳細

2.4 ④ tom-editor.css のソースコードと詳細　

解説） 【歯科クリニックのWebサイト】の WordPress 内にて記事作成の際、ブロックエディター機能を記載するオリジナルCSSプログラムを準備します。

以下が今回のオリジナルCSS プログラム「tom-editor.css」のプログラムソースです。

/*
Tom Editor CSS
*/
html {
	font-size: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

body {
	font-family: "Noto Sans JP", "Roboto", sans-serif, Arial;
	line-height: 1.8;
}

:root {
	--f1: 2.44em;
	--f2: 1.95em;
	--f3: 1.56em;
	--f4: 1.25em;
	--f5: 1em;
	--f6: 0.8em;
}

h1 {
	font-size: var(--f1);
}

h2 {
	font-size: var(--f2);
}

h3 {
	font-size: var(--f3);
}

h4 {
	font-size: var(--f4);
}

h5 {
	font-size: var(--f5);
}

h6 {
	font-size: var(--f6);
}

.editor-post-title__input {
	font-family: "Noto Sans JP", "Roboto", sans-serif, Arial;
	line-height: 1.8;
}

.wp-block {
	max-width: 720px;
}

解説

参考） オリジナルテーマ「Tom Works Dental」の CSS プログラムは以下の4プログラム( Bootstrap5 の CSS ファイル２種、自作の CSS プログラム2種）になります。