【占ツクCSS大百科】全体の設定

全体を変える方法について解説します。

フォント設定

フォントとは、簡単にいうと「文字の形」です。

手書き、丸文字、明朝体などは、フォント設定で指定します。

/* フォント設定 */
*{
font-family: フォント名;
}

「*」はCSSで「全てのもの」という意味なので、*{font-family:フォント名;}は全ての{フォントをフォント名にする}と訳せます。

この設定だけでは、内蔵フォントという、今使っている機器に保存されているフォントしか指定できません。

したがって、PC、iPhone、Android等、見る人によってフォントの見え方が違います。

インターネット上から読み込むWebフォントを使うことで、保存されていないフォントを指定することができます。

Webフォント（中級者以上向け）

自分でアップロード（上級者向け）したり、Leafscapeからお借り（中級者向け）したりして、保存されていないフォントを指定できます。

アップロードについては、別の記事で紹介します。

Leafscapeからお借りする方法を記載します。
そのままでは占ツクに対応していないので、赤文字の部分を消します。

@font-face {
font-family: フォント名;
src: url('https://cdn.leafscape.be/～/～.woff2')
     format("woff2");
}

🠋

@font-face {
font-family: フォント名;
src: url(https://cdn.leafscape.be/～/～.woff2);
}

これで、占ツクでもLeafscapeのフォントが使えます。

全体背景

全体背景を変える前に、CSS欄の下の背景画像のURLを消してください。

消さないと、そちらのURLが優先されてしまいます。

/* 全体背景 */
body{
background-color: 背景色;
background-image: url(画像url);
}

「body」はページ全体のことです。

なので、body{背景設定}はページ全体の{背景設定}という意味になります。

背景の細かい設定

画像の繰り返しをさせない方法や、画像の位置を指定する方法があります。

背景画像を繰り返さない

このタグをbodyの設定のカッコ内に追加してください。

繰り返す場合は、この行を削除します。

画像の位置を指定

このタグをbodyの設定のカッコ内に追加してください。

書かない場合は、デフォルトの左上に配置されます。

画像の位置については、下の表を参考にしてみてください。

• 左上：top left
• 右上：top right
• 左下：bottom left
• 右下：bottom right
• 中央：center center

これ以外の組み合わせでも使えるので、気になる人は色々と試してみてください。

画像のサイズを指定

背景画像を画面いっぱいに拡大するCSSです。

画像の大きさを変えない場合は、何も書かなくて大丈夫です。

▼注意点

• 小さい画像を画面に合わせると画質が荒くなる
• 逆に大きい画像は読み込みが遅くなることがある
• 占ツクにアップすると縮小されて荒くなることが多い

全体の文字色

全体の文字色を変えるタグです。

/* 文字色 */
body{
color: 文字色;
}

body{color:文字色;}はページ全体の{文字色を設定}という意味になります。

まとめて記述

CSSは同じ場所の設定をするときに、合わせて書くことができます。

/* フォント設定 */
*{
font-family: フォント名;
}

/* 全体設定 */
body{
background-color: 背景色;
background-image: url(画像url);
background-repeat: no-repeat; /* 背景画像を繰り返さない */
background-position: 画像の位置; /* 不要な場合は削除 */
background-size: 画像のサイズ; /* 不要な場合は削除 */
color: 文字色;
}