読者です 読者をやめる 読者になる 読者になる

Endoo Site

好きなこと、感じたことを、ちょっぴり誰かのために。

【はてなブログ】GoogleFontsでブログタイトルの文字をかっこよくしてみた【フォント変更】

【スポンサーリンク】

ABC

先日からEndooSiteのカスタマイズをせっせとしております、Endoo(@endoosite)です。

 

今回はブログタイトルのフォントを簡単に変更する方法を紹介していこうと思います。特にブログタイトルに英数字を使っている方は必見です!かっこよくなります!

 

▼参考にさせて頂いたサイト

www.takurin.com

 

ブログタイトルをかっこよくしたい!

ブログタイトルに画像を使っている人も多いと思いますが(僕も使ってました)、読み込む時間もかかりますし、何と言ってもデザインに一苦労です。悩みます。

 

で、なんとか文字だけでかっこよく表示させることはできないものか!!と思ったわけです。そして、けっこうあっさりと見つけてしまいました(笑)

 

それが「GoogleFonts」です。

 

▼普通はこんな感じ

f:id:eshateblo:20160813072537j:plain

 

▼GoogleFontを使うと、COOL!

f:id:eshateblo:20160813072602j:plain

 

Google Fontsの使い方

1.アクセスしまっす!

>>Google Fonts

 

2.好きなフォントを選ぶ!悩め!

▼Add to Collectionで選択する(複数可)

f:id:eshateblo:20160813073848j:plain

 

▼下部の「Collection」に選択中のフォントが表示・追加される

※「Collection」クリックで開閉

f:id:eshateblo:20160813073920j:plain

 

▼Useをクリック

f:id:eshateblo:20160813073935j:plain

 

▼4番目の項目「Integrate the fonts into your CSS:」内のCSSをコピー

f:id:eshateblo:20160813074050j:plain

 

▼この部分をコピー!

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

 

3.はてなブログに貼りつける!

下記を参考に【デザインCSS】にコピペする。

赤色:GoogleFontsでコピーしてきたCSS(今回は例として「Roboto」というフォントを使用)

青色:文字の大きさ(数字部分を変えるとブログタイトルの大きさが変わります)

#title
{
font-family: 'Roboto', sans-serif;
font-size: 50px;
  margin:0 auto;
}

 

 最後に

ブログタイトルはブログの命ですが、デザインもかなり重要だと思います。ぱっと見の印象もありますし。

 

今回紹介した方法だと簡単にフォントアレンジできるので、良かったら試してみてください。(どのフォントを使うか悩みますよー!)

 

では。