WordPressのフォントを変更して、見映えをよくする。

前回の記事、「WordPressおすすめ無料テーマ、「Simple Catch」。」でも書きましたが。

このお盆(2012年)に、約1年ぶりくらいで、当サイトで利用しているWordPressテーマを変更しました。

当サイトで利用しているWordPressテーマは、これで3つめになりますが、すべて、本家WordPress公式サイトの「Free Themes Directory」からダウンロードした、無料テーマばかりです。

現在も、空いた時間を見つけては、今回採用したテーマのカスタマイズをしている最中なのですが。

テーマをカスタマイズするのは久しぶりなので、WordPressを使いはじめたころ、HTMLもスタイルシート(CSS)もろくに知らず、カスタマイズに悪戦苦闘していたのを思い出しました。

まあ、今も悪戦苦闘していますが、以前より少しは慣れてきたようにも思います。

で、今回取り上げたいのは、WordPressのフォントのこと。

初めてレンタルサーバーを借りて、自分でWordPressをインストールして、ブウラザーから自分のWordPressサイトを初めて見た時、「わぁっ! フォント汚い!」と思いませんでしたか?

フォントのせいで、何だかものすごくうさんくさそうなサイトに見えたりします。

これって実は、多くの方が利用しているWordPressの無料テーマは、海外の方が開発したものなので、フォントの種類の指定が日本向きではないということに原因があります。

なので、使っているWordPressテーマのスタイルシートのフォント指定を、日本語フォントに変更すれば、ご自分のWordPressサイトの見映えも、見違えるようにきれいになります。

具体的な手順は、以下の通りです。

WordPressの管理画面左サイドのナビゲーションメニューの「外観」にある、「テーマ編集」という子メニューをクリックします。


出てきた「テーマの編集」画面の右サイドにある「テンプレート」のずらりと並んだファイルの中から、「style.css」を見つけてクリックします。


すると、「テーマの編集 使っているテーマの名前:スタイルシート(style.css)」という画面が出てきます。


で、ここからがキモなのですが、スタイルシート(style.css)に記述されている、フォントの種類を指定してある部分を、地道に探していきます。

フォントの指定は、「font: 」、または「font-family: 」という部分で指定されています。

目視で探しているとものすごく面倒なので、ブラウザーの検索機能を使って、検索窓に「font」と入力して、探してみます。


ここからは、たぶん多くの方が使っているに違いないWordPressデフォルトのテーマ、「Twenty Eleven」のスタイルシート(style.css)を例にしてみますが、Twenty Elevenの場合、「font」が128個見つかりました。

検索窓の「∨」をクリックしながら、フォントが指定してある部分を探します。

慣れないと難しいとは思いますが、最初に見つかったのは、「body」タグの以下の部分。


「15px」の次にある、「”Helvetica Neue”, Helvetica, Arial, sans-serif」という部分がフォントの種類を指定した部分。

この部分を削除して、当サイトで利用しているフォント指定、「メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif」をコピーして、そのまま貼り付けてください。

「」の中身だけをコピーして、最後に「;」を付け加えるのを忘れないようにしてください。

すると、Twenty Elevenの文章の部分の見映えが激変します。(クリックして見比べてみてください)

※ デフォルトのフォント指定


※ フォント指定を変更した結果


このようにして、使っているテーマのスタイルシート(style.css)に記述されている、いくつものフォント指定を一つ一つ探しながら変更していくと、サイト全体で使われているフォントを、見映えの良いものに変更することができます。

Firebug」のようなWeb 開発ツールを使うとより便利ですが、ちょっと前の私のような、スタイルシートがわからない方にはかえって混乱のもとかもしれないので、使っているテーマのスタイルシート(style.css)から、フォント指定を総当たりで見つけて、変更していくのがよいかもしれません。

ただ、重要なことが1つ。

この方法って、使っているテーマをアップデートしてしまうと、変更がすべて元に戻ってしまいます。

一番良いのは、WordPressの子テーマ機能を使って、スタイルシートを書き換えること。

こうすれば、テーマをアップデートしても、変更したスタイルシートの部分が元に戻ることはありません。

また、テーマによっては、カスタマイズしたスタイルシートを書き込める機能があるものもあるので、そういうテーマを使えば、やはり変更したスタイルシートの部分が元に戻ることはありません。

当サイトで現在利用している「Simple Catch」テーマにも、スタイルシートの書き込み機能があります。


最後にもう1つ重要なことがあります。

それは、フォントの指定を変えると、文章や見出し、またはサイト名やサイトのサブタイトルの大きさがすごく変わってしまうことがあります。

その場合、スタイルシートでフォントサイズも変更する必要があります。

できれば、パソコンにXAMPPをインストールして、パソコン内でWordPressサイトを立ち上げて、そこで実験してから、実際のWordPressサイトのスタイルシートを変更すると安全かもしれません。

私もWordPressを使いはじめたばかりのころ、スタイルシートをいじり過ぎて、サイトがぐちゃぐちゃになり、どうしても元に戻らなかった時、XAMPPにインストールしていたWordPressの同じテーマのスタイルシートをコピーして、事なきを得たことがあります。

スタイルシートの変更は、少しずつ着実に行なってみてください。

end.

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメント

  1. […] 成したらブログで表示を確認してください。簡単に変更する事が出来ました。今回ゼロからはじめる WordPressで紹介されているフォントを使用させて頂きました。読んで頂いてありがとう […]

  2. […] 成したらブログで表示を確認してください。簡単に変更する事が出来ました。今回ゼロからはじめる WordPressで紹介されているフォントを使用させて頂きました。読んで頂いてありがとう […]

  3. […] WordPressのフォントを変更して、見映えをよくする。」 […]

  4. […] ゼロからはじめるWordPressというブログの「WordPressのフォントを変更して、見映えをよくする。」という記事を参考に、当ブログのフォントをすべて変更しました. […]

  5. […] ここを参考にフォントをメイリオに変更。 […]

  6. […] WordPress でのフォントの変更方法が書いてある。 使っているテンプレートで変更場所も変わるんだけど その探し方も載ってるよ。 WordPressのフォントを変更して、見映えをよくする。 […]

  7. 匿名 より:

    ありがとうございます! どうやって変更するかやっと分かりました。
    長らくフォント変えたいと思っていたのですが、 どうやって変更するかやっと分かりました。

    • あぶらあげ より:

      匿名様、お返事が遅れて申し訳ありません。
      コメントどうもありがとうございました。

      当サイトの記事が少しはお役に立てたようで幸いです。

  8. […] WordPressのフォントを変更して、見映えをよくする。 […]

  9. […] WordPressのフォントを変更して、見映えをよくする。 WordPressの管理画面(ダッシュボード)のフォントを変更する方法 […]

  10. […] WordPressのフォントを変更して、見映えをよくする。 WordPressの管理画面(ダッシュボード)のフォントを変更する方法 […]

  11. […] 参考にしたのは「WordPressのフォントを変更して、見映えをよくする。 | ゼロからはじめる WordPress」です。というより、フォントは、そのまま適用しました。つまり「メイリオ, Meiryo, Osaka […]

  12. […] WordPressのフォントを変更して、見映えをよくする。 […]

  13. […] WordPressのフォントを変更して、見映えをよくする。 (ゼロからはじめるWordPress) […]

  14. […] 参考にさせていただいた記事はこちら。 ありがとうございます。 せっかくなので、自分でも備忘録としてメモをこさえてみます。 […]

  15. […] WordPressの子テーマ(child theme)機能を使ってみる。 WordPressのフォントを変更して、見映えをよくする。 […]

  16. […] こことここを参考に。 […]

  17. […] WordPressのフォントを変更して、見映えをよくする。 […]

  18. […] WordPressのフォントを変更して、見映えをよくする。 […]

  19. […] はいはい。スタイルシート(style.css)を返れば良いんですね。こちら参照。 http://wp.8jimeyo.info/theme/font-family/ […]

  20. […] 参考にしたのはこのサイトです! WordPressのフォントを変更して、見映えをよくする。※ゼロからはじめる WordPressより転載 […]

  21. […] s細かくカスタムできる模様?? WordPressのフォントを変更して、見映えをよくする。 […]

コメントをどうぞ

メールアドレスが公開されることはありません。