iiie

物づくりと生活、"経験"を記事へ

ヘッダーの『ブログタイトル』をカスタマイズする【gram】

f:id:gorislog:20190407194632p:plain

 

はてなブログテーマ『gram』のカスタマイズ記事です。

 

gramsample.hatenablog.jp

 

 

『ヘッダー:ブログタイトル』のカスタマイズについて

 

gramでは、GoogleFontsを利用しています。

GoogleFontsはGoogleが公開しているフォントをサーバーから読み込み、ブログに表示するサービスです。

 

※ Google Fonts

fonts.google.com

 

当ブログでは、GoogleFontsの『Lobster』を使用しています。

 

f:id:gorislog:20190426181832p:plain

 

※Lobsterのページ

fonts.google.com

 

デザイン性の優れたフォントが多く存在しているので、手軽にブログの”カッコよさ”をグレードアップできます。

 

また、ここではブログタイトルの文字サイズや字間の指定方法も掲載します。

 

フォントを変更する

フォントを読み込む

 GoogleFonsを利用する場合、まず使いたいフォントを読み込む必要があります。

 

f:id:gorislog:20190426184752p:plain

 

  • GoogleFontsにて、使いたいフォントを探し、気に入ったフォントの右上の『+』をクリックする
  • "Family Selected"がページ下部から出現するので、自分がクリックしたフォントが追加されたのを確認する。
  • "Family Selected"の右側にある『-』をクリックする

 

f:id:gorislog:20190426185355p:plain

 

  • 使うフォントが表示されていることを確認する
  • Embed Fontの欄にあるコードをコピーする

 

 

f:id:gorislog:20190426190539p:plain

 

  • はてなブログの設定画面を開く
  • 詳細設定を選択
  • 下へスクロールし、『検索エンジン最適化』内の『headに要素を追加』を探す

 

f:id:gorislog:20190426190724p:plain

 

  • コードをペーストする
  • 下までスクロールし、設定を保存するために『変更』ボタンを押す。

 

これでブログにフォントを読み込むことができます。

 

読み込んだフォントをCSSで指定する

読み込むだけではフォント変更はできないので、CSSの記入をする必用があります。

 

f:id:gorislog:20190426191459p:plain

 

  • デザイン画面を開く
  • カスタマイズ(スパナのマーク)を開く
  • デザインCSSを開く
  • コードが記載されているエリアがでるので、そこにCSSを追記する

 

追記するコードは

 

#title a {
font-family: 'Shadows Into Light', cursive;

 

で、オレンジ色の部分を読み込んだフォントに変更します。

Family Selected内にCSSの記載があるので、それと差し替えると簡単です。

 

f:id:gorislog:20190426192351p:plain

 

  • フォントが読み込んだ物と一致するか確認する。
  • "Specify in CSS"内のコードをコピーする
  • コピーしたコードを、上に記載したコード(#title a {~~~})のオレンジ部分と差し替える

 

f:id:gorislog:20190426193138p:plain

 

  • 差し替えたコードをデザインCSSに貼り付ける。

 

f:id:gorislog:20190426193543p:plain

 

  • コードを記載するとプレビューページが変わり、フォントが変更されます。

 

ブログタイトルのフォント変更は、ブログのデザインに大きく左右するものです。無料で利用できるGoogleのWebフォントを使用すれば、簡単にデザイン性をグレードアップできるので、おすすめのカスタマイズです。

 

ちなみに、数は少ないですが、日本語に対応したフォントも公開されているので、ブログタイトルに使用したい方には必見です。

 

日本語対応フォント一覧

fonts.google.com

 

タイトルサイズ・字間の調整

 

調整はCSSにて行います。

 

f:id:gorislog:20190426191459p:plain

 

 

調整方法はいろいろありますので、ここでは文字サイズ・字間の指定のみ紹介します。

 

  • 文字サイズの変更⇒ font-size: 0.7em;
  • 字間の変更⇒ letter-spacing: 0.7em;

 

緑の数字部分が調整する数値となります。

※px指定でも構いませんが、gramでは基本的にemで指定しているので、emをお勧めします。

 

例:

#title a {
font-family: 'Shadows Into Light', cursive;

font-size: 0.7em;

letter-spacing: 0.7em;
}

 

上記のコードを記入すると

 

f:id:gorislog:20190426195408p:plain

 

上の様になる。

下はサイズ・字間を指定してないもの(フォントは変更指定する場合)。

 

フォントの変更と合わせて、サイズと字間の変更をすると、デザインの幅が広がります。