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

    >青りんご様

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

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

  2. 青りんご より:

    poko様

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

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

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

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

  3. poko より:

    >編集長様

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

  4. 編集長 より:

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

  5. poko より:

    >静花様

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

  6. 静花 より:

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

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

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

    表示されてしまいます。

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

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

  7. poko より:

    >静花様

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

  8. 静花 より:

    pokoさま

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

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

  9. poko より:

    >静花様

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

  10. 静花 より:

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

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