カキタクナッタラ

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

カキタクナッタラ

出力することを忘れないように何かを書きます

はてなブログのタイトルフォントをGoogle日本語フォントで公開しているニコモジに設定する

f:id:d3dayo:20170425100952j:plain

たまにブログのデザインを弄りたくなったので、このブログのタイトルフォントをGoogleが公開している日本語ウェブフォント(ニコモジ)で表示されるよう設定してみました。(スマホ版はそのまま)

せっかくなので、その手順を記事として残しておこうと思います。

今回使用したウェブフォント

Googleが2016年10月頃から9種類の日本語に対応したデザイナーウェブフォントを試験的に公開し始めたようなので試しに使ってみました。

googlefonts.github.io


タイトルのフォントとして設定する手順

上記リンク先にあるウェブフォントをはてなブログのタイトルフォントとして設定する手順を紹介していきます。(PC版での設定)


公開しているページへアクセス

まずは上記のリンクからGoogle Fonts 早期アクセスのページを開きます。

f:id:d3dayo:20170310035556j:plain

アクセスすると9種類のフォントがサンプル付きで表示されているので、この中からタイトルフォントとして使いたいフォントを選びます。

HTMLのコードをコピーする

タイトルフォントとして使用したいフォントが決まったらページを下のほうにスクロールしていき、使いたいフォントの紹介とサンプルが個別で表示されるようにします。

f:id:d3dayo:20170310040435j:plain

こんな感じの表示になったら右側に記載されている以下のコードをコピーします。(今回は仮にニコモジを使いたい場合)

f:id:d3dayo:20170310040553j:plain

ニコモジを使う場合、以下のコードをそのままコピーしてもOKです。

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

はてなブログのheadに要素を追加する

コードをコピーしたらブログの管理画面を開いて「設定」→「詳細設定」と選択します。

f:id:d3dayo:20170310041741j:plain

詳細設定を選択してページを下にスクロールしていくと「headに要素を追加」という項目があるので、そこにある入力欄に先ほどコピーしたコードを貼り付けます。

f:id:d3dayo:20170310042312j:plain

コードを貼り付けたらページ一番下にある「変更する」を選択して設定を反映させます。

デザインCSSを編集する

管理画面へ戻って「デザイン」→「カスタマイズ」→「デザインCSS」と選択していき、デザインCSSの入力欄に以下のCSSを貼り付けます。(ニコモジの場合)

/*タイトルのフォント*/
#title a {
font-family: "Nico Moji"; }


ニコモジ以外を使う場合にはGoogle Fonts 早期アクセスのページで使いたいフォントのCSSからフォント名をコピーして"Nico Moji"の部分を各フォント名に書き換えてください。

f:id:d3dayo:20170310044604j:plain

CSSを貼り付けたら「変更を保存する」を選択して設定を完了させれば作業完了です。

これでタイトルフォントをGoogle Fontsで公開しているデザイナーウェブフォントでの表示に変更することができます。

タイトルフォントサイズの変更

変更したフォントのサイズがしっくりこない場合には、以下のCSSをフォント指定の時と同じようにデザインCSSへ貼り付けることでフォントサイズを調整することができます。

/*タイトルのフォントサイズを変更する*/
#title{ font-size: 1.8em; }

上記コードでは「1.8em」としていますが、この部分の数値を変更することでフォントサイズを調整することができます。

1.8emとは「1.8倍」のことで、CSSでサイズを指定する前よりフォントが1.8倍の大きさで表示されるということです。例えば数値を1.5に書き換えればこれより小さくなりますし、2.0に書き換えればこれより大きく表示されます。

おわりに

タイトルの表記に独自性を出したいけど、ロゴ画像作成まで手がまわらないといった人には、手間がかからないウェブフォントでのタイトル表示がオススメです。

今回は日本語フォントでの表示設定を紹介しましたが、Googleが公開しているウェブフォントは英字のものだと、種類がまだまだたくさんあります。(設定の仕方は基本的に同じ)

fonts.google.com


最後に全然関係のない話になりますが、今回はタイトルフォントの表示カスタマイズからこの記事の作成まで(手順のスクリーンショットなど)全てスマホだけで作業したのでけっこう手間がかかりました。

ブログを書く時にわざわざPCを開くという習慣から抜け出したくて、このブログはまだ1回もPCから更新やカスタマイズをしたことがありませんが、デザイン弄るときはやはりPCでの操作が楽ですね^^;


スマホ版のデザインでもタイトルのフォントをニコモジにする手順はこちら(はてなPro対応)
d3dayo.hateblo.jp



でででーさん
d3dayo.hateblo.jp