Webサイトを開発してみる（入門編）ー第4章2.4 ー

Bootstrap 5　フロントエンド開発の教科書

第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;
}

4/6：
html {
font-size: 100%;
}
html { font-size: 100%; }：
標準フォントサイズを100%で設定します。（ブラウザによるが16pxを想定）

8/11：
img {
max-width: 100%;
height: auto;
}
img { max-width: 100%; height: auto; }：
画像の幅と高さの標準設定をします。

13/16：
body {
font-family: “Noto Sans JP”, “Roboto”, sans-serif, Arial;
line-height: 1.8;
}
body { font-family: “Noto Sans JP”, “Roboto”, sans-serif, Arial; line-height: 1.8; }：
フロント表示用フォントを指定します。ここでは日本語用にNoto Sans JPとsans-serif、欧文用にRobotoとArialを使用します。またテキストの行の高さは1.8とします。

18/25：
:root {
–f1: 2.44em;
–f2: 1.95em;
–f3: 1.56em;
–f4: 1.25em;
–f5: 1em;
–f6: 0.8em;
}
:root { –f1: 2.44em; –f2: 1.95em; –f3: 1.56em; –f4: 1.25em; –f5: 1em; –f6: 0.8em; }：
フォントサイズを比率で指定するために変数を定義します。

27/49：
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);
}
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); }：
見出しのフォントサイズh1～h6に上記で定義した変数を設定します。

51/54：
.editor-post-title__input {
font-family: “Noto Sans JP”, “Roboto”, sans-serif, Arial;
line-height: 1.8;
}
.editor-post-title__input { font-family: “Noto Sans JP”, “Roboto”, sans-serif, Arial; line-height: 1.8; }：
記事タイトルのフォントとサイズも記事全体と同じ設定とします。

56/58：
.wp-block {
max-width: 720px;
}
.wp-block { max-width: 720px; }：
ブロックエディターでの記事領域の幅を設定します。

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

①bootstrap.css
Bootstrap5 の公式サイトからダウンロードします。実際に使用するのは ② bootstrap.min.css ですが、後で確認などチェックができるように ① bootstrap.css を用意します。

②bootstrap.min.css
Bootstrap5 の公式サイトからダウンロードします。こちらが実際に使用されます。

③tom-custom.css
【歯科クリニックのWebサイト】の各ページの装飾は、Bootstrap5を基本としますが、補足或いは追加機能を付与するためにオリジナルCSSプログラムも準備します。

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

WordPressオリジナルテーマ制作入門