Webサービス Windows はてなブログ コンピューター

はてなブログのフォントを変えてみよう♪

投稿日:

Font

こんにちは。
Webデザイナーになりたいたかなしゆうです(まだ駆け出してもいないけど)。

みなさんはブログでどんなフォントを使っていますか?
わからない?
フォントはとても大切ですよ。
ブログの印象を決めます。
ということで、今回ははてなブログのフォントの変更の仕方をご紹介します。

フォントを用意する

まず、フォントを用意する必要があります。
ブログのフォントはWebフォントというものが必要です。
あなたが日本語でブログを書いているなら日本語のWebフォントを用意する必要があります(ただ、日本語は文字数が多いので読み込み速度に影響するようです)。
Webフォントとして提供されているものを使うか、自分でサーバーにアップロードする方法があります。

今回はGoogleが提供しているものを使います。
下のサイトから好みのフォントを選びましょう(好みのフォントまで画面をスクロールするだけです)。

Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

コードを貼り付ける

次はコードをはてなブログのカスタマイズ画面に貼り付けます。
はてなブログのカスタマイズ画面を開いてください([ダッシュボード]→[デザイン]→[スパナマーク])。

HTML

<link href=”http://なんちゃらかんちゃら.css” rel=”stylesheet” />のコードを[ヘッダ]→[タイトル下]に貼り付けます。
〈例〉<link href=”https://fonts.googleapis.com/earlyaccess/hannari.css” rel=”stylesheet” />

CSS

.wf-フォント名 { font-family: “フォント名”; }をCSSの欄に貼り付けます。
そして、.wf-フォント名の部分を適用させたいところに変更します。
基本的にはbodyとすると全体が変わります。
〈例〉body {font-family: “Rounded Mplus 1c”; }

しかし私の場合、ブログの説明と記事タイトルが変わらなかったので別途設定しました。
その場合は、以下のように指定します。
ブログの説明部分…”#blog-title { font-family: “フォント名” !important; }”
記事タイトル…”.entry-title a {font-family: “フォント名” !important; }”
〈例〉#blog-title { font-family: “Hannari” !important; }

これで完成です。
どうです、変わりました?

 

読んでくれてありがとうございました♪

-Webサービス, Windows, はてなブログ, コンピューター

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【t検定】はてなブログProにするとアクセスと収益がアップするのか【実験】

はい、こんにちは(厳かに)。 みなさんお待ちかね(誰も待っていない)の「はてなブログProにするとアクセスと収益がアップするのか(実験1)」の結果を発表したいと思います。 目的は、おもにキーワードリン …

悩みがあって相談・支援してくれるところを探すのに困っている人へ

プロフィールを見てもらえばわかるとおり、こう見えて結構悩みもあったんですよ、たかなしゆうです。こんにちは。 はじめに はじめに言っておきますと、今回の記事の内容は相談・支援機関検索サイトの紹介です。悩 …

EvernoteでWebクリップするときにNAVERまとめやクックパッドの体裁を崩さない方法

Chromeアドオン(他のブラウザ版はわからないが)のEverntoe Web クリッパーでNAVERまとめやクックパッドのページを保存しようとすると、レイアウトが崩れる。 本文中にちりばめられている …

Office 2013が起動しない再インストールもできない

最近パソコンの調子が悪くて、いじいじしていたらOffice 2013が起動しなくなった。アンインストールして再インストールしようとするも、エラー表示でインストールできない。やばい、レポートが書けない。 …

他人のツイートログをEvernoteに自動で保存する方法(1)

自分がフォローしている他人のツイートをEvernoteへ自動で送って、ログとして保存しておきたい。 検索するといくつか方法が出てきたが、どれも古い情報で、RSSフィードのサポートが終了している現在のT …

書いている人


《たかなしゆう》
コミュ障が福祉の仕事に就くようです\(^o^)/
あっしの詳細はプロフィールを見てね!

ブログ更新情報

広告

カテゴリー

アーカイブ

パンツ好きすぎてブログ作っちゃいました