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

シェアする

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

どうでしょう?

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

サイトニコモジ・プラス

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

可読性を考慮して、現在は別のフォントを使っています。

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

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

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

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

ということで、私の使っている 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

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

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

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

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