凡人クラゲの仮想通貨戦線

ご覧くださいましてありがとうございます。凡人クラゲ、略して「ボンクラ」の仮想通貨BLOGです。仮想通貨や投資とか子育てのことを書いています。人生楽しんだもの勝ち。

TypeSquare(タイプスクウェア)ではてなブログのフォントを変える

ご覧くださいましてありがとうございます。

凡人クラゲ略してボンクラです。

 

このブログのフォントを規定のフォントから、TypeSquareを利用して見やすいユニバーサルデザインのフォントに変更した話です。

ユニバーサルデザインは誰にでも見やすい書体です。 


f:id:kmichannel:20180911233220j:image

TypeSquare(タイプスクウェア)とは

TypeSquare(タイプスクウェア)は、書体(フォント)を取り扱う株式会社モリサワのウェブフォント製品です。

typesquare.com

 

トライアウトという項目で自分のURLで試してみることができます。

様々なフォントを取り扱っており、そのブログにあった書体がきっと見つかるはずです。

僕は誰にでも見やすいようにブログをユニバーサルデザインのUD新丸ゴRにしています。(パソコンから見るとフォントが変更されています。)

 

サービスの利用料ですが、URL一つに限り(10,000アクセス/月以下)なんと無料で使えます。

アクセス数が増えたら有料プランに変更も検討してもいいですね。

TypeSquareの利用にあたっては新規登録のためのメールアドレスが必要です。

 

TypeSquareでの設定

TypeSquareへ登録が済んだらログインしましょう。

無料プランを選択し、マイページのプラン設定詳細で設定を行います。

利用書体設定

利用書体という項目で、利用したい書体を選択します。

書体を選択して設定したら、CSSの指定例が表示されますので、こちらは後で使います。

利用サイトURL

利用したいサイトのURLを登録します。

www.~~~~~~~.comまで入力します。

 

以上でTypeSquare側の設定は終了。

あとはTypeSquareで表示されたコードをはてなブログにペタペタ貼るだけです。

 

はてなブログ側の設定

headに要素を追加

はてなブログ

[設定]→[詳細設定]→[headに要素を追加]の欄に、

TypeSquareの

[プラン設定詳細]→[プラン専用タグ]にある〈script type=○○〉から始まる文字列をコピーして貼り付けます。

 

 デザインCSSの設定

はてなブログ

[デザイン]→[カスタマイズ(真ん中のスパナマーク)]→[デザインCSS]の欄に

TypeSquareの

[プラン設定詳細]→[基本利用枠]にあるCSSの指定例を見て下記のように入力します。アンダーライン部分を指定例を見て変更してください。これはUD新丸ゴの設定です。

body { font-family:UD Shin Maru Go Regular}

 

それぞれ設定を保存して終了です。

これでブログのフォントがTypeSquareで選択したフォントに変更されます。

書体で雰囲気はかなり変わるので、自分のブログの雰囲気にあったフォントを探してみてはいかがでしょうか。

お気に入りのブログをカスタマイズすることで、さらにブログに愛着が湧きますよ(^^)</p

 

押してくださると励みになります。


にほんブログ村