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

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

関連記事

ネタに困ったりモチベーションが下がったらブログチャレンジをしよう

はてなブログのブログチャレンジ、やってますか?実は私、最近この機能を知りました。タスクをクリアするごとにポイントが溜まって、レベルが上がってくんです。これはモチベーションアップにいいなって思いました。 …

はじめてNexus 5を買う前の疑問とその回答

前の記事の内容増えてきちゃったので、購入前の疑問をこちらに移した。間違いがあるかもしれないから鵜呑みにしないでね。  黒と白ってカバーの色違うだけ? 側面と上部スピーカーメッシュが違う 黒の側面は光沢 …

はてなブログをカスタマイズする際に参考にした記事集(76記事・46カスタマイズ)

  ※随時更新(最終更新2016年5月23日) はてなブログ初心者で、HTMLやCSSも素人の私がブログをカスタマイズするために参考にした記事集のまとめです。半分は自分用メモ。基本、HTML・CSS初 …

精神障害者な私のEvernote活用法

精神障害者な私がEvernoteに保存しているものを公開します。ありがちなものは割愛しています。 マイマニュアル 自分の取扱説明書みたいなものです。コミュニケーションで気をつけることや考え方、こんなと …

キヤノンの『Creative Park』が無料なのにすごい!

こんにちはひふへほ。今回はプリンターでおしゃれ楽しいキヤノン『Creative Park』というサイトを紹介します。 サイトはこちら→Canon Creative Park なにがすごいのか 誰でも利 …

書いている人


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

ブログ更新情報

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

広告

カテゴリー

アーカイブ