s1hsgw

Design x Engineering x Business

1日かかってブログタイトルのフォントが変わったというだけの話

f:id:shunichi_hasegawa:20150302233106j:plain

はじめに

どうもみなさんおはこんばんにちは,しゅんです.

今日も本ブログを読んで頂きありがとうございます^^

さて,先日こんなかんじで↓突然開設した本ブログですが,意外にも多くの方に見ていただけたようでびっくりしてます.

卒論発表一週間前にブログをはじめちゃった話 - Re:Share House

卒論発表も無事終えることができました.

(それと,まだ全くコンテンツがないブログにもかかわらず読者登録してくださったみなさんありがとうございます)

さて,そんなわけで今日はさっそく新しい記事を書こうと意気込んでいたわけですが,いかんせん何も決めずに始めたブログ.何を書いたらいいのかさっぱり思いつきません(笑)

それで「あーでもない,こーでもない」なんて迷ってたらもうこんな時間.一日が終わってしまいそうです.これはまずい!と思ったのでとりあえず味気ないこのブログのタイトルの見た目をほんの少し変えてみたのでそれをネタにしてしまうことにしました.

ということで,今日ははてなブログのタイトルを「少しだけ」オシャレにする方法をご紹介したいと思います.

Webフォントを使ってみよう

タイトルのフォントを変えるにあたって,画像を作成するのもいいかな〜なんて思ったりもしたのですが,面倒くさがり屋な僕は手っ取り早くWebフォントを使うことにしました.「Web フォントって何?」って方はこちらの記事をご覧になってみてください.


Webフォントサイトまとめ9選!とりあえず一度使ってみませんか? | 株式会社LIG

今回はGoogle Web Fontsを使ってみることにしました.

Google Web Fontsの使い方

Google Fontsにアクセスすると次のようなページが表示されるので,

f:id:shunichi_hasegawa:20150302221830j:plain

まず左上の「Preview Text」という欄にGoogle Web Fontsを試してみたい文字列を入力してみましょう.そして,一覧の中から気に入ったフォントを見つけたら右下の「Add to Collection」というボタンをクリック!

すると,ページの下部にCollectionの一覧が表示されるので,

f:id:shunichi_hasegawa:20150302223541j:plain

「Use」というボタンをクリックして次のページに移動しましょう.

次のページに移動したら2つの情報をコピーしましょう.

まず一つ目は,Google Web Fontsさんを使いますよ〜という情報.例えばこんなかんじです↓

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

これを,はてなブログ管理画面からデザイン > カスタマイズ > ヘッダ と移動すると表示される「タイトル下」と書かれた欄へ貼り付けます.

f:id:shunichi_hasegawa:20150302225718p:plain

続いて,使用するフォントの情報をコピーします.

font-family: 'Oswald', sans-serif;

そしたら,先ほどと同様の設定画面に移動して,「デザインCSS」という欄を開きます.
するとエディタが開くので,そこに次のように記述しましょう.

#title {
  font-family: 'Oswald', sans-serif;
}

これで作業は終わりです.終わったら,「変更を保存する」をクリックしてブログを確認してみましょう!

まとめ

いかかがでしたでしょうか?「はてなブログやってないし興味ないわー!!」と思ったみなさんごめんなさい(^^;)

次回はもう少しみなさんの役に立つような記事を書けるように頑張ります(汗)

ちなみに今回ははてなブログでの設定方法を紹介しましたが,他のブログでもWebフォントは使えるので他のサイトでブログを運営してる方,もしくはこれから始めてみたい方はぜひ参考にしてみてくださいね!

それではまた!See you again soon!