アフィリエイト広告を利用しています

広告

posted by fanblog

2018年05月29日

【5分でできる】ファンブログの文字フォントをカスタマイズして圧倒的に垢抜ける

73838e389518985b6dd7c9386fef0483_s.jpg

ファンブログのデメリットのひとつに、なんとなくダサいというものがあります。
テンプレートの数が少ないんですよね。

カスタマイズ用のテンプレートもありますが、まず真っ先に変えるべきなのはフォントです。
文字を変えるだけで見た目のかっこよさだけでなく読みやすさも圧倒的に変わりますよ。



ブログの印象を変えるには、CSSの「font-family」に好きなフォントを指定するだけ



font-familyには書き方があって、使える文字の種類も色々ありますが
今回はいきなり結論です。

これがおすすめのfont-familyの設定


これをそのままCSSにコピペするだけで、なんだか素敵な雰囲気になるはずです。

body{
font-family: Linotte, YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Roboto, メイリオ, Meiryo, "MS Pゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
}


ついでに文字サイズも大きく見やすくしておきましょう

font-size:16px;


そうすると
これが(Before)
スクリーンショット 2018-05-29 21.42.24.png

こうなります(After)

スクリーンショット 2018-05-29 21.53.33.png

ちょっと見やすくなったんじゃないかなあ。(わかりづらい)


さあ、それでは早速ファンブログで設定していきます。


ファンブログのデザイン設定からCSSを編集する


1.デザイン > CSSの編集を開きます。


スクリーンショット 2018-05-29 21.48.58.png
ブログ管理画面の「デザイン」から「デザイン設定」を選びます。
カスタマイズしたいテンプレート名をクリックするとCSS画面が開きます。


2.font-familyを書き換えます



変更する場所はCSSの最初の部分なのですぐにわかると思います。

* { margin:0; padding:0;}

body {
font-family:’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif;
font-size:12px;
line-height:1.4;
color:#333333; /*文字色*/
}



「body」と書かれているところに「font-family」があるので

font-family: Linotte, YuGothic, "Yu Gothic", 游ゴシック体, 游ゴシック, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Roboto, メイリオ, Meiryo, "MS Pゴシック", Osaka, "MS PGothic", Arial, Helvetica, Verdana, sans-serif;


に変更しましょう。

その下の「font-size」も変更します。16pxくらいがおすすめです。

3.保存してブログを確認しましょう。


プレビューを確認して思った通りの変更になっていたら、保存を押して完了です。



まとめ


サイトのイメージはフォントを変えるだけでグググっと変わります。
ほんの5分程度のカスタマイズでとっても簡単なので色々と試してみてください。


この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/7713036
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
検索
タグクラウド
カテゴリーアーカイブ
書いてるひと
しろさんの画像
しろ
プロフィール
名前:しろ
ブロガーに憧れ続けているも「今から始めても遅いだろう」とビビりまくり
なかなか1歩を踏み出せずにいる小心者。
やさしくしてください。愛をください。
好物は焼肉。
なかよくしてね
最新記事
×

この広告は30日以上新しい記事の更新がないブログに表示されております。