今回はWordPressの基本的なカスタマイズの１つ、文字の表示に関するカスタマイズをしていきます。フォントの変更やフォントサイズ（文字の大きさ）や文字の色も変更できます。
特に初期状態だとフォントが美しくないので最初にここのカスタマイズをしておきましょう。サンプルとしてTwenty Twelveを使います。
前回子テーマを作成して「スタイルシート (style.css)」というのを作成したと思います。これを使ってフォントの変更からやってみましょう。
WordPressのフォントを変更する
WordPressの管理画面から「外観」⇒「テーマの編集」をクリックして子テーマのスタイルシートを開きます。右上の部分で前回作成した「Child」が選択されている事を確認してスタイルシート (style.css)を選択します。
前回子テーマのスタイルシートはこのように記述しましたよね。
/*
Theme Name: Child
Template: twentytwelve
*/
@import url('../twentytwelve/style.css');
この下にこれからどんどん変更したい部分を追加して行く事になります。この記述の下にこのように記述してみて下さい。
/* フォントと文字の大きさ、色 */
body{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size:15.5px;
font-weight: 500;
color:#403b3b;
}
ここではフォントを変更しています。ずらずらと沢山並んでいますが、これはWindowsやMacなどのOSの環境によって使えるフォントが違うのでこのように沢山並ぶ事になります。これをまずはこのままコピーして自分のスタイルシートに貼り付けて下さい。フォントが気に入らない場合は検索で探してみて、書き換えてもOK。
また、途中に「color: #403b3b;」「font-size: 15.5px;」というのがありますが、ここでテキストの文字色と大きさを変更する事ができます。
行間の調整
行間、つまりテキストの１行目と２行目の間の間隔を調整してみましょう。本文中の行間を変更する場合はこのように記述します。
/* 本文中の行間 */
.entry-content p {line-height: 1.75;}
ここの数字を変更する事で行間の調整ができます。ここの数字が文字の大きさで設定した数字よりも小さく設定してしまうと文字が重なってしまうので、設定した文字の大きさよりも大きな数字を記入します。サイドバーの部分の行間や文字の大きさは次のように変更できます。
/* サイドバーの行間と文字の大きさ */
.widget-area .widget li {
line-height: 1.75; /* 行間 */
font-size: 14px; /* 文字の大きさ */
}
ここの数字を変更してみて確認してみて下さい。
以上WordPressでフォントや文字大きさ、行間をカスタマイズでした。
コメント
しげぞうさま
おはようございます。
またスタイルシートでつまづいています。
文字の大きさを変えたいのですが、変わりません。。フォントは今のままでいいと思っていて、こちらのページの
color: #333; /* 文字色 */
font-size: 14px; /* 文字の大きさ */
}何回か消したり足したり、して見たのですがダメでした。
あと、続きを読むを太字に変えたくて、font-weight:bold;も先日教えていただいたものの下に貼り付けて見たのですが、何も変わりませんでした。
何度もすみません！宜しくお願いします。
しおん様
コメントありがとうございます。以下私のフォント設定です。游ゴシックというのを使ってますがそれだとちょっと薄い感じだったので、若干フォントの色と太さを変えてます。
[css]
body{
font-family:"Yu Gothic", YuGothic,’ヒラギノ角ゴシック Pro’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘ＭＳ Ｐゴシック’, ‘MS PGothic’, sans-serif;
font-size:15px;
font-weight: 500;
color:#403b3b;
}
[/css]
しげぞう様
こんばんは。いつも参考にしています。
フォントについてお聞きしたいのですが、しげぞうさんは何のフォントを使っているんですか？
すごくきれいだったので、、、、、
差支えなければ教えて頂きたいです。
よろしくお願いします。
めぐ様
コメントありがとうございます。CSSでフォント変更の記述が必要になります。基本的にカスタマイズする場合には子テーマへの記述が必要になります。子テーマ作成していない場合には先に子テーマを作成する事をおすすめします。
また子テーマを作成されていてもCSSに記述しても反映されないって場合もあります。
CSSって下に書いてあるもの（後に書いてあるのもの）が優先的に反映されるようになってますので変更する記述はCSSの一番下に追加するのが良いと思います。どうしても反映されない場合にはその変更の記述を残したままの状態でサイトのURLを教えてもらえると助かります。
コメント公開時にはURLは削除しますのでもしよかったらお願いします(^^)
しげぞうさま
はじめまして。超初心者です。
このサイトのおかげで、何とかドメイン、サーバー、ワードプレスのインストールまでできました。とても丁寧に書かれてあり、大変助かっております。
今、ワードプレスのカスタマイズで足ふみしています。
フォントを変更したいのですが、何をどうやっても変化せず、
もうわけがわからないので、フォントファミリーと見えるところには全部、自分の替えたいフォントに書き換えてみるも、何も変更されてません。
ページの更新、履歴の消去などもやってみましたがお手上げです。
CSS、ずっと触れたくない領域でしたが、やはり訳が分からずめげそうです。。。
ぜひご教示いただきたいです。よろしくお願いします。
わかりました。まずは、とりあえずおすすめされた「ドットインストール」を見ておこうと思います。
何から始めようか困っていたので、助かりました。ありがとうございます。
ZERO様
コメントありがとうございます。このブログのコメントではブログのURLを書いてあるコメントなどもあるため、１つ１つ承認してから公開していますので、若干表示まで時間がかかる場合があります。すみません。
HTMLやCSSの記述の事だと思いますが、私自身は独学で数年前までは全く意味が分かりませんでした。知人のホームページ作成を依頼されて、全く知識のないままに引き受けたのが勉強のきっかけです。実際にホームページなどを１から作ってみると大まかな部分は掴めるとは思うのですが、結構な気力と根性が必要かもしれません。
前述したように私の場合は知人のホームページ作成がスタートになっていて、どうしても勉強が必要でした。後に引けない状態でなければ私も続かなかったと思います。最近は無料のHTML、CSSの学習動画などを無料で配信されている「ドットインストール」のようなサイトもありますので、こういうサイトからスタートしてみるのも良いと思います。
ある程度初歩的な部分がさえ分かれば後はネット検索で色々調べて応用していくような感じでOKと思います。スムーズに進む事はほとんどなく、反映されない原因を探したりする時間の方が多くなる場合も多いですが、これらも１つ１つ勉強と思ってますし、現在はこのようにコメントへの回答することが私にとっての勉強になっています。
(コメントが反映されていなかったので、もう一度同じ内容のコメントを書きました。被っていたらすみません。)
この記事ではスタイルシートに英数字記号などを用いて「構文」（←という呼び方でよいのでしょうか）を記述していますが、このような「構文」はやはり自力で書けるようになるべきだろう、と思っています。
そこで質問ですが、
最初は、専門の本やサイトなどでプログラミングなどの知識を網羅的にしっかりと学習するべきなのでしょうか。
もしそうなのだとしたら、おすすめの書籍やサイトはありますか。
それとも、
サイトを運営する上で不自由しない程度に、必要最低限覚えておくべき「様々な構文を記述する上での共通の法則」のようなものはあるのでしょうか。（もちろん、文字の大きさや色の指定の記述法則は、プログラミングの知識が全くない自分でもこの記事を読んで理解できましたが…。）
宜しくお願いします。
乃風様
返信ありがとうございます。パーマリンクのIDですが、これはWordPressで記事を書いていると途中で自動で保存されていきます。途中の状態で保存されるので、間違って電源が消えた時などに復元する事ができるのですが、その自動保存の関係にIDが割り振られるようになってますので、下書きの状態の記事にそれぞれIDが使われます。なので、連番にならないのは普通です。心配されなくてもOKです。
乃風様
コメントありがとうございます。乃風様の言われるようにスマートフォンでは区切りの位置が変わってきますので、改行の部分も変わってきます。今確認したのですが、これは記事の文字を一回一回大きくするような処理をされているのではないかと思います。これは強調タグが毎回入ってますので、あまりよろしくない気がします。太字が良いのであればスタイルシートで基準のフォントサイズを大きくしておく方が良いと思います。
強調タグが毎回使われているため、改行がバラバラになってますので、まずは基準となる文字の大きさなどをスタイルシートで設定し、できるだけ段落ごとに改行するようなスタイルが良いと思います。WordPressの場合は改行タグなどが自動整形されますのでそれで一度試して毎回タグを入れなくてもいいようにしておけばOKかと思います。
乃風様
コメントありがとうございます。多分サイトの説明文の部分だと思うのですが、これはスタイルシートにコードを追加で変更できます。一応サンプルですが、文字の大きさとカラーを変更するサンプルです。
h2.site-description { font-size: 15px; color: #000; }これで一度試して見てください。
＞青りんご様
コメントありがとうございます。「/*」と「*/」の間に囲まれた部分はコメントとして扱われます（影響はありません）ので、このままコピペしても大丈夫です。ただ、「/*」と「*/」を付けずにコメントを書いてしまうと上手く反映されませんので、コメント部分には「/*」と「*/」で囲んで自分的なメモも書く事ができます。
それと新しいコードは改行しなくても大丈夫ですが、後から修正したい場合などに該当場所が見つけにくいという事もあるかと思いますので、改行したり、前述したようなコメントを入れたりすると分かりやすくなると思います。
poko様
初心者の質問にも大変丁寧にお答えくださり、ありがとうございます。
一般設定が終わり、いよいよフォント等を変更していく段階まで
たどり着けました。
poko様のコードをそのままコピペしようと思いますが、
オレンジ色の表記（例えば、/* 本文中の行間 */ など）も
一緒にコピペをしてもよいのでしょうか。
また、新しいコードをどんどん下に連ねていく、とのことですが、
一つのコードから新しいコードを加えるときは、
一行改行が必要でしょうか？
ご教示いただけますとありがたいです。
初心者過ぎて申し訳ありませんがよろしくお願いします。
＞編集長様
コメントありがとうございます。WordPressは初心者にとって難易度高いですよね、私も何度も失敗してログインできなくなったり、設定の戻し方が分からないとかで何度もデータベースごとWordPressを削除したりしていた時期もありました（笑）。少しでも参考になっているのであれば非常に嬉しい事です。わざわざコメントありがとうございました。
助かりました＾＾
子テーマを作って有効化したのはいいものの、
スタイルシートへどんなコードを入力すればフォント変更できるのかを
延々と探しておりました。
そんな折、貴サイトに辿りつき、まるまるコードを流用させて頂きましたｗ
ありがとうございます＾＾
＞静花様
コメントありがとうございます。最初にロリポップに子テーマのファイルを作成してその中に子テーマのCSSだけを追加してあれば子テーマは選択できるはずです。まずは「ファイル」と「フォルダ」作成を間違えていないか確認してみて下さい。それから子テーマにCSSの「ファイル」を正しく記述して追加してあるかを確認して見る事をおすすめします。それができていれば「テーマの選択」で子テーマを選択できると思います。もしよかったらコレまでの作業内容を簡単でいいので教えて頂けるとありがたいです。
xサ-バ-ではサポ-トできないと断られました。
それならばとロリポップを契約して、
ドキドメ!のサイトどおりに始めましたが、
子テ-マを選択すると
“そのファイルは編集できません”と
表示されてしまいます。
ここで行き止まり状態です。
なんで??と今、困っています。
＞静花様
返信ありがとうございます。私自身もWordPress始めるまで仕組みもHTMLもCSSもほとんど無知な状態だったのですが、やってみると意外にできるもんです。もちろん時間はかかったのですがこうしてWordPressの使い方やカスタマイズの基本的な部分は記事にする事ができるようになりました。まだまだ勉強する事が山ほどありますが（笑）Xサーバーでのやり方が分かればそれ自体も記事の１つになると思いますし、他にも同じように挫折してる方もいるかも知れませんので需要があると思います。今回は参考になる回答ができずすみませんでした。私もこれからまた勉強していきたいと思います。
pokoさま
お返事ありがとうございます。
そのようにやってみます。
サイト作成は苦手なので、
ブログアフィリエイトで、
(日記や商品紹介ではなく、エッセイブログみたいなものですが)
がんばってみたいと思っているのです。
＞静花様
コメントありがとうございます。私はXサーバーを利用した事がないのですが（解説できなくてすみません）、カスタマイズのやり方自体は同じなので要は子テーマを作るという部分ですよね。それならば新しくサーバーを契約しなくてもXサーバーのサポートを利用してみてはどうでしょうか？Xサーバーの場合はサポートも充実していたと思いますので、一度聞いてみるとあっさり解決するかも知れません。それからサーバーを変更するのもドメインを移したりサーバーを変更するのが結構難しそうなので（私も未経験です）そのままXサーバーでやる方が良いと思います。
はじめてのWPに手こずっていた私は、
さきほど貴サイトをみつけて
勉強させてもらえる!と喜びましたが、
子テ-マのスタイルシ-トを軸に書いていらっしゃるので、
Xサ-バ-を使っている私は子テ-マをどうしようか?と
ここで挫折。
新たに独自ドメインでロリポップを契約して作ろうかと思っています。