こんにちは! るーしーです。
今回は「WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法」についてです。
また、フォントサイズだけだとバランスが悪くなるので、行間と文字間も変更します。
皆さんは
と思った事はありませんか？
私も思いました。
局所的なフォントサイズ変更ならエディタで簡単に出来ますがデフォルトのフォントサイズを変えるのはCSSを操作した方が良いと思います。
というあなた！！
そんなあなたに見てもらいたい記事です。
しかも今回はPC表示だけ変更しスマホの表示は一切変更しません。
やり方は色々とありますが【初心者向け】で簡単にデフォルトフォントサイズ、行間、文字間を変更するCSSの操作方法をご紹介します。
ココに注意
実行前にCSSファイル(使用テーマのstyle.css)のバックアップを必ず行ってください。
また、レイアウトが崩れてしまった等の結果についても自己責任でお願い致します。
CSSとは？
CSSとはHTMLの見た目(タグ等)を装飾するものです。
という認識で大丈夫です。
HTMLは文章をタグというもので囲みます。
このタグ(等)を装飾するのがCSSです。
しかし、タグは皆さんが見ている画面には(通常)表示されません。
あくまで構造的な意味合いを持つだけなのです。
少し例文を見てみましょう。
【例文1】
この文章にもタグが入っています。
このソースを見てみると
全ての文章がpと言うタグで囲まれています。
「/」は閉じタグと言われ、「/」無しのタグで始めて「/」付きのタグで閉じるのが基本。
【例文2】
表示が変わりましたね。
このソースを見てみると
ということは、h4のHTMLタグが付いた文字だけ表示が変わっていたんですね。
というように、タグ(等)へ装飾の設定をするのがCSSの機能です。
その為、全く同じ文章、HTMLのタグでもCSSの定義が異なれば皆さんの画面に表示されるデザインは異なります。
WordPress(ワードプレス)のテーマはまさにそれの最たる例ですね。
どうやってデフォルトのフォントサイズを変えるの？
今回はCSSでpタグに囲まれたフォントのサイズ、行間、文字間を変える設定をします。
そうする事でpタグに囲まれたフォントは全てサイズ、行間、文字間が変わります(例外あり)。
段落として定義されている部分全てpタグが入っている(はず)なのですがどうなるかは実物を見た方が早いと思います。
デフォルトの状態と設定変更後の状態を見比べてみましょう。
デフォルトフォントの表示
こ、これは……
文字が気持ち小さいうえに文字間が詰まっていて見辛い……
続いてフォント設定変更後の表示を見てみましょう。
フォント設定変更後の表示
こ、これは……
とても見やすくなったと思いませんか？
そして今回はPC表示のみ変更しスマホ表示は変更しません。
PCでサイトをご欄になる方はスマホで見る方と比べて長く画面を見ていると思います。
その為少しでも見やすくする事はユーザーにとってメリットがあります。
デフォルトのフォントサイズ設定変更手順
前提
ココに注意
- 画面表示全てのフォントが変わる訳では無い
- 全ての方が私と同じ表示になるとは限りません
理由は使っているWordPress(ワードプレス)のテーマによってCSSの定義が異なるからです。
表示が思うように変わらない場合は初期設定に戻してください。
現在使用しているテーマのstyle.cssの内容をバックアップする
１：WordPress(ワードプレス)の管理画面にログイン
URL
http://(ドメイン)/wp-admin
２：「外観」→「テーマの編集」をクリック
３：「編集するテーマを選択」に現在使用しているテーマを選択
４：「スタイルシート(style.css)」を選択
５：「選択したファイルの内容」をコピー
枠内を一度クリックし、
step
1「コントロール + A」で全選択
step
2「コントロール + C」でコピー
６：デスクトップにテキストファイルを作成する
ファイル名は中身が何かわかればいいので、「20180201バックアップしたスタイルシート.txt」等で大丈夫です。
「.txt」は拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。
カスケーディングというのは滝のように継承されていくという意味があるのですがそれはまた次の機会に！
７：作成したテキストファイルを開く
８：開いたテキストファイルに手順５でコピーした内容を貼り付け
９：ファイルを保存して閉じる
これで今回作業をする直前の状態であるstyle.cssファイル内容をバックアップできました。
以後の操作でレイアウトが崩れてしまった場合は、現在使用しているテーマのstyle.cssファイルへ今回作成したバックアップファイルの内容をコピペすれば復旧しますので大事に保存してください。
スポンサーリンク
現在使用しているテーマのstyle.cssを編集する
１：WordPress(ワードプレス)の管理画面にログイン
URL
http://(ドメイン)/wp-admin
２：「外観」→「テーマの編集」をクリック
３：「編集するテーマを選択」に現在使用しているテーマを選択
４：「スタイルシート(style.css)」を選択
５：「選択したファイルの内容」の最下行に下記の記述を貼り付け
|
1 2 3 4 5 6 7 8 9 |
/* 2018/02/01追記 */ /* 992px以上の画面でフォントサイズ・行間・文字間指定 */ @media (min-width: 992px) { p { font-size:18px; line-height:1.5em; letter-spacing:0.8pt; } } |
この記述の意味としては、
- 文字サイズ：18px
- 行間：1.5em
- 文字間：0.8pt
という意味になります。
好みに応じて数値は変えてください。
６：エラー表示がない事を確認
エラー表示がある場合は何かしら入力に不備があるので修正する必要があります。
修正不能になった場合は保存せずに画面表示を変えて変更を破棄しましょう。
再度開きなおせば修正前の状態になっています。
７：「ファイルを更新」をクリック
「ファイルの編集に成功しました。」と表示されれば完了です。
８：保存完了したstyle.cssのテキスト全文コピー
保存完了したstyle.cssの枠内を一度クリックし、
step
1「コントロール + A」で全選択
step
2「コントロール + C」でコピー
９：デスクトップにテキストファイルを作成する
ファイル名は「現在この内容を使っている」という事が分かるように、「【20180201使用中】スタイルシート.txt」という具合にしましょう。
「.txt」は拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。
１０：作成したテキストファイルを開く
１１：開いたテキストファイルに先手順８でコピーした内容を貼り付け
１２：ファイルを保存して閉じる
このファイルが現在使用しているstyle.cssのバックアップです。
テーマを最新バージョンに更新すると追記した分が全て無くなるのでバージョンアップしたら再度追記しましょう。
フォントサイズ、行間、文字間が変わったか確認
念のためトップページ、固定ページ、投稿の3種類確認しましょう。
フォントサイズが変わっていれば作業完了です。
お疲れ様でした！！
スポンサーリンク
まとめ
いかがでしたか？
たかが文字サイズ、行間、文字間ですが少し変わっただけで印象はガラリと変わりました。
このページをスマホで表示している方はPCでも見てみてください。
とても読みやすいフォントサイズ、行間、文字間になっています。
PCのみ設定してスマホの表示には干渉しない所がポイントですね。
やり方は沢山ありますが、あれこれ試行錯誤した上でこの手順が最も手軽に実行できる手段だと判断しました。
商用のしっかりしたサイトでやるべきではない手段なのですが個人サイトにつき許して……という感じです。
なので今回の方法もやるやらないは皆さんの判断にお任せします。※結果も自己責任でお願いします。
とはいってもこれからもどんどん役に立つような情報を発信していきますのでまたこのブログを見に来てくださいね！！
スポンサーリンク
