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

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

関連記事

使っているおすすめWebサービスをゆる~く紹介するよ

こんちは!今回は、私が使っているおすすめWebサービスをゆる~く紹介するよ😄 私が使っているおすすめWebサービス Feedly URL:http://feedly.com/ RSSリ …

MINOURAスマホホルダーをPCXに取り付けNexus 5を装着した所感

MINOURA(ミノウラ)のスマートフォンホルダー iH-500-STDを買ったので覚書き。 MINOURA(ミノウラ) スマートフォンホルダー [iH-500-STD] スタンダードサイズ 22.2 …

【方法】適職がわからない? まずは自分を知ろう!

無職まで残りわずかな高梁ゆうです、こんにちは。次の仕事どうしよう……やっぱり長く勤められるように、自分に適した仕事を選びたいよね。今日はそんなお話。 職業選択には自分を知ることが大切 あなたは自分を知 …

Android 5.0 Lolipop(Nexus 5)のメモ

動作が重い・バッテリーの消費が激しい 再起動してRAMを空ける。 Amazon系のアプリをアンインストールすると良いとの情報。 また、OK Googleをオフにすると、マシになる気がする(私の主観)。 …

U-mobileのLTE SIMが届いたのでNexus 5でテスト

楽天SIMを解約して、U-mobile dのSIMを契約してみた。申し込みから4日でSIMカードが届いたよ、早い!ちょうど2枚のSIMが手元にあるので、通信速度を比べてみた。測定場所は関東某県某市、時 …

書いている人


《高梁ゆう》
パンツ大好きぱんつブロガーの高梁ゆうだよ!
無職になったウェーイ\(^o^)/
あっしの詳細はプロフィールを見てね!

ブログ更新情報

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

広告

カテゴリー

アーカイブ