ゼロからはじめる WordPressワードプレス初心者のメモホーム使い方プラグインテーマウェブ関連レンタルサーバーの選び方aboutホームテーマWordPressのフォントを変更して、見映えをよくする。2012/8/21 2015/9/21 テーマ前回の記事、「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 PGothic”, sans-serif」をコピーして、そのまま貼り付けてください。「」の中身だけをコピーして、最後に「;」を付け加えるのを忘れないようにしてください。 すると、Twenty Elevenの文章の部分の見映えが激変します。（クリックして見比べてみてください）※ デフォルトのフォント指定※ フォント指定を変更した結果このようにして、使っているテーマのスタイルシート（style.css）に記述されている、いくつものフォント指定を一つ一つ探しながら変更していくと、サイト全体で使われているフォントを、見映えの良いものに変更することができます。「Firebug」のようなWeb 開発ツールを使うとより便利ですが、ちょっと前の私のような、スタイルシートがわからない方にはかえって混乱のもとかもしれないので、使っているテーマのスタイルシート（style.css）から、フォント指定を総当たりで見つけて、変更していくのがよいかもしれません。 ただ、重要なことが1つ。この方法って、使っているテーマをアップデートしてしまうと、変更がすべて元に戻ってしまいます。一番良いのは、WordPressの子テーマ機能を使って、スタイルシートを書き換えること。こうすれば、テーマをアップデートしても、変更したスタイルシートの部分が元に戻ることはありません。また、テーマによっては、カスタマイズしたスタイルシートを書き込める機能があるものもあるので、そういうテーマを使えば、やはり変更したスタイルシートの部分が元に戻ることはありません。当サイトで現在利用している「Simple Catch」テーマにも、スタイルシートの書き込み機能があります。最後にもう1つ重要なことがあります。それは、フォントの指定を変えると、文章や見出し、またはサイト名やサイトのサブタイトルの大きさがすごく変わってしまうことがあります。その場合、スタイルシートでフォントサイズも変更する必要があります。 できれば、パソコンにXAMPPをインストールして、パソコン内でWordPressサイトを立ち上げて、そこで実験してから、実際のWordPressサイトのスタイルシートを変更すると安全かもしれません。私もWordPressを使いはじめたばかりのころ、スタイルシートをいじり過ぎて、サイトがぐちゃぐちゃになり、どうしても元に戻らなかった時、XAMPPにインストールしていたWordPressの同じテーマのスタイルシートをコピーして、事なきを得たことがあります。スタイルシートの変更は、少しずつ着実に行なってみてください。end. あぶらあげ関連記事WordPressの子テーマ（child theme）機能を使ってみる。当サイト「ゼロからはじめるWordPress」も、サイト開設から1年が経過しましたので。 今年（2012）からちょこちょこと、WordPe…記事を読むGMOのWordPress国産テーマ、「kotenhanagara」。前々回の記事「WordPress無料おすすめ国産テーマ、「sonoichi」。」に続き。 今回もWordPress公式テーマサイト「The…記事を読むWordPressおすすめ無料テーマ、「P2」。当サイトの過去記事、「スターサーバープラスに実験用WordPressサイトを設置。」でも書きましたが。 当サイトでも利用している、スタード…記事を読むWordPress無料おすすめ国産テーマ、「sonoichi」。当サイトで使っている（2013年11月時点）WordPressテーマ、「Simple Catch」も、使いはじめてからもう1年が過ぎました。…記事を読む使用テーマをSimplicityに変更。Simplicityをテーマに採用 ほとんど放置サイトと化している当サイトですが(笑)、お盆明け（2015年）に久しぶりに、使用テーマを変…記事を読むWordPressおすすめ無料テーマ、「Simple Catch」。WordPressのテキストウィジェットよりも便利なウィジェットを提供してくれるプラグイン、「Custom Post Widget」。コメントWordPressのフォントを変更して、見映えをよくする。 | Twenty Eleven/Twelve with Webmix Site より:10 5月, 2013[…] http://wp.8jimeyo.info/theme/font-family/ […]返信脱サラせどらーかず＠47歳からの挑戦！ より:18 9月, 2013[…] ちなみに、参考にしたサイトはこれ ↓ http://wp.8jimeyo.info/theme/font-family/ […]返信WordPressテーマ「Stinger3」のフォントを変更する方法 | dmgadget より:1 2月, 2014[…] 成したらブログで表示を確認してください。簡単に変更する事が出来ました。今回ゼロからはじめる WordPressで紹介されているフォントを使用させて頂きました。読んで頂いてありがとう […]返信WordPressテーマ「Stinger3」のフォントを変更する方法 | dmgadget(ディーエムガジェット) より:1 2月, 2014[…] 成したらブログで表示を確認してください。簡単に変更する事が出来ました。今回ゼロからはじめる WordPressで紹介されているフォントを使用させて頂きました。読んで頂いてありがとう […]返信作ったwebサイトをWindowsで見るとフォントのクソさに愕然とする | Vanship Trip より:8 3月, 2014[…] WordPressのフォントを変更して、見映えをよくする。」 […]返信フォント変更 | PolyPenta より:12 3月, 2014[…] ゼロからはじめるWordPressというブログの「WordPressのフォントを変更して、見映えをよくする。」という記事を参考に、当ブログのフォントをすべて変更しました. […]返信フォント変更 | Gumu-Lab. より:7 4月, 2014[…] ここを参考にフォントをメイリオに変更。 […]返信知ればできる！読みやすいブログにする11のテクニック | アフィリエイトまとめブログ より:9 5月, 2014[…] WordPress でのフォントの変更方法が書いてある。 使っているテンプレートで変更場所も変わるんだけど その探し方も載ってるよ。 WordPressのフォントを変更して、見映えをよくする。 […]返信匿名 より:9 5月, 2014ありがとうございます！ どうやって変更するかやっと分かりました。長らくフォント変えたいと思っていたのですが、 どうやって変更するかやっと分かりました。返信あぶらあげ より:3 6月, 2014匿名様、お返事が遅れて申し訳ありません。コメントどうもありがとうございました。当サイトの記事が少しはお役に立てたようで幸いです。返信フォント指定 | 黒猫ラボ より:31 5月, 2014[…] フォント指定 […]返信フォントの変更 | 友人のホームページの作成日記 より:14 6月, 2014[…] WordPressのフォントを変更して、見映えをよくする。 […]返信Azure Webサイトに独自ドメインでWordPressたててみた | へぉれす より:3 11月, 2014[…] WordPressのフォントを変更して、見映えをよくする。 WordPressの管理画面（ダッシュボード）のフォントを変更する方法 […]返信Azure WebSiteに独自ドメインでWordPressたててみた | へぉれす より:5 11月, 2014[…] WordPressのフォントを変更して、見映えをよくする。 WordPressの管理画面（ダッシュボード）のフォントを変更する方法 […]返信