フォントの設定
WordPressでの記事等のフォントは、「style.css」でfont-familyを変更して設定する。ここでは、その設定方法について以下にメモ。
Font-Familyについて
フォントを変更するにあたり、どのfont-familyをどのように設定しようかと考えたのだが、こちらのサイトに、著名サイトのfont-familyが紹介されていた。その中に、自分もよく利用する「クックパッド」で採用しているfont-familyが紹介されていたので、こちらを利用することにした。
「クックパッド」のfont-family
font-family: ‘Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;
Twenty Sixteenでのフォントの設定
「style.css」での主な部分のフォントの設定箇所は以下のとおり。
記事のフォント
/**
* 3.0 – Typography
*/
body,
button,
input,
select,
textarea {
color: #1a1a1a;
/* font-family: Merriweather, Georgia, serif; 記事のフォント変更 */
font-family: ‘Hiragino Kaku Gothic Pro’, ‘ヒラギノ角ゴ Pro W3’, Meiryo, メイリオ, Osaka, ‘MS PGothic’, arial, helvetica, sans-serif;
引用(blockquote)のフォント
/**
* 3.0 – Typography
*/
・・・
blockquote {
border: 0 solid #1a1a1a;
border-left-width: 4px;
color: #686868;
/* font-size: 19px; 引用のフォント */
/* font-size: 1.1875rem; */
font-size: 12px;
font-size: 0.75rem
タイトルのフォント
サイトのタイトルのフォントは、14.0 – Media Queries の中で設定。
/**
* 14.1 – >= 710px
*/
・・・
.site-title {
/* font-size: 28px; サイトのタイトル*/
/* font-size: 1.25rem; */
font-size: 32px;
font-size: 2rem
line-height: 1.25;
}
「前/次」(post-navigation)の記事タイトルのフォント
「前/次」の記事タイトルのフォントも、前項と同じく14.0 – Media Queries の中で設定。
.post-navigation .post-title {
/* font-size: 28px; 「前/次」の記事タイトルのフォント */
/* font-size: 1.75rem; */
font-size: 25px;
font-size: 1.5625rem
line-height: 1.25;
}
記事のタイトル
記事のタイトルは、「.entry-title」で設定。
/**
* 14.4 – >= 985px
*/
・・・
.entry-title {
/* font-size: 40px; 記事のタイトル*/
/* font-size: 2.5rem; */
font-size: 25px;
font-size: 1.5625rem;
line-height: 1.225;
margin-bottom: 1.05em;
}
以上で、主な部分のフォントやフォントサイズについて変更することができた。
スポンサーリンク