アメブロdeアクセスアップ

CSSのカスタマイズ フォントの種類を変更する。 | アメブロのテンプレートやツールを使って、アクセスアップする方法やアメブロカスタマイズの方法をご紹介します。


テーマ:CSSでカスタマイズ

アメブロでの、プチカスタマイズをご紹介します。
今回は、CSSをちょっとカスタマイズ。
【フォントの種類】を変更してみましょう。

 

 

 

 

 

 

アメブロでの、プチカスタマイズは、
CSSのカスタマイズということになります。

 

普通ブログの構成は、HTMLと、CSSということに、
なるのですが、アメブロはHTMLを変更できません。

 

 

CSSも、【カスタマイズ変更可能】なテンプレートに、
限られています。

 

 

ちょっと、ブログ作成に慣れてきたら、
このあたりも、勉強すると、オリジナルなものになっていきます。

 

 

フォントのみでも、ずいぶんと、記事の雰囲気の変化がみられます。

 

ぜひ、参考にやってみてくださいね。

 

フォントのCSSコード(タグ)は、

【font-family】といいます。

 

フォントの種類という意味です。

 

 

だいたい、全体の文字を変更するのに、使いますが、
お好きなフォントを、選べる・・・というわけにはいきません。

 

 

なぜなら、あなたが持っているフォントを、
他の人が、持っているとは限らないから。

 

それと、ブログもサイトも、みんなが見ています。

 

 

ブラウザもそれぞれ、違いますね。

 

なので、ブラウザに対応しているフォントを、使わなければ表示できません。

 

 

一般のブラウザに対応しているフォントは、
下記の通りです。

 

 

  • ヒラギノ角ゴ Pro W3 Hiragino Kaku Gothic
  • MS Pゴシック
  • メイリオ Meiryo
  • Osaka&lt
  • verdana
  • arial&lt
  • sans-serif

 

 

私は、丸っこい文字が好きなので、
だいたい、【メイリオ】にしています。

 

 

アメブロでの設定の変更は、下記の説明の通りに行ってみてくださいね。

 

 

or-side

 

 

2012y05m28d_103338367

デザインの変更から、【CSS編集用デザイン】を選択します。

※このテンプレート以外では、CSSの変更は
できません。

 

 

 

 

 

 

 

【CSSを編集するを選びます。】

2012y05m28d_103413183

 

 

※ブログデザインの適用完了後の

処理となります。

 

 

 

 

 

 

図の部分を、クリックすると、画面が、【CSS】の変更画面に変わります。

 

 

2012y05m28d_103458393

 

下の部分が、【CSS】の記述の部分ですね。

 

 

これを、全部指定して、(control + A) で、選択して、

テキストエディタにコピーして、貼り付けます。

 

ここで、変更を行います。

 

変更後、元のCSSを削除して、テキストエディタで変更した、

記述を、全指定しコピーで、貼り付けます。

 

 

hana2

追加するタグ

 

font-family:"メイリオ",Meiryo;

 

たいがいのCSSは、全体のスタイルは、一番上に記載されています。

 

アメブロの場合は、ちょっと親切で、CSSの目次までついています。

 

こんな感じの記載を見つけてくださいね。

 

 

—————————————–

【CSS編集 目次】

(1) 文字のスタイル
(2) ボタンのスタイル
(3) エリアのスタイル
(4) その他、拡張

  ※CSS編集で広告を修正しないでください
  (規約違反に該当する可能性があります)

—————————————–
*/

 

 

/* (1-1) 全体の文字
——————————————–*/

/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#333333;
}

 

↑ こんな感じに、なっていると思います。

 

この【通常文字】の部分に、タグを追加します。

 

 

 

こんな感じとなります。

 

 

/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
font-family:"メイリオ",Meiryo; ←追加しました。
color:#333333;
}

 

 

 

 

2012y05m28d_104055562

元フォントは、

ゴシックです。

 

 

 

 

 

 

 

 

 

 

2012y05m28d_104344223タグを追加して、表示すると・・・・。

 

【メイリオ】に変更。

 

 

 

 

 

 

 

確認ができたら、保存してくださいね。

 

 

 

ちょっと、雰囲気が変わりますね。

 

 

 

ぜひとも、やっていみてくださいね。

 

 

 

【フォントの種類】の変更でした。

 

 

 

01_red

こんなことが、知りたい!!ご希望がございましたら、

メールにて、ご連絡くださいね。

 

 

 

テンプレートデザイン・カスタマイズのこと、アクセスアップのこと、
アメブロのことならお任せあれ!

Copyright © アメブロdeアクセスアップ All Rights Reserved.