ひげしげノート

おすすめレビュー・格安SIM・ブログ関連の雑記ブログです。

【はてなブログをカスタマイズ】フォントを変えてブログの雰囲気を変える!

f:id:higeshige:20190809001215j:plain

 

ブログのカスタマイズにもいろいろある中で、ブログ全体の『フォントの種類を変える』という地味なカスタマイズがあります。

 

とても簡単なカスタマイズですが、ブログの雰囲気をガラッと変えることもできますよ。

 

CSSをいじることにはなりますが、サルワカさんのサイトでフォントを選んで自動作成されたCSSをコピペするだけです。

 

やり方をまとめておきたいと思います。

 

 

フォントを選ぼう!

サルワカさんのサイト「Font-familyメーカー」で変えてみたいフォントを選んでいきましょう。

 

saruwakakun.com

 

使い方もサルワカさんが丁寧に説明してくれていますので、これで十分!

 

saruwakakun.com

 

 

ですが、ざっくり説明しておきます!

 

フォント選びの注意点

フォントを選ぶ際の注意点が2つ

  • フォントは使っているOSによって使えるものと使えないものがある。
  • CSSの中で英語フォント、日本語フォントの並べる順番を決める。

 

「Font-familyメーカー」ではOSごとに使えるフォントを分けて表示しています。

 

f:id:higeshige:20190809010134j:plain

 

日本語フォントには「日本語」と表示してあるので選び間違えはないでしょう。

 

f:id:higeshige:20190809010006j:plain

 

CSSに先に並べたフォントが優先的に適用されます。英語にはカッコいい英語フォントをあてたい場合は先に英語フォントを並べましょう。

 

有名なサイトのフォントも選べる!

有名なサイトのフォントを選ぶこともできます。サルワカさんおすすめのフォントもあり。このボタンを押すと自動的にフォントを選んでくれます。

 

f:id:higeshige:20190809010315j:plain

 

 

選び終わると一番下の欄にCSSが自動的に出来上がりますので、ダブルクリックしてコピーしておきます。

 

f:id:higeshige:20190809010708j:plain

 

 

はてなブログへの設置場所

上でコピーしたCSSを下記の場所にペーストして終わりです。

 

  • 【デザイン】➡【カスタマイズ】➡【デザインCSS】 

 

最後、【変更を保存する】ボタンを押すのを忘れずに。

 

さいごに

ブログのイメージに合わせて変えてみることもできますし、ちょっと気分一新ブログ頑張ろうなんて思っているときにもいいかもしれませんね。