こんにちは、えむしです。今日はブログのフォントをWEBフォントへ変更する方法を見て行こうと思います。
*表示がかなり遅くなってしまったので、一旦フォントを元に戻しました・・・
現在はgoogleのNoto Sans Japaneseを使っています。
はじめに
きっかけはこちらのエントリー。 medium.com カッコイイ！でも細かな調節は面倒だし難しい、ならお手軽な方法で雰囲気を変える事は出来ないか・・・と日本語のウェブフォントを検索しました。
「みんなの文字」を導入する事によって、iOSやアンドロイド、MacOS、Windowsなどの環境に関係なく、表示を統一できます。 デメリットは日本語フォントを読み込む分の通信が発生しますので、ページの表示が重くなるかもしれません。
また、フォントを変更する事で表示崩れが発生するかもしれませんので、試す前には元の環境のバックアップを取っておきましょう。
完成図
ブログの雰囲気がどう変わったかというと
こんな感じです。左が使用前、右が使用後ですよ。現在は使用中なので「右」の状態です。
こちらのSSの撮影はKindleFireでchromeを使用した状態で行いました。
これだと低解像度でわかりにくいなーと思ったので、Macのchromeでも同様のスクリーンショットを撮りました。
これなら少しは変わったんだと言う事が分かりやすいでしょうか？フォントを変更した事で視認性が上がって文字が読みやすくなった気がします。ゴシック体の見た目もモダンで良いですね。とても気に入っています。携帯からご覧の方は画像をクリックすると拡大表示されますよ。
活用事例も公開されています。街中で見た事があるって方も多いかもしれませんね。
使用するWEBフォントは「みんなの文字」さん
改めてご紹介を。
みんなの文字は科学的な検証によって完成した DTPフォント、Webフォントです。
HPより。 minmoji.ucda.jp まずは登録が必要なので 無料WEBフォント登録／WEBフォント【フリー】 | みんなの文字 こちらの登録ページから、ユーザーの登録をしましょう。
一番下にある
こちらをクリック。
名前やメールアドレスを登録する所があるのでそちらを入力。OKすると、登録したメールアドレスに本登録用のURLが送られてきますのでそちらをクリックして本登録を済ませて下さい。クリックするだけで終わりますよ。
こんな感じの画面に移ります。そして次に、表示されるhtmlとcssのコードをコピーしてペーストします。
設定方法
うちではhtmlをサイドバーの最後に表示させるようにしました。
コピーする場所はこちら
「デザイン」→「カスタマイズ」→「サイドバー」で、モジュールを追加をクリック
次にここ
そうするとこちらが開きます。
そうすると、先ほどのシールが表示されます。当サイトではオススメのフォント、と表示させました。「みんなの文字」を使う上で必要な事なので規約を守るために必ずやりましょう。
CSSをコピペする場所
まずはコピペ場所を開きます。
場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。
ここをクリックして
これにペーストをするんですが、
うちでは
body { font-family: minmoji; }
こちらを使用せずに
@font-face { font-family: minmoji; 中略 } html, body { font-family: minmoji, YuGothic, 'Yu Gothic', 游ゴシック体, 游ゴシック, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Helvetica, Verdana; }
こんな感じにまとめました。
以上ですよ。
登録もすぐに出来ますし、比較的簡単に設定できるので、ブログの雰囲気を変えてみたいと思われる方は試されてみては如何でしょう？
今後、ブログのカスタマイズの話だけはちょっと別なブログにしようかなと考えています。ではでは、また次の記事で
CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。
