ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ 好みのフォントに変える方法
投稿日: 2014/07/03 投稿者:webコラム
みなさん、こんにちは。
本日のアメブロカスタマイズは、『フォント変更』です。
ブログのイメチェンをするとき、ヘッダー画像や背景の変更は一番に思い浮かぶと思います。
フォントの変更というと"地味"な気がするかもしれませんが、
フォントは、読んでいる人に与える印象を変えます。
同じ文章や言葉でも、フォントのスタイルで柔らかい印象を与えたり、
スタイリッシュな感じになったり、女の子らしい感じになったりと・・・。
自分のブログで紹介している内容とマッチしたフォントを選ぶと、
記事が2割増しで良く見えるかも??しれません(笑)
是非チャレンジしてみて下さい!
まずは、ブログデザインを「css編集用デザイン」にしましょう。
↓
「デザインの変更」をクリック。
↓
ページ下の「カスタム可能」ボタンをクリック。
↓
「css編集用デザイン」をクリック。
↓
ページ上部でレイアウトの設定ができるので、好みのレイアウトを選択し[適用する]ボタンをクリックします。
↓
『「css編集用デザイン」を適用しました』と表示されたら、cssを編集するための設定は完了です!!
マイページ右上の「アメーバのサービス一覧」をクリック。
↓
デザインの変更」をクリック。
↓
「cssの編集」をクリック。
cssの編集画面が表示されます。ここから、ブログ全体のフォントを変更するためのcssの編集に入ります。
↓
下の赤枠の内容をコピーします。これがブログ全体のフォントを変更するcssです。
↓
font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
こちらを"HG丸ゴシックM-PRO",にしたい場合、
font-family:"HG丸ゴシックM-PRO", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
同じように"HG行書体"にしたい場合は、
font-family:"HG行書体", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
※複数のフォントが並んでいるのは、それぞれのパソコンで表示できるフォントが違うため。
そのパソコンが表示できる最初に表示されているフォントが使われます。
自分が変えたいフォントを一番前に書きましょう♪
コピーしてcssの一番下の部分に貼り付けます。
貼り付けが終わったら、「保存」ボタンをクリックして追加したcssを保存します。
↓
保存できたらブログを表示し、プラウザの更新ボタンをクリックします。
(古いデータが残っていると変更したcssが反映されませんので、
プラウザの更新ボタンをクリックして最新の状態に更新します。)
これでブログ全体のフォントを変更することができます!
フォントの種類は沢山あるので、自分好みのものを選んで変えてください!
<フォント参考サイト>