あめつくのブログ

  • このエントリーをはてなブックマークに追加

アメブロカスタマイズ ブログのフォントを変更する(CSS)

広告

ここでは、アメブロのcssを編集して「ブログ全体のフォントを変更する方法」を説明します。

【変更前】

【変更後】

なお、cssを編集するにはブログデザインを「CSS編集用デザイン」にする必要があります。ブログのデザインをCSS編集用デザインにする方法は、「アメブロのcssを編集するための設定」を参考にしてください。

広告

ブログ全体のフォントを変更する方法

マイページ右上の「アメーバのサービス一覧」をクリックします。
サービス一覧(PC編)

[デザインの変更]をクリックします。
デザインの変更(PC編)

[cssの編集]をクリックします。

cssの編集画面が表示されます。ここから、ブログ全体のフォントを変更するためのcssの編集に入ります。

下の赤枠の内容をコピーします。これが、ブログ全体のフォントを変更するcssです。

body{
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}
【補足説明】赤文字の部分がフォントを指定している部分です。

フォント名は「,(カンマ)」で区切られています。先頭の「ヒラギノ角ゴ Pro W3」といのがフォント名です。フォント名にスペースが含まれている場合は、「”(ダブルクォーテーション)」で囲むというルールになっています。

フォントを複数指定しているのは、パソコン(OS)ごとに表示できるフォントが違う為です。

上記のように指定すると、Windowsのパソコンで表示した場合は、「メイリオ」で表示されます。Windowsは、上記のフォント名の先頭から利用できるフォントをさがし、利用できるフォントがみつかったら、そのフォントで表示します。「メイリオ」より前に書いてあるフォントは、Windowでは利用できません。Macなら利用できます。

以上、ざっくり説明でした。

より詳しく、より正しく理解したい場合は、調べてみてください。

コピーした内容はcssの一番下の部分に貼り付けます。
貼り付けが終わったら、[保存]ボタンをクリックして追加したcssを保存します。

保存できたらブログを表示し、ブラウザの更新ボタンをクリックします。(古いデータが残っていると変更したcssが反映されませんので、ブラウザの更新ボタンをクリックして最新の状態に更新します。)

これで、ブログ全体のフォントを変更することが出来ます!

ここまでの内容を動画でも確認できます。
よかったら、参考にしてください!
⇒  ブログのフォントを変更する

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

カテゴリー