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

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

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

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

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

WordPressのフォントを変更する

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

文字カスタマイズ-1

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

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

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

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

行間の調整

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

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

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

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

最終更新日:2018/02/21

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

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

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

  1. サマー

    しげぞうさま

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

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

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

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

  2. しげぞう 投稿作成者

    しおん様

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

  3. しおん

    しげぞう様

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