Webフォント「ニコモジ・プラス」を使ってブログを自分好みに染めてみた!WordPress テーマ「Simplicity」をカスタマイズ!

スポンサーリンク
WordPress

つい先日、ブログに Web フォントなるものを実装してみました(゚∀゚)!

 

どうでしょう?

この丸っこいフォント(´ω`)

サイトニコモジ・プラス

丸文字「ニコモジ・プラス」(漢字付きフォント)ダウンロード|丸文字フォント(ニコ文字)配布所
ニコニコ動画(GINZA)ロゴを非公式にフリーフ...

niconico のフォントをデザインベースに、ひらがな、カタカナ、アルファベット、数字、漢字までフォント化されています。

コレはいいね(゚∀゚)!

可読性を考慮して、現在は「JKゴシックM」を使っています。
JKゴシックM - 無料で使える日本語フォント投稿サイト|フォントフリー
M+をもとに作られた女子高生風ゴシックフォントです。JKゴシックのMediumウェイトバージョンです。より安定感が加わりタイトルロゴにも使えます。文字によりインパクトをもたせたいときにはこちらのウェイトがぴったりです!可愛い系や女性らしいデザイン、ポ

 

ブログって、ちょっと色変えたり、ちょっとデザイン変えたりするだけでも、テンションがモリモリ上がるんですよねヽ(`Д´)ノウヒョー

テンション上がると、記事もサクサク書けるってもんだぜぃ!

設定方法も、ちょー簡単ですよ(`ω´)

 

ということで、私の使っている WordPress テーマ「Simplicity」で、Web フォントを導入する手順をご紹介します(>Д<)ゝ”

スポンサーリンク

そもそも Web フォントって何?

Web フォントとは、サーバー側にフォントデータを配置しておいて、ブラウザ側でそのフォントデータを表示させる技術です。

ブラウザに依存しないので、どのブラウザで誰が見ても同じ様に見えるんですよ(゚∀゚)

 

この Web フォントの技術自体は、5年くらい前からあるみたいですね。

Web システムの開発を10年ほどしていましたが、全然知らなかったですよ(; ・`д・´)

 

デザイン業界では、割とポピュラーなのかもしれませんね(`・ω・´)シランケド

日本語 Web フォントをダウンロード

まずは、使いたい Web フォントを探しましょう。

Google 先生に聞いて見たら、すぐに見つかりました(>Д<)ゝ”

 

有料のフォントもありますが、無料で使えるものもあります。

例えば、冒頭でご紹介した「ニコモジ・プラス」も無料です。

サイトフォントフリー

フォントフリー - 無料の日本語フリーフォント投稿サイト
日本語フリーフォント/ダウンロードなら「フォントフリー」。漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明朝やゴシック体、手書きなどのカテゴリーから探すことができます。

気に入ったフォントを見つけて、ダウンロードしてみましょう(´ω`)

スポンサーリンク

フォントファイルのアップロード

ダウンロードしたファイルを展開し、サーバーにアップロードします。

子テーマを使用している場合は、子テーマの配下にアップロードします。

■配置例

/wp-content/themes/simplicity2-child/webfonts/nicomoji-plus

webfonts フォルダは新規に作成しました。

style.css にスタイルを書く

子テーマの style.css に、下記の様にコードを追記します。


@font-face{
font-family: ‘nico’;
src:url(‘webfonts/nicomoji-plus/nicomoji-plus_1.11.ttf’);
}

body {
font-family: ‘nico’;
}


@font-face でフォントファイルを指定し、font-family で読み込めばおしまいです。

Web フォントのメリット・デメリット

ブログやサイトのイメージに合わせて、簡単にフォントを変えることができる Web フォントですが、メリットだけではなくデメリットもあります。

メリット

Web フォントを使うメリットは、パソコンでもスマホでも同じフォントで表示されることです。

 

テーマに合った文字を使うことで、文字も装飾の一部になりますね(`・ω・´)

他にもテーブルが崩れたり、変なところで改行されたり、意図していない表示を防ぐことができるんです(゚∀゚)

デメリット

デメリットは、ページ表示が遅くなることです(´Д`;)

 

フォントファイルを読み込むので、その分表示するのが遅くなります。

さらに、日本語の場合は「ひらがな」「カタカナ」「漢字」など、「アルファベット」に比べると数が多いんです(ノ∀`)ヒー

 

表示が遅いと離脱率にも影響してくるので、注意が必要です。

フォントによっては、読みにくくなることもあります。

まとめ

ブログでもサイトでも、読みやすいことは非常に大切です。

 

ですが、デザインにも拘りたいところですよね(´∀`)

「ニコモジ・プラス」は丸っこくて、とっても好きな書体なんですが、アルファベットが横に長く読みづらいかもしれませんね(ノ∀`)タハー

 

アフィサイトなどでは、「デザインに拘るよりも読みやすいフォント」を使った方がいいかもしれません(>Д<)ゝ”

 

また、Google では「Google Fonts」というサービスを提供しています。

サイトGoogle Fonts

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

Google のサーバーにあるフォントデータを使うので、かなり表示速度が早いようです。

デザインが豊富にあるので、こちらもおすすめですよ(`・ω・´)

ぱきち
|Д´)ノ 》 ジャ、マタ

 

コメント