サイトリニューアルは var関数でカラーポリシー remでフォントサイズ マネジメント

var関数はカラー設定だけでなく頻繁に使用するCSS記述にも 1remを10px、ベースフォントサイズは16pxに

SEO塾/株式会社アルゴリズム

サイトリニューアルは var関数でカラーポリシー remでフォントサイズ マネジメント

var関数はカラー設定だけでなく頻繁に使用するCSS記述にも 1remを10px、ベースフォントサイズは16pxに
サイトリニューアルは var関数でカラーポリシー remでフォントサイズ マネジメント

サイトリニューアルは var関数でカラーポリシー remでフォントサイズ マネジメント

CSS3 var関数とrem

サイトリニューアルにあたって、旧サーバーのコンテンツを移動することが主な作業だったものの、テキストやHTMLソースを書き換える必要もあったので、せっかくだから、CSS3のvar関数とremを本格的に採用してみた

var関数でサイトのカラーポリシー確立

サイトのカラーの設定で、とくにメインを旧サーバーと同様の「グリーン」で統一し、CSS3の「var関数」を設定

-primary

-secondary

-tertiary

-quaternary

-link

-white

-black

red

blue

magenta

cyan

green

yellow

amethyst

turquoise

navy

gray

black2

red2

green2

blue2

yellow2

また、場当たり的に色選びしないように、旧サーバーのCSSを持ち込みながら、あらかじめ使いそうなカラーを選抜して style.css に記載

:root {
	--color-primary: rgba(39, 53, 10, 1); /* #27350A var(--color-primary) */
	--color-secondary:rgba(138, 196, 62, 1); /* #8AC43E var(--color-secondary) */
	--color-tertiary:rgba(107, 191, 63, 1); /* #6BBF3F var(--color-tertiary) */
	--color-quaternary:rgba(52, 134, 52, 1); /* #D9F0A1 var(--color-quaternary) */
	--color-link:rgba(25, 130, 209, 1); /* #1982D1 var(--color-link) */
	--color-white:rgba(255, 255, 255, 1); /* #FFFFFF var(--color-white) */
	--color-black:rgba(0, 0, 0, 1); /* #000000 var(--color-black) */
}
html {
	/* 1rem = 10pxと定義 */
	font-size: 10px; }
body {
	/* 基本のフォントサイズは16px */
	font-size: 1.6rem; }

一番左の「-primary」では、「background-color:var(–color-primary)」としている

remでフォントサイズのポリシー確立

Search Consoleのモバイル ユーザビリティで、テキストが小さすぎて読めませんクリック可能な要素同士が近すぎます、こういうメッセージが鬱陶しいので、サイトの最低フォントサイズそのものを大きく設定し、かつ行間も広くするようにしている

とくにフォントサイズは、remをベースに、親要素に影響を受ける%やemを使わないので、モグラ叩きの逐次対応から解放される
1remが10pxになり、フォントサイズも2.4rem(=24px)などとして、px指定も止めている

なお、WordPressでは、親テーマの CSS も、子テーマの style.css が上書きしてくれるので、remは威力を発揮する

bodyの、フォントサイズは変更しても無問題だが、htmlのフォントサイズのほうは、変更すると「1rem」の単位が変更されるので、サイト全体のフォントサイズが大きくなったり小さくなったりする

ただ、いろいろ試してみたが、「1rem = 10px」が分かりやすい

プレイクポイント・メディアクエリはスマートフォンの横と縦の画面に合わせて

あいかわらずデスクトップファーストのCSS記述だが、下記投稿記事でも解説しているように、プレイクポイント・メディアクエリは基本的に、「タブレット縦 / スマホ横」「スマホ縦」の2つ

どうしても気になるところは、「小型スマホ横」「小型スマホ縦」を追記している

タブレット 横は
パソコンと同じ
タブレット縦 / スマホ横
@media screen and (max-width: 896px)
小型スマホ横
@media screen and (max-width: 568px)
スマホ縦
@media screen and (max-width: 480px)
小型スマホ縦
@media screen and (max-width: 320px)
«
»