【ブログ運営】wordpressのブログタイトルのフォントをttfファイル等を使って変更する

ブログ運営
スポンサーリンク

こんにちは。大輔です。

wordpress初心者の私が運営するブログタイトルのフォントを変更しました。デフォルトの状態だと、全然オシャレじゃないんです。

本当はヘッダー用の画像を使ったりしたかったのですが、できるだけ簡単に見た目の変更をしたかったので、とりあえずタイトルのフォントだけを編集しました。しかしそれもすんなりいかず、結構時間がかかってしまったので備忘録的な感じで書いていきたいと思います。

私が使いたかったフォントはttfファイル等で配布されていて、それをどのようにすればフォントを変更できるのかわかりませんでした。cssやサーバー知識など、ほとんどないので、フォントの変更に手間取ってしまったのでこの記事では私と同じような人のために「ブログタイトルのフォントを変更する方法」を共有したいと思います。フォント変更の方針としては

  1. 使いたいフォントをttfファイルでダウンロードする。
  2. ダウンロードしたttfファイルのままではファイルサイズが大きすぎるので使いたい文字だけのファイルに変換する。
  3. ファイルをサーバーに保存する。
  4. cssでタイトルのフォントを変更する。

以上の手順でサイトのタイトルを変更することができました。それでは具体的な方法を説明していきたいと思います。

使いたいフォントをttfファイルでダウンロードする

ネットで「フォント フリー」などで検索すると無料で使用できるフォントをダウンロードできるサイトが見つかります。気に入ったフォントが見つかったらttfファイルでダウンロードしましょう。フォントの利用条件には十分注意し、無料で使用できるか、利用の連絡が必要かなどは確認しておきましょう。

ダウンロードしたファイルを使いたい文字だけのファイルにする

ダウンロードしたままのファイルではサイズが大きすぎるので、そのまま使用してしまうとwebページの表示が遅くなるなどの問題がおこってしまいます。私のようにブログのタイトルだけフォントを変えたいなどの場合は、使う文字だけのフォントファイルを使えばこの問題を解決することができます。タイトルだけでなく本文でもフォントを変更したい場合は、ファイルをそのまま使えば良いので、サイズを小さくする必要はありません。

具体的にhttp://opentype.jp/subsetfontmk.htmからサブセットフォントメーカをインストールします。2017年1月現在の最新版は3.0.0ですがmacでそれを使おうとするとウィンドウの下が隠れてしまい、使うことができませんでした。なので私は2.0.0を使いました。もし原因などわかる方がいれば教えていただきたいと思います。使い方は調べればすぐにわかるので割愛します。

ttfファイルをサーバーに配置する

使いたいフォントのファイルをサーバーに配置します。サーバーにファイルを追加するにはFTPクライアントソフトを使って行います。私はFilezillaを使ってサーバーにファイルを追加しました。

配置する場所に関してはどこでも良いのですが、私の場合は使用しているテーマの下に「font」というフォルダを作り、その下にttfファイルを置きました。具体的なパスは以下の通りです。

wp/wp-content/themes/simplicity2-child/font

style.cssファイルからフォントを読み込む

タイトルを変更するためにテーマのcssファイルを編集します。wordpressダッシュボードの【外観】->【テーマの編集】からcssファイルを編集することができます。そこに以下のコードを追加します。

urlでフォントファイルの場所を指定しています。自分のサーバーの状況に合わせて適宜変更してください。最後にcssの保存を行うとフォントが適用されています。

まとめ

非常に恥ずかしいのですがcss編集を行うときにセミコロンが抜けていただけでフォントが適用されないということがありました。それだけのことで1時間ほど悩んだのですが、なんとかサイトタイトルのフォントを変更することができました。この記事に関して質問や間違っているところなどございましたらコメントやtwitterなどで教えていただけると助かります。

以上。ブログタイトルのフォントの変更方法でした。

 

コメント

タイトルとURLをコピーしました