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でフォントや文字大きさ、行間をカスタマイズでした。

コメント

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