Wordpressであんずもじ

こんにちは!

みなさんは「あんずもじ」はご存知ですか?

手書き風のフォントとして使っている方も多いのではないでしょうか。

さて、今回のエントリーでは、このあんずもじをWordPressで使う方法を紹介させていただこうと思います♪

けっこう簡単に実装できると思うので、ぜひぜひチャレンジしてみてくださいね!

あんずもじをダウンロードしよう!

まずあんずもじフォントの作者である京風子(きょうこ)さんの公式ページから、あんずもじフォントのデータをダウンロードさせていただきましょう!

URLはこちらです。

http://www8.plala.or.jp/p_dolce/font2.html

こんなにすばらしいフォントを無料で提供してくださっていて、本当にありがたいですよね!

京風子さんありがとうございますっ!!!

ちなみにダウンロードするときは「◆あんずもじをダウンロード◆」の文字をクリックしてください。

あんずもじのダウンロード

落としてきたデータは分かりやすいデスクトップなどに置いておくと良いと思います♪

あんずもじのデータをアップしよう!

ダウンロードしてきたあんずもじのデータを展開すると、中に「APJapanesefont.ttf」という名前のファイルがあります。

あんずもじのデータ

このファイルをFTPソフトなどを使って、サーバーにアップロードしましょう!

上げる場所はこちらです。

wp-content ⇒ themes ⇒ ○○○○○(※使っているテーマの名前)

この中身はテンプレートによって違うのですが、僕はこの中に「fonts」という名前のフォルダーを作りました。

FTPの画面

この中には先ほどの「APJapanesefont.ttf」を入れてしまいましょう!

では次に、cssで実際にサイトのフォントを変更してみましょう!

CSSで設定しよう!

ファイルをアップするとあとはcssで設定するだけです!

外観の中にある「カスタマイズ」を開きましょう。

カスタマイズ

この中の追加CSSを開きます。

追加CSS

ここにこちらのコードを張り付けましょう!

僕はテーマのフォルダーの中に「fonts」という名前をフォルダーを作ったので、「fonts/APJapanesefont.ttf」という記載にしていますが、フォルダー名を別の名前にしているという方はここを変更してください。

サンプルのソースはbodyに対してフォントを指定しているので、サイト全体の文字が変わると思います。

ページの中の一部だけ変えたいという方はbodyのところを適宜変更してつかってくださいね!

あんずもじのWordpress

おお!なんか手書き風のやさしい感じになりました♪

女性が運営されているブログなんかはこの手書きフォントが言い具合になるんじゃないですかね?

今回はあんずもじフォントを使いましたが、他のフォントデータでも同じ方法で使えると思います!

サイトでフォントデータを使う時の注意点

あんずもじフォントは作者の京風子さんのご厚意で無料でサイトで使わせていただく事ができます。

しかし、中にはサイトの表示文字として使えないフォントなどもありますので、使いたいフォントがあるという場合はまずは利用規約を読んで、本当に使って良いのかどうかを確認してから使うようにしてくださいね!

それでは、最後までお読みいただいてありがとうございました(o^∇^o)ノ

この記事が気に入ったら
いいね ! しよう

Twitter で