はてなブログのコード埋め込みのフォントを改善する (Inconsolata, Noto Sans JP)

f:id:ibuquicallig:20190703023831p:plain

こんにちは、たねやつです。今回ははてなブログネタです👀

大小コードの埋め込みが簡単なのではてなブログを使い続けているのですがWindowsで表示したときのデフォルトの(日本語)フォントがあまりイケてないのです(個人的意見)。

あいうえおaiueo安以宇衣於とあいうえおaiueo安以宇衣於では後者のほうが平文のフォントと同じなので見やすいかと思います。

以下の大コードの埋め込みもデフォルトのものよりもすっきりして見えるかな？という感じです。もしかしたらMacで見てみるとそんなことないかも🤔

const { Client } = require('tplink-smarthome-api');

const ip = '';  // プラグのIPアドレスを指定

const client = new Client();
client.getDevice({host:ip}).then((device) => {
    device.getSysInfo().then(console.log);
    device.setPowerState(true);
});

以下はてなブログでの設定方法などについてです。

Google Fontsを活用
手順
最後に

Google Fontsを活用

すでにこのブログではNoto Sans CJK JPというフォントを使用しているので以前から活用しているのですが、GoogleがHTML/CSSの埋め込みだけで使えるフリーのフォントを提供してくれています。

去年末に日本語のフォントも追加されたのをきっかけにこのブログでも使い始めました。他のブログを見ていても結構このフォントやM+フォントを使用されているのも増えてきた印象があります。

フォントを追加するとなると、サーバー内にフォントファイルを配置してそれを読みこむという感じでしたが、このサービスによってぐっと導入が簡単になりました！

手順

それでは手順です。このブログと同じような感じにするのであればコピペでOKです。

各コード、修正前に必ずテキストエディタなどにバックアップを取っておいてください！

使いたいフォントを選択する

まずは先ほどのGoogle Fontsから使いたいフォントを選びます。このブログではコードの部分の英字フォントはInconsolata、日本語フォントはNoto Sans JPを使用しています。

英字フォント

まずは英字フォントを指定します。サイトを開くと何やら英語で分かりにくいかもしれません。

左上のCategoriesを選択すると字体の種類が選択できます。ここではMonospace(等幅)だけにチェックを入れてください。コードの埋め込みなので当然等幅フォントを使用しましょう。この段階で10数フォントに絞り込めます。

私が使用しているInconsolataというフォントはWindowsの Consolasというフォントに似ているというか、影響されているフォントです。視認性が高い(私の目が慣れているだけ？(笑))のでこれを使います。

フォントの右上の+ボタンを押すことで後々生成されるコードに追加されます。これで英字フォントの選択は完了です。

日本語フォント

次に日本語フォントを指定します。

先ほど指定したMonospaceの条件消して、LanguageにJapaneseを指定します。あまり種類はないですがどれも視認性が高く、個性的です！

使いたいフォントが決まったら先ほどと同じく+ボタンを押して選択します。これで画面下のタブには2 Families Selectedとなっているはずです。

今まで使ってきたGoogle Fontsのフォント

今まで使ってきたGoogle Fontsのフォントも生成されるコードに混ぜたほうがスマートなコードになるので選択してFont Familyに追加しておきます。今までGoogle Fontsを使用したことない場合は無視してOKです。

コードを取得する

これで使用するフォントが選択できたのでコードを取得します。

2 Families Selectedの部分を選択するとしたからニョキっと生えてきます🍄

タブの部分をEMBED(埋め込み)に選択するとはてなブログに埋め込むためのコードを取得できます。コードの形式も二つ選べますが今回はSTANDARDを使用します。コードはこんな感じになっています。

(InconsolataとNoto Sans JPを選択した場合)

<link href="https://fonts.googleapis.com/css?family=Inconsolata|Noto+Sans+JP&display=swap" rel="stylesheet">

このコードを使用します。

フォントを読み込む

それでははてなブログのほうの設定に移ります😎

先ほどのコードはhtml形式なのでブログのどのページでも表示される場所に追加する必要があります。

はてなブログのカスタマイズでよく使われる場所としてはヘッダの設定に混ぜ込む感じですね。それに沿って進めていきます。

まずはブログの管理画面(ダッシュボード)を開いて、左側のデザインを選択します。さらにスパナ🔧マークを選択 > ヘッダを選択します。

タイトル下の下にコードを記述することができる場所がありますので、既存のコードを破壊しないように気を付けながら先ほどの

<link href="https://fonts.googleapis.com/css?family=Inconsolata|Noto+Sans+JP&display=swap" rel="stylesheet">

を埋め込みます。

既存のコードがある場合は、ほかのフォントを読み込んでいる部分がまとまっている所の末尾あたりに追加すると後からメンテナンスが楽になります。フォントに関するコードがなさそうな場合は一行目に追加しておくが無難かと思います。

追加すると行番号の部分にXマークが表示されますが特に問題ないのでそのまま進めていきます。どうやらURL内の&のせいでエラーが誤検知されているようです。

デザインの画面を開いたまま次に進みます。

CSSに追記する

フォントは読み込めたので次はpre.codeなどに適応していきます。

デザイン画面の一番下にデザインCSSという項目があるのでそれを選択します。結論から行くと以下の二つの設定を追加します。InconsolataとNoto Sans JP以外のフォントを使用している場合はそれぞれ読み変えてください。

pre.code {
    font-family: "Inconsolata", "Noto Sans JP", 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}

.entry-content code {
    font-family: "Inconsolata", "Noto Sans JP", 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
    font-weight: bold;
}

pre.codeに設定した値が上のような大きなコードの埋め込みの設定です。.entry-content codeに設定した値が左のような小さなコードの埋め込みの設定です。こちらに関しては視認性の関係で太文字化(font-weightをbold)しています。確認して不要な場合はfont-weightの行を削除してください。

htmlを追加したときと同じくこちらも既存のコードを破壊しないように追加します。特にすでにpre.codeの設定などが存在している場合はfont-familyの部分のみいい感じに統合する必要があります。

例えばすでに以下のようなコードが存在している場合、

pre.code {
    margin-bottom : 75px;
    background    : #1c1c1c;
    border-radius : 4px;
    font-size     : 16px;
    color         : white;
}

以下のように統合する必要があります。フォント関係の設定はまとめるようにしておくと後から見やすいです。

pre.code {
    margin-bottom : 75px;
    background    : #1c1c1c;
    border-radius : 4px;
    font-family   : "Inconsolata", "Noto Sans JP", 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
    font-size     : 16px;
    color         : white;
}

以下余談ですが、font-familyで指定しているMonaco以下の設定値は、何も設定していない場合のフォントになっています。Google Fontsで取得したフォントを表示するようにしているのでこれらのフォントが使われることは無いですが、何らかの問題に備えてそのままお尻に追加しています。

font-familyで設定したフォントは前から順に表示されます。つまりInconsolataで持っていないフォントはNoto Sans JP、さらにないフォントはMonaco以降のフォントが採用されます。

Inconsolataは英字のみのフォントなので英字はInconsolata、日本語はNoto Sans JPという合体フォントとなって表示されます。

確認

最後に設定した内容がちゃんと表示されるか確認します。直近で書いた記事内にコードの埋め込みがある場合は、設定を保存する前に確認することができます(記事タブを選択 > 記事ページをプレビュー)。そうでない場合は変更を保存して埋め込みのあるページを確認しに行くか、Chromeのデバッグで無理やりhtmlを編集するか、などです。

反映できていることの確認と、それ以外の部分でデザインが崩れていないかなども確認しておきましょう。

問題ないことが確認できたら作業終了です！