【アメブロカスタマイズ】フォントを「メイリオ」に変更する方法

2017年8月7日

フォントの選択はブログの読みやすさに直結します。

 

アメブロの場合、標準のフォントは「MSゴシック」です。しかし、「MSゴシック」というフォントは古くからあるフォントのためか、画面上ではにじんで表示されます。そのため、どうしても文章を読みづらくなってしまいます。

 

最近は多くのウェブサイトでは「メイリオ」というフォントを使っているケースが多いです。

 

以下に「MSゴシック」と「メイリオ」を画像で掲載いたしました。

こちらの画像を見ると見るとお分かりかと思いますが、「メイリオ」の方が「MSゴシック」よりも見やすいですよね?

 

このため、ブログのフォントを「メイリオ」(Macの場合は「ヒラギノ角ゴ」)にした方が、各段に読みやすいブログになります!

 

今回は「アメブロでフォントを”ヒラギノ角ゴ”、そして”メイリオ”に変える方法」をご紹介いたします。

 

SPONSORED LINK

アメブロに設置するコード

アメブロに設置するCSSのコードは以下の通りです。

 

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

 

これを、アメブロのCSS編集の一番最後に追加します。

 

(注)

CSS編集の際には、CSS編集後にデザインが崩れるリスクに備え、必ず編集前のコードのバックアップをとっておきましょう。

 

アメブロカスタマイズ手順

①ブログ管理メニューより「デザインの変更」を選択します。

 

②CSS編集デザインの「CSSの編集」をクリックします。

 

③CSS編集エリアを一番下までスクロールします

 

④一番下の「(6-3) メッセージ」の下に先ほどのコードを追加します

※赤いエリアに追加します。

 

追加後はこのようになります。

 

⑤追加に「保存」ボタンをクリックして完了です

 

フォントの変更前後

フォントを変えると、このようにブログの印象も変わります!

 

まずは「MSゴシック」の場合!

 

こちらが変更後の「メイリオ」の場合!

 

「サンプル記事です。」という文字だけですが、大分印象が違いますよね?

 

このように、フォントを変えることで読みやすさも大きく変わってまいります。

 

最後に

今回はデフォルトのフォントをCSS編集で変更する手順を書きましたが、いかがでしたか?

 

今回サンプルで書いた記事は一文だけですが、これが多くの文章が固まる記事となると、フォントの違いによって見やすさが大分変ります。

 

せっかく一生懸命書いた記事、読者にしっかりと読んでいただきたいと同時に、「読みやすいブログ」と好印象を持たれたいですよね?

 

こちらの記事を参考に、是非、CSS編集でフォントの変更にチャレンジしてください!

 

「ブログやSNSの発信を通じて自分のファンを増やしたい!」
「自分の夢や想いを多くの人に伝えたい!」

その一方で「発信をしたいけど、文章を書くのが苦手だから……..」と、伝えることをためらってしまう人も多いのではないでしょうか?

私は、ビジネス書書評ブログ「ビジネス書のエッセンス」を7年間もの間、執筆してまいりました。

そんな私が7年間のブログを執筆して思うことは、「”書くスキル”を身につけることは、一生の武器になる!」ということです。

このブログでは「”書く”を自分の武器とする」ために必要なスキルやマインドなどを伝えてまいります。

このブログがあなたの「書くのが苦手」が少しでも払拭し、あなたの夢の実現のために「”書く”を武器にする」お手伝いができればうれしく思います。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でTwitterでまなたけをフォローしようをフォローしよう!

↓「相手の心に刻む文章を書きたい!」というあなたの応援のクリック、よろしくお願いいたします!
にほんブログ村 経営ブログ 広告・マーケティングへ
にほんブログ村

申し込みボタン



メルマガボタン