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: "メイリオ", Meiryo,
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Lucida Grande",
"Lucida Sans Unicode", Arial, Verdana, 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; /* 文字の大きさ */ 
}

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

affinger
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. ZERO

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

  2. しげぞう 投稿作成者

    ZERO様

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

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

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

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

  3. ZERO

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

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

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

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

    宜しくお願いします。

  4. 乃風

    しげぞうさんへ

    あのやり方でよかったのですね。やはりそうでしたかぁ~・・・。ワードプレス上で、今回、記事を1から書き直したとき、サクサク動くし、それに、公開時に表示される時の文字の大きさも、全て統一されたのを見て、「これでゴーサインがでるんじゃないか・・・」と思っておりました。スマートフォンでも上手く表示されていると分かり、安心しました。ありがとうございました。設定が終わり、やっと記事が書ける状態になり、今、なんかすごくうれしいです。今後もよろしくお願いします。

  5. 乃風

    しげぞうさんへ

    こんにちは。いつもお世話になっております。順番通りに記事を書いているのに、ちっともパーマリンクのIDが連番にならない・・・という件、とても納得しました。「記事タイトル名+ID番号」で設定しているので、そのID番号は、本来、その都度私が自分でつけていくものなのかなぁ~・・・とか、あれこれと思いをめぐらすこともありました。そうじゃないということも、今回のお返事で分かり、とにかく安心しました。ありがとうございました。

  6. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。今確認してみましたが、スマートフォンでも上手く表示されてますので、そのやり方でOKだと思います。そのまま記事を増やして見てください。

  7. しげぞう 投稿作成者

    乃風様

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