追加CSSの使い方
用意されているフォントではきれいにwebサイトが構築できないとお悩みの皆様、このたび導入したテーマでは”カスタムCSS”にてフォント変更することができます。フォント調整を実施して頂き、より良いwebサイト構築のヒントにして下さい。
現在のテクニカルサイトの”追加CSS”の設定情報
参考情報(外部サイト)：
◆シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル50
http://www.nxworld.net/tips/50-css-heading-styling.html
◆総称ファミリ名分類のフォント名一覧
https://w3g.jp/sample/css/font-family
各サイトでお試しされる際は記述方法をご参考下さい。
a,p,h1,h2,h3,h4,h5,h6,strong,html,body {font-family:"Meiryo UI" }
.entry-content h1,h2,h3,h4,h5{line-height:0.5em;}
.entry-content a,p,h2,h3,td{font-size: 115%;}
h1{
padding: .25em 0 .5em .75em;
border-left: 6px solid #09f;
border-bottom: 1px solid #ccc;
}
.entry-content h1,h2,h3{
padding: .8em 0 .5em .75em;
border-left: 6px solid #0b0;
border-bottom: 1px solid #ccc;
}
※フォントサイズは各投稿・固定ページでも指定可能ですが、全体投稿・固定ページに反映する場合に有効です。
※”.entry-content”とは下記の範囲を表しております。各テーマごとで確認してみて下さい。
※GoogleChrome より 確認サイト表示>右クリック>要素を調査 より表示確認することができます。お試しください。
追加CSS(旧カスタムCSS)によるフォント変更方法
WordPress4.7にバージョンアップすることで、新機能として”追加CSS”機能が追加されました。
2016/12/27現在、適用した全てのテーマにおいて”追加CSS”機能を利用できます。
“追加CSS”にコードを記述することで、デフォルトフォントからMeiryoUIのように任意のフォントを導入することができます。これより操作方法・挿入コードの説明します。
“外観”→”カスタマイズ”→”追加CSS”
の順でCSSの追記編集ができます。
カスタムCSS挿入コード例
p,h1,h2,h3,h4,h5,h6,li,a,strong,body {font-family:"Meiryo UI"}Font−familyのベストな書き方 2015年版(外部サイト)：
http://sole-color-blog.com/blog/design/246/
※好みのフォントを選択し、コード赤文字部分の変更をしてみて下さい。
テーマ：Sparklingの場合のみ
 |
 |
| 図1 | 図2 |
1. 図1の通り、“外観(カスタマイズ)”→”Sparkling設定”→”その他”→”カスタムCSS”へ移動する。
2. 図2のように、“カスタムCSS挿入コード”を挿入して”保存”を行う。