【プログラミング】Google Fontsを使ってはてなブログのフォント変えてみる。

f:id:pottiri:20201004232437p:plain
お疲れさまです。POTTIRIです。
クロスワードを自動生成するプログラムを作成していましたが、
完全にワード・サーチ・パズルを作るプログラムに方向転換しました。

pottiri.tech
よく考えたらクロスワードって考える時間が長いからWEB向きじゃない気もするし・・・。
幸いクロスワードのプログラムが活かせるので、
かなり短期間に完成できそうです。
プログラムでワード・サーチ・パズルのお題を作って、
それを集めたサイトを作ろうと思います。
ですが・・・、サイトにどうしても必要な機能・・・一覧とかカテゴリとかSNSシェアとかを全部自分で作るのは手間だなあ・・・って。
なのでワード・サーチ・パズルのWEBアプリを作ってそれをはてなブログに埋め込む方法を模索中です。
多分今週中には公開できると思います。

というわけで・・・、
はてなブログを応用してワード・サーチ・パズル専門のWEBサイトを作成中です。
その中でブログのフォントを変えたので、
今日はその方法を共有しておきます。
私はデザインはできないので、変えれるところはこだわりたいんですよね。
さて、今回私はフォントを変えるのにGoogle Fontsを使いました。

googlefonts.github.io

今の所9種類の特徴的なフォントが使えますね。
その中の一つを反映してみます。
こころ明朝を使ってみましょう。

f:id:pottiri:20201004234144p:plain

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

.wf-kokoro { font-family: "Kokoro"; }

こころ明朝の説明文の中にこんな設定値がありますね。
まず上の<link href〜を反映します。
はてなブログの管理画面➜設定➜詳細設定➜headに要素を追加　にこれを追記します。

f:id:pottiri:20201004234749p:plain

次にはてなブログの管理画面➜デザイン➜スパナマーク➜デザインCSS　に{ font-family: "Kokoro"; }を追加します。
この時、

.wf-kokoro { font-family: "Kokoro"; }

のままだと

class="wf-kokoro"

の要素にしかフォントが聞かないので

body {font-family: "Kokoro"; }

にします。

f:id:pottiri:20201004235646p:plain

これでフォントが変わります。

f:id:pottiri:20201004235735p:plain

割と簡単に変えれるので、気分で変えてみてください。

ちなみに・・・一点注意点です。

フォントは基本的にMacやiPhoneのほうが綺麗に見えます。

変わったフォントを使う場合はWindowsやAndroidでどう見えるかをチェックしておいてください。

最後まで読んでいただきありがとうございました。

アフィリエイト

ワード・サーチ・パズルのプログラムは、
こんな感じの技術を組み合わせて作っております。