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

WordPressでフォントや文字大きさ、行間をカスタマイズ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: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', sans-serif;
font-size:15.5px;
font-weight: 500;
color:#403b3b;
}

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

また、途中に「color: #403b3b;」「font-size: 15.5px;」というのがありますが、ここでテキストの文字色と大きさを変更する事ができます。

行間の調整

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

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

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

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

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

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

コメント

  1. しげぞう より:

    乃風様

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

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

  2. しげぞう より:

    乃風様

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

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

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

  3. しげぞう より:

    >青りんご様

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

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

  4. 青りんご より:

    poko様

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

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

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

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

  5. poko より:

    >編集長様

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

  6. 編集長 より:

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

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