はてなブログカスタマイズ 簡単！Google ウェブフォント設定

最終更新日 2017年6月6日

このブログを開設した時に行ったカスタマイズを紹介いたします。

フォントはGoogleウェブフォントを利用しました。

フォント設定は簡単ですので試してみて下さい。

使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。

「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。

WordPress侍

2020.11.21

役に立つ！はてなブログのカスタマイズ20選

https://wordpress-samurai.com/hatenablog_customize_20

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。しかし、はてなブログのカスタマイズ記事を多数掲載していたので、そのまま無くすというのも勿体ないと思い、WordPressサイトではありますが、カスタマイズ記事だけをこちらのサイトに移設いたしました。記事文章につきましてはなるべく原文を使用しているため、おかしな内容になっているかもしれませんが、「はてなブログ」を利用されている方にはご理解いただけると思っています。また、はてなブログと動作が違うものもいくつかあります。それは、イメージを持...

はてなブログをやるなら、制限が少ないはてなブログProがオススメ！

Googel Fontsへアクセスする

Google Fonts

 

556 Posts

1592 Users

52126 Pockets

Google Fonts

https://fonts.google.com

Making the web more beautiful, fast, and open through great typography

Google web Fontsへ移動します。

利用したいコレクションを選択します。

今回は「Comfortaa」というフォントを利用します。

少し丸みを帯びたフォントはオシャレな感じがします。

右上の「SELECT THIS FONT」をクリックします。

右下に「Family selected」が表示されますので「-」をクリックします。

「EMBED」を選択し，枠の中をテキストエディターへコピーしておきます。

これがフォントを呼び出すタグです

こちらがフォントファミリーです

「CUSTOMIZE」ではフォントウェイト，言語分類をセレクトできます。

はてなブログでフォント設定する

フォントを呼び出すタグを「設定」⇨「詳細設定」⇨「headに要素を追加

」の中に貼り付け　⇨「変更する」

フォントファミリーを「デザイン」⇨「カスタマイズ」⇨「デザインCSS」に貼り付けます。

変更を保存して終了です。

反映されましたか？

どうでしょうか，反映されていますでしょうか？

「We closed the site in 2020.」(WordPressなので表示されません。)

簡単にできるカスタマイズですが，ブログのイメージがガラッと変わりますので試してみて下さい。