WordPressでフォントや文字大きさ、行間をカスタマイズ

今回はWordPressの基本的なカスタマイズの1つ、文字の表示に関するカスタマイズをしていきます。フォントの変更やフォントサイズ(文字の大きさ)や文字の色も変更できます。

特に初期状態だとフォントが美しくないので最初にここのカスタマイズをしておきましょう。サンプルとしてTwenty Twelveを使います。

前回子テーマを作成して「スタイルシート (style.css)」というのを作成したと思います。これを使ってフォントの変更からやってみましょう。

スポンサーリンク

WordPressのフォントを変更する

WordPressの管理画面から「外観」⇒「テーマの編集」をクリックして子テーマのスタイルシートを開きます。右上の部分で前回作成した「Child」が選択されている事を確認してスタイルシート (style.css)を選択します。

文字カスタマイズ-1

前回子テーマのスタイルシートはこのように記述しましたよね。

/*
Theme Name: Child
Template: twentytwelve
*/

@import url('../twentytwelve/style.css');

この下にこれからどんどん変更したい部分を追加して行く事になります。この記述の下にこのように記述してみて下さい。

/* フォントと文字の大きさ、色 */
body {
font-family: "メイリオ", Meiryo, 
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande", 
"Lucida Sans Unicode", Arial, Verdana, sans-serif;
text-rendering: optimizeLegibility;
color: #333;  /* 文字色 */
font-size: 14px; /* 文字の大きさ */
}

body.custom-font-enabled {
font-family: "メイリオ", Meiryo,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande",
"Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

ここではフォントを変更しています。ずらずらと沢山並んでいますが、これはWindowsやMacなどのOSの環境によって使えるフォントが違うのでこのように沢山並ぶ事になります。これをまずはこのままコピーして自分のスタイルシートに貼り付けて下さい。フォントが気に入らない場合は検索で探してみて、書き換えてもいいですよ。

また、途中に「color: #333;」「font-size: 14px;」というのがありますが、ここでテキストの文字色と大きさを変更する事ができます。私のは「#333」で黒っぽいグレーの文字色にしてます。

行間の調整

行間、つまりテキストの1行目と2行目の間の間隔を調整してみましょう。本文中の行間を変更する場合はこのように記述します。

/* 本文中の行間 */
.entry-content p {line-height: 28px;}

ここの数字を変更する事で行間の調整ができます。ここの数字が文字の大きさで設定した数字よりも小さく設定してしまうと文字が重なってしまうので、設定した文字の大きさよりも大きな数字を記入します。サイドバーの部分の行間や文字の大きさは次のように変更できます。

/* サイドバーの行間と文字の大きさ */
.widget-area .widget li {
line-height: 28px; /* 行間 */
font-size: 14px; /* 文字の大きさ */ 
}

ここの数字を変更してみて確認してみて下さい。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

WordPressでフォントや文字大きさ、行間をカスタマイズ”に32件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. サマー

    しげぞうさま

    おはようございます。
    またスタイルシートでつまづいています。
    文字の大きさを変えたいのですが、変わりません。。フォントは今のままでいいと思っていて、こちらのページの

    color: #333; /* 文字色 */
    font-size: 14px; /* 文字の大きさ */
    }何回か消したり足したり、して見たのですがダメでした。

    あと、続きを読むを太字に変えたくて、font-weight:bold;も先日教えていただいたものの下に貼り付けて見たのですが、何も変わりませんでした。

    何度もすみません!宜しくお願いします。

  2. しげぞう 投稿作成者

    しおん様

    コメントありがとうございます。以下私のフォント設定です。游ゴシックというのを使ってますがそれだとちょっと薄い感じだったので、若干フォントの色と太さを変えてます。

    body{
    font-family:"Yu Gothic", YuGothic,'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
    font-size:15px;
    font-weight: 500;
    color:#403b3b;
    }
    
  3. しおん

    しげぞう様

    こんばんは。いつも参考にしています。
    フォントについてお聞きしたいのですが、しげぞうさんは何のフォントを使っているんですか?
    すごくきれいだったので、、、、、
    差支えなければ教えて頂きたいです。
    よろしくお願いします。

  4. しげぞう 投稿作成者

    めぐ様

    コメントありがとうございます。CSSでフォント変更の記述が必要になります。基本的にカスタマイズする場合には子テーマへの記述が必要になります。子テーマ作成していない場合には先に子テーマを作成する事をおすすめします。

    また子テーマを作成されていてもCSSに記述しても反映されないって場合もあります。

    CSSって下に書いてあるもの(後に書いてあるのもの)が優先的に反映されるようになってますので変更する記述はCSSの一番下に追加するのが良いと思います。どうしても反映されない場合にはその変更の記述を残したままの状態でサイトのURLを教えてもらえると助かります。

    コメント公開時にはURLは削除しますのでもしよかったらお願いします(^^)

  5. めぐ

    しげぞうさま

    はじめまして。超初心者です。
    このサイトのおかげで、何とかドメイン、サーバー、ワードプレスのインストールまでできました。とても丁寧に書かれてあり、大変助かっております。

    今、ワードプレスのカスタマイズで足ふみしています。
    フォントを変更したいのですが、何をどうやっても変化せず、

    もうわけがわからないので、フォントファミリーと見えるところには全部、自分の替えたいフォントに書き換えてみるも、何も変更されてません。

    ページの更新、履歴の消去などもやってみましたがお手上げです。

    CSS、ずっと触れたくない領域でしたが、やはり訳が分からずめげそうです。。。

    ぜひご教示いただきたいです。よろしくお願いします。

  6. ZERO

    わかりました。まずは、とりあえずおすすめされた「ドットインストール」を見ておこうと思います。
    何から始めようか困っていたので、助かりました。ありがとうございます。

  7. しげぞう 投稿作成者

    ZERO様

    コメントありがとうございます。このブログのコメントではブログのURLを書いてあるコメントなどもあるため、1つ1つ承認してから公開していますので、若干表示まで時間がかかる場合があります。すみません。

    HTMLやCSSの記述の事だと思いますが、私自身は独学で数年前までは全く意味が分かりませんでした。知人のホームページ作成を依頼されて、全く知識のないままに引き受けたのが勉強のきっかけです。実際にホームページなどを1から作ってみると大まかな部分は掴めるとは思うのですが、結構な気力と根性が必要かもしれません。

    前述したように私の場合は知人のホームページ作成がスタートになっていて、どうしても勉強が必要でした。後に引けない状態でなければ私も続かなかったと思います。最近は無料のHTML、CSSの学習動画などを無料で配信されている「ドットインストール」のようなサイトもありますので、こういうサイトからスタートしてみるのも良いと思います。

    ある程度初歩的な部分がさえ分かれば後はネット検索で色々調べて応用していくような感じでOKと思います。スムーズに進む事はほとんどなく、反映されない原因を探したりする時間の方が多くなる場合も多いですが、これらも1つ1つ勉強と思ってますし、現在はこのようにコメントへの回答することが私にとっての勉強になっています。

  8. ZERO

    (コメントが反映されていなかったので、もう一度同じ内容のコメントを書きました。被っていたらすみません。)

    この記事ではスタイルシートに英数字記号などを用いて「構文」(←という呼び方でよいのでしょうか)を記述していますが、このような「構文」はやはり自力で書けるようになるべきだろう、と思っています。

    そこで質問ですが、
    最初は、専門の本やサイトなどでプログラミングなどの知識を網羅的にしっかりと学習するべきなのでしょうか。
    もしそうなのだとしたら、おすすめの書籍やサイトはありますか。

    それとも、
    サイトを運営する上で不自由しない程度に、必要最低限覚えておくべき「様々な構文を記述する上での共通の法則」のようなものはあるのでしょうか。(もちろん、文字の大きさや色の指定の記述法則は、プログラミングの知識が全くない自分でもこの記事を読んで理解できましたが…。)

    宜しくお願いします。

  9. 乃風

    しげぞうさんへ

    あのやり方でよかったのですね。やはりそうでしたかぁ~・・・。ワードプレス上で、今回、記事を1から書き直したとき、サクサク動くし、それに、公開時に表示される時の文字の大きさも、全て統一されたのを見て、「これでゴーサインがでるんじゃないか・・・」と思っておりました。スマートフォンでも上手く表示されていると分かり、安心しました。ありがとうございました。設定が終わり、やっと記事が書ける状態になり、今、なんかすごくうれしいです。今後もよろしくお願いします。

  10. 乃風

    しげぞうさんへ

    こんにちは。いつもお世話になっております。順番通りに記事を書いているのに、ちっともパーマリンクのIDが連番にならない・・・という件、とても納得しました。「記事タイトル名+ID番号」で設定しているので、そのID番号は、本来、その都度私が自分でつけていくものなのかなぁ~・・・とか、あれこれと思いをめぐらすこともありました。そうじゃないということも、今回のお返事で分かり、とにかく安心しました。ありがとうございました。

  11. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。今確認してみましたが、スマートフォンでも上手く表示されてますので、そのやり方でOKだと思います。そのまま記事を増やして見てください。

  12. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。パーマリンクのIDですが、これはWordPressで記事を書いていると途中で自動で保存されていきます。途中の状態で保存されるので、間違って電源が消えた時などに復元する事ができるのですが、その自動保存の関係にIDが割り振られるようになってますので、下書きの状態の記事にそれぞれIDが使われます。なので、連番にならないのは普通です。心配されなくてもOKです。

  13. 乃風

    しげぞう様

    こんばんは。いつもお世話になっております。

    改行の件、色々とやってみたのですが、うまくいかなかったので、これまで書いてきたブログの記事は、思い切って全部消しました。そして、ワードプレスの新規追加画面上から1から書いてみました。とにかく、段落ごとに改行するということも、念頭に入れながらやってみたところ、画面がサクサク動きました。これでうまく反映されたかどうか、スマフォの方で確認していただけないでしょうか。よろしくお願いします。

    追伸・・・
    アドセンス審査前に気づいてよかったと思いました。

  14. 乃風

    しげぞう様

    こんばんは。いつもありがとうございます。

    やはりダメでしたかぁ~・・・。そんな気がしていました。記事の文字を1回1回大きくする
    処理ですか? なんだろう・・・。あ、だから、記事のコメントを書くとき、動きが妙に遅かったのですね。

    心当りといえば、自分のWPの新規追加画面で記事のコメントを書くと、なぜか動きがすごく
    遅くて、使いづらかったんですね。しかも、ちょっと記事のコメントを書くと、すぐに
    自動更新されてしまい、それで落ち着かなかったこともあり、自分のメーラーで
    下書きをして、それをコピペしてブログの記事を書きました。

    スタイルシートの設定を変えれば、あの記事が反映されて、全部消去して最初から書き直さなくても大丈夫になるのでしょうか?

    段落ごとに改行ですね。分かりました。とにかくそれでもう一度やってみます。スタイルシートももう一度確認してみます。

    それとですね、しげぞうさん・・・。同じカテゴリーの中で、順次記事を書いてアップしてきたのですが、パーマリンクのID番号が、連番にならず、結構、その番号が飛んでいるのですが、それはそれでいいのでしょうか? 

  15. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。乃風様の言われるようにスマートフォンでは区切りの位置が変わってきますので、改行の部分も変わってきます。今確認したのですが、これは記事の文字を一回一回大きくするような処理をされているのではないかと思います。これは強調タグが毎回入ってますので、あまりよろしくない気がします。太字が良いのであればスタイルシートで基準のフォントサイズを大きくしておく方が良いと思います。

    強調タグが毎回使われているため、改行がバラバラになってますので、まずは基準となる文字の大きさなどをスタイルシートで設定し、できるだけ段落ごとに改行するようなスタイルが良いと思います。WordPressの場合は改行タグなどが自動整形されますのでそれで一度試して毎回タグを入れなくてもいいようにしておけばOKかと思います。

  16. 乃風

    しげぞう様

    こんばんは。スマホとかの携帯を持っていないので、教えてください。
    自分のURLの記事を書き始めて、今さっき、ふと気づいたのですが。
    パソコンとスマフォとかの携帯では、一行に表示される文字数って違うんですよね?

    今回、私、記事を書く文字を少し大きくしたのですが、
    私のパソコン画面では、一行の終わりに区切りのいい言葉がきたら、それで改行を
    押してしまっているので、なんとか見栄えよく画面に収まっていますが、
    でも、それらをスマフォなどでみた場合、例えば、1行に1文字書かれているだけで、
    改行されてしまったり、句読点ではなく、文字と文字の間にスペースが入って
    表示されてしまったりとか、そういう風に変に表示されることはないのでしょうか?

  17. 乃風

    しげぞう様

    あ、そうです、そうです、サイトの説明文のことです。スタイルシートにコードを追加するのですね。早速、そのまま追加してみたのですが、それが、サイズも色もぴったりだったんです。もう、大喜びですよぉ~~~~~~! ありがとうございました。色は、最初の時のグレーでも、あれはあれでよかったのですが、でも、今回の黒も、なんかいい感じなので、これでいきます。

    余談ですが、この間、レーズンのケーキを作ったとコメントしましたが、厳密にいうと、デコレーションケーキの形をしたマフィンのことです。その辺で売っているお腹もちのするおも~~~いマフィンです。今、それにこってます。あ、今度、自分のサイトでそのレシピを公開してみましょうかね。なんか楽しみです。

  18. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。多分サイトの説明文の部分だと思うのですが、これはスタイルシートにコードを追加で変更できます。一応サンプルですが、文字の大きさとカラーを変更するサンプルです。

    h2.site-description {
        font-size: 15px;
        color: #000;
    }

    これで一度試して見てください。

  19. 乃風

    しげぞうさんへ

    また乃風です。いつもお世話になっております。

    私のトップページ上にある一番上のメインタイトルの、すぐ直ぐ下にあるサブタイトルの文字を、もう少し大きくしたいんです。既にスタイルシート上で、変更してあるのですが、反映されてないまま、記事を書き始めたものの、でも可能なら、もうちょっと大きくしたいなぁ~・・・って思うようになりました。スタイルシート上での変更になるのでしょうか? それとも、別のphp上になるのでしょうか?

  20. 乃風

    いつも正確で、適格な判断とアドバイスを本当にありがとうございます。

    コメントの文字は、特に指定していなければ、記事の文字や行間と同じになるのですね。そうだったのですね。昨日、実は試しに読者側からのコメントを書いてみたのですが、なんか小さい感じがしたので、「コメント欄の文字」と、「サブタイトルの文字」だけは変更されてないんだわ、きっと・・・と思ってしまったんです。同じになるのなら、変更の必要がないと私もそう思うので、とりあえずこのままでいってみます。

  21. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。コメントの文字は特に指定していなければ記事の文字や行間と同じになると思います。もちろん個別に変更する事はできますが、これは特に必要はないかなと思います。どうしてもコメント欄だけ文字を大きくしたいという事であれば再度コメント下さい。調べて見てみます。

  22. 乃風

    いつもお世話になっております。

    URL上の表示文字や記事を書く文字と行間も少し大きくしました。読者さんが私のURLのコメント欄でコメントを残す時の、その文字の大きさをもう少し大きく変更したいのですが、どこのどのシートでどのように変更したらいいのでしょうか?

    今回、試しに文字と行間を初期の設定よりもそれぞれ4pxずつ大きくしたのですが、これだけ大きくしてしまうと、スマートフォンとかで見る時に何か影響がでてしまいますか?

  23. しげぞう 投稿作成者

    >青りんご様

    コメントありがとうございます。「/*」と「*/」の間に囲まれた部分はコメントとして扱われます(影響はありません)ので、このままコピペしても大丈夫です。ただ、「/*」と「*/」を付けずにコメントを書いてしまうと上手く反映されませんので、コメント部分には「/*」と「*/」で囲んで自分的なメモも書く事ができます。

    それと新しいコードは改行しなくても大丈夫ですが、後から修正したい場合などに該当場所が見つけにくいという事もあるかと思いますので、改行したり、前述したようなコメントを入れたりすると分かりやすくなると思います。

  24. 青りんご

    poko様

    初心者の質問にも大変丁寧にお答えくださり、ありがとうございます。
    一般設定が終わり、いよいよフォント等を変更していく段階まで
    たどり着けました。

    poko様のコードをそのままコピペしようと思いますが、
    オレンジ色の表記(例えば、/* 本文中の行間 */ など)も
    一緒にコピペをしてもよいのでしょうか。

    また、新しいコードをどんどん下に連ねていく、とのことですが、
    一つのコードから新しいコードを加えるときは、
    一行改行が必要でしょうか?

    ご教示いただけますとありがたいです。
    初心者過ぎて申し訳ありませんがよろしくお願いします。

  25. poko 投稿作成者

    >編集長様

    コメントありがとうございます。WordPressは初心者にとって難易度高いですよね、私も何度も失敗してログインできなくなったり、設定の戻し方が分からないとかで何度もデータベースごとWordPressを削除したりしていた時期もありました(笑)。少しでも参考になっているのであれば非常に嬉しい事です。わざわざコメントありがとうございました。

  26. 編集長

    助かりました^^
    子テーマを作って有効化したのはいいものの、
    スタイルシートへどんなコードを入力すればフォント変更できるのかを
    延々と探しておりました。
    そんな折、貴サイトに辿りつき、まるまるコードを流用させて頂きましたw
    ありがとうございます^^

  27. poko 投稿作成者

    >静花様

    コメントありがとうございます。最初にロリポップに子テーマのファイルを作成してその中に子テーマのCSSだけを追加してあれば子テーマは選択できるはずです。まずは「ファイル」と「フォルダ」作成を間違えていないか確認してみて下さい。それから子テーマにCSSの「ファイル」を正しく記述して追加してあるかを確認して見る事をおすすめします。それができていれば「テーマの選択」で子テーマを選択できると思います。もしよかったらコレまでの作業内容を簡単でいいので教えて頂けるとありがたいです。

  28. 静花

    xサ-バ-ではサポ-トできないと断られました。

    それならばとロリポップを契約して、
    ドキドメ!のサイトどおりに始めましたが、
    子テ-マを選択すると

    “そのファイルは編集できません”と

    表示されてしまいます。

    ここで行き止まり状態です。

    なんで??と今、困っています。

  29. poko 投稿作成者

    >静花様

    返信ありがとうございます。私自身もWordPress始めるまで仕組みもHTMLもCSSもほとんど無知な状態だったのですが、やってみると意外にできるもんです。もちろん時間はかかったのですがこうしてWordPressの使い方やカスタマイズの基本的な部分は記事にする事ができるようになりました。まだまだ勉強する事が山ほどありますが(笑)Xサーバーでのやり方が分かればそれ自体も記事の1つになると思いますし、他にも同じように挫折してる方もいるかも知れませんので需要があると思います。今回は参考になる回答ができずすみませんでした。私もこれからまた勉強していきたいと思います。

  30. 静花

    pokoさま

    お返事ありがとうございます。
    そのようにやってみます。

    サイト作成は苦手なので、
    ブログアフィリエイトで、
    (日記や商品紹介ではなく、エッセイブログみたいなものですが)
    がんばってみたいと思っているのです。

  31. poko 投稿作成者

    >静花様

    コメントありがとうございます。私はXサーバーを利用した事がないのですが(解説できなくてすみません)、カスタマイズのやり方自体は同じなので要は子テーマを作るという部分ですよね。それならば新しくサーバーを契約しなくてもXサーバーのサポートを利用してみてはどうでしょうか?Xサーバーの場合はサポートも充実していたと思いますので、一度聞いてみるとあっさり解決するかも知れません。それからサーバーを変更するのもドメインを移したりサーバーを変更するのが結構難しそうなので(私も未経験です)そのままXサーバーでやる方が良いと思います。

  32. 静花

    はじめてのWPに手こずっていた私は、
    さきほど貴サイトをみつけて
    勉強させてもらえる!と喜びましたが、
    子テ-マのスタイルシ-トを軸に書いていらっしゃるので、
    Xサ-バ-を使っている私は子テ-マをどうしようか?と
    ここで挫折。
    新たに独自ドメインでロリポップを契約して作ろうかと思っています。