b-essence

気になること★いろいろなジャンルで更新していきます。

css・html Web

フォントをカスタマイズ

2016-12-14

ブログやホームページのフォントを変更してイメージを変える

タグで囲って個別にフォント変更はできますが、全体に適用させたい場合はcssスタイルシートのbodyに使用したいフォントを指定します。ユーザーのことを考えれば見やすくて、綺麗な文字がいいですよね。

body {font-family: フォント名;}

????????

今、主流になっている人気のフォントは、「メイリオ」(Vista以降)・「游ゴシック」(8.1以降)・「ヒラギノ」などです。

サイト全体のフォントを「メイリオ」に指定する

このサイトのフォントもメイリオです。
下記をコピーしてcssスタイルシートに貼り付けて下さい。
cssの開き方はブログ提供サイトによって違いがあると思うので、ご自分のブログ提供サイトの案内をご覧になってください。ワードプレスは「子テーマ」に追加します。

 

body {font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;}

または、p要素に書くことによって、<p></p>でかこまれた部分のフォントが変わります。

p {font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;}

デフォルトでインストールされているフォントはデバイスごとに異なります。
(お持ちのPCのOSによって最初から組み込まれているフォントは異なるということです。Vista以前のパソコンでは「メイリオ」は搭載されていません。)

上記の例をみると「メイリオ」以外のフォント名が続いていると思います。メイリオが表示されなければ、「ヒラギノ」、「ヒラギノ」が表示されなければ「MS Pゴシック」というように先頭から順番に表示されるようになっています。

最後に「sans-serif」「serif」を指定しますが、これを入れることによって、該当するフォントがない場合に各ブラウザの一般的なフォントが表示されます。

「sans-serif」ゴシック体
「serif」明朝体

●日本語フォントを指定するときは、最初に、日本語、次に英語(アルファベット)を書くようにします。

 


????????


 

-css・html, Web

関連記事

HTMLタグの基本構造・head要素

HTMLタグの構造 htmlの構造は以下のようになっています。 ホームページの基本的な構造です。 htmlファイルは大きく分けるとヘッダ<head>部分とボディ<body>部分 …

htmlで特定ページへ自動ジャンプさせる

html 特定ページへ自動ジャンプさせる <meta>タグを使って現在のhtmlページを特定のページへ自動ジャンプさせることができます。 サイト移転の時などに使いますね。××秒後にページを …

no image

気になっている方のブログの文字が小さすぎる

小さすぎるテキストサイズを楽に大きくする方法 とても気になっているブログがあります。読みたいのですが、その方のブログは文字があまりにも小さすぎるんです。とても読む気になれません。あっと思って閉じたくな …

画像を横に並べる方法

画像を横に並べて表示する方法 画像を横に並べる方法は何種類かあります。 一番簡単な方法ですが、改行を入れずにタグを下記のように記述します。 この場合、画像と画像の間に半角スペースができます。 < …

パソコン画面やDVDから静止画像を作る簡単キャプチャ

パソコンの画面を画像にしたい(ハードコピー) 動画から静止画像を作りたい時は? 簡単キャプチャ – 静止画像の作り方 キャプチャとは「捕える」「獲得する」「保存する」などたくさんの意味があ …

スポンサーリンク

スポンサーリンク