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. しげぞう より:

    しおん様

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

    [css]
    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;
    }
    [/css]

  2. しおん より:

    しげぞう様

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

  3. しげぞう より:

    めぐ様

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

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

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

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

  4. めぐ より:

    しげぞうさま

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

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

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

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

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

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

  5. ZERO より:

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

  6. しげぞう より:

    ZERO様

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

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

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

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

  7. ZERO より:

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

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

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

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

    宜しくお願いします。

  8. しげぞう より:

    乃風様

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

  9. しげぞう より:

    乃風様

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

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

  10. しげぞう より:

    乃風様

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

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

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

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