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:游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', 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件のコメントがあります。

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

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

CAPTCHA


  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;
    }