webフォントを使用してwordpressのフォントを変更する方法

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb

こんにちは。gamuです。

今回はwebフォントを使ってwordpressのフォントを変更するやり方を紹介します。

ブログの見やすさを向上したいならフォントって凄く重要だと思います。

使用するwebフォント

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb-2

今回使用するwebフォントは「UCDAフォント みんなの文字」です。

みんなの文字とはとても見やすいフォントとして有名です。

・小さい文字でも見やすい

・文字が密集していても見やすい

・低解像度に強い

使用方法(その①:サイトに会員登録)

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb-3

フォントを利用するためには会員登録をする必要があります。

記入する項目は下記のものがあります。

・会社名→任意入力。個人利用は「個人」と入力

・部署1→任意入力。

・部署2→任意入力。

・役職→任意入力。

・氏名→必須入力。

・フリガナ→必須入力。

・E-mail→必須入力。会員登録後メールが届きます。

・利用URL→必須入力。利用するブログやサイトのURLを記載します。

CSSを編集する

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb-5

会員登録が完了するとメールや会員登録完了の画面にCSSのコードが表示されます。

そのコードをコピーしてCSSを編集します。

編集するコードは2か所あります。

font-faceの内容を追加

font-faceで使用するフォントを指定します。

追加したソースコードはこちら。

※「tekuko.xyz」という部分が自分の掲載するサイトのURLになります。

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb-6

font-familyの内容を変更

bodyタグに記載されているfont-familyの内容を変更します。

下も画像ではコメントアウト(/**/で囲まれている)しているコードは既存のコードです。

今回追加したソースコードはこちらです。

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb-7

この時点で自分のサイトのフォントが変わっていると思います。

一度確認してみましょう。

認定シールをサイト内に掲載

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb-8

フォントを使用したサイトには認定シールをサイト内に掲載する必要があります。

このサイトはちゃんと許可されてフォントを使用していますよというのを証明する必要があるからです。

掲載方法は簡単です。

登録した時にHTMLのソースコードが送られてくるので、

そのコードをサイト内の見える箇所に貼り付けます。

HTMLのソースはこちらです。

※「tekuko.xyz」という部分が自分の掲載するサイトのURLになります。

このソースコードをウィジェットを使ってヘッダーやフッダーに貼り付けます。

%e7%84%a1%e9%a1%8c%e3%81%ae%e5%9b%b3%e5%bd%a2%e6%8f%8f%e7%94%bb-9

これで設定は終了です。

フォントひとつでサイトの見栄えは大きく変わりますので、是非導入してみてください。

webフォントは今注目されていて「google fonts」や「TypeSquare」というサービスがあります。

「google fonts」は日本語に対応されているフォントが少ないのが残念です。

今後、またフォントが追加されていくと思います。

今回はここまで!ではではー。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする