WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法

LINEで送る
Pocket

タイトル

こんにちは! るーしーです。

今回は「WordPress(ワードプレス)のデフォルトフォントサイズを簡単に変更する方法」についてです。

※フォントサイズだけだとバランスが悪くなるので行間と文字間も変更します。

皆さんは

「デフォルトのフォントサイズや行間、文字間を変更したい」

と思った事はありませんか?

私も思いました。

局所的なフォントサイズ変更ならエディタで簡単に出来ますがデフォルトのフォントサイズを変えるのはCSSを操作した方が良いと思います。

「CSSとか操作するのは難しいよ」

というあなた!!

そんなあなたに見てもらいたい記事です。

しかも今回はPC表示だけ変更しスマホの表示は一切変更しません

やり方は色々とありますが【初心者向け】で簡単にデフォルトフォントサイズ、行間、文字間を変更するCSSの操作方法をご紹介します。

!!注意!!
実行前にCSSファイル(使用テーマのstyle.css)のバックアップを必ず行ってください

また、レイアウトが崩れてしまった等の結果についても自己責任でお願い致します。

スポンサーリンク

 

目次

CSSとは?

疑問

CSSとはHTMLの見た目(タグ等)を装飾するものです。

「インターネットの画面ってHTMLで書かれてるんだよね?それを装飾するの?」という認識で大丈夫です。

HTMLは文章をタグというもので囲みます。

例文1

このタグ(等)を装飾するのがCSSです。

しかし、タグは皆さんが見ている画面には(通常)表示されません。あくまで構造的な意味合いを持つだけなのです。

 

少し例文を見てみましょう。

【例文1】

例文1

この文章にもタグが入っています。このソースを見てみると

例文1

全ての文章がpと言うタグで囲まれています。※/は閉じタグと言われ、/無しのタグで始めて/付きのタグで閉じるのが基本

 

【例文2】

例文2

表示が変わりましたね。このソースを見てみると

例文2

 

ということは、h4のHTMLタグが付いた文字だけ表示が変わっていたんですね。

「pタグで囲まれた文章はこのように装飾してね」

「h4タグで囲まれた文章はこのように装飾してね」

というようにタグ(等)へ装飾の設定をするのがCSSの機能です。

その為、全く同じ文章、HTMLのタグでもCSSの定義が異なれば皆さんの画面に表示されるデザインは異なります

WordPress(ワードプレス)のテーマはまさにそれの最たる例ですね。

スポンサーリンク

どうやってデフォルトのフォントサイズを変えるの?

CSSの変更方法

今回はCSSでpタグに囲まれたフォントのサイズ、行間、文字間を変える設定をします。

そうする事でpタグに囲まれたフォントは全てサイズ、行間、文字間が変わります(例外あり)。

段落として定義されている部分全てpタグが入っている(はず)なのですがどうなるかは実物を見た方が早いと思います。

デフォルトの状態と設定変更後の状態を見比べてみましょう。

 

デフォルトフォントの表示

例文1

 

こ、これは……

 

読みにくい画像

文字が気持ち小さいうえに文字間が詰まっていて見辛い……

続いてフォント設定変更後の表示を見てみましょう。

 

フォント設定変更後の表示

例文2

 

こ、これは……

 

目に優しい

とても見やすくなったと思いませんか?

そして今回はPC表示のみ変更しスマホ表示は変更しません

PCでサイトをご欄になる方はスマホで見る方と比べて長く画面を見ていると思います。

その為少しでも見やすくする事はユーザーにとってメリットがあります

スポンサーリンク

デフォルトのフォントサイズ設定変更手順

変更手順

 

前提

1:画面表示全てのフォントが変わる訳では無い

2:全ての方が私と同じ表示になるとは限りません。

使っているWordPress(ワードプレス)のテーマによってCSSの定義が異なるからです。

表示が思うように変わらない場合は初期設定に戻してください。

 

現在使用しているテーマのstyle.cssの内容をバックアップする

1:WordPress(ワードプレス)の管理画面にログイン

http://(ドメイン)/wp-admin

2:「外観」→「テーマの編集」をクリック

外観

3:「編集するテーマを選択」に現在使用しているテーマを選択

現在のテーマ

4:「スタイルシート(style.css)」を選択

スタイルシート選択

5:「選択したファイルの内容」をコピー

枠内を一度クリックし、

「コントロール + A」で全選択

「コントロール + C」でコピー

コピー

6:デスクトップにテキストファイルを作成する

ファイル名は中身が何かわかればいいので、「20180201バックアップしたスタイルシート.txt」等で大丈夫です。

※.txtは拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。

るーしー【余談】
CSSは「カスケーディング スタイル シート」の頭文字です。

カスケーディングというのは滝のように継承されていくという意味があるのですがそれはまた次の機会に!

 

テキスト作成

7:作成したテキストファイルを開く

開いたテキストファイル

8:開いたテキストファイルに手順5でコピーした内容を貼り付け

貼り付け画面

9:ファイルを保存して閉じる

保存して閉じる

これで今回作業をする直前の状態であるstyle.cssファイル内容をバックアップできました。

以後の操作でレイアウトが崩れてしまった場合は、現在使用しているテーマのstyle.cssファイルへ今回作成したバックアップファイルの内容をコピペすれば復旧しますので大事に保存してください。

 

現在使用しているテーマのstyle.cssを編集する

1:WordPress(ワードプレス)の管理画面にログイン

http://(ドメイン)/wp-admin

2:「外観」→「テーマの編集」をクリック

外観

3:「編集するテーマを選択」に現在使用しているテーマを選択

現在のテーマ

4:「スタイルシート(style.css)」を選択

スタイルシート選択

5:「選択したファイルの内容」の最下行に下記の記述を貼り付け

/* 2018/02/01追記 */
/* 992px以上の画面でフォントサイズ・行間・文字間指定 */
@media (min-width: 992px) {
  p {
    font-size:18px;
    line-height:1.5em;
    letter-spacing:0.8pt;
  }
}

↑一番上の行2018/02/01という表示は日付なので調整してください。

この記述の意味としては、

・画面サイズが992px以上(ようするにパソコン)のpタグ内文字列を装飾
1:文字サイズ:18px
2:行間:1.5em
3:文字間:0.8pt

という意味になります。

好みに応じて数値は変えてください。

style.css編集

6:エラー表示がない事を確認

エラー表示がある場合は何かしら入力に不備があるので修正する必要があります。

修正不能になった場合は保存せずに画面表示を変えて変更を破棄しましょう。

再度開きなおせば修正前の状態になっています。

エラー表示

7:「ファイルを更新」をクリック

保存ボタンクリック

「ファイルの編集に成功しました。」と表示されれば完了です。

保存完了画面

8:保存完了したstyle.cssのテキスト全文コピー

保存完了したstyle.cssの枠内を一度クリックし、

「コントロール + A」で全選択

「コントロール + C」でコピー

style.cssのコピー

9:デスクトップにテキストファイルを作成する

ファイル名は「現在この内容を使っている」という事が分かるように、「【20180201使用中】スタイルシート.txt」という具合にしましょう。

※.txtは拡張子といいPCの設定次第では表示されません。その場合は気にしないでOKです。

テキストファイル作成

10:作成したテキストファイルを開く

開いたテキストファイル

11:開いたテキストファイルに先手順8でコピーした内容を貼り付け

貼り付け

12:ファイルを保存して閉じる

保存画面

このファイルが現在使用しているstyle.cssのバックアップです。

テーマを最新バージョンに更新すると追記した分が全て無くなるのでバージョンアップしたら再度追記しましょう。

 

フォントサイズ、行間、文字間が変わったか確認

念のためトップページ、固定ページ、投稿の3種類確認しましょう。

画面確認

フォントサイズが変わっていれば作業完了です。

スポンサーリンク

まとめ

いかがでしたか?

たかが文字サイズ、行間、文字間ですが少し変わっただけで印象はガラリと変わりました。

このページをスマホで表示している方はPCでも見てみてください。とても読みやすいフォントサイズ、行間、文字間になっています。

PCのみ設定してスマホの表示には干渉しない所がポイントですね。

やり方は沢山ありますがあれこれ試行錯誤した上でこの手順が最も手軽に実行できる手段だと判断しました。

商用のしっかりしたサイトでやるべきではない手段なのですが個人サイトにつき許して……という感じです。

なので今回の方法もやるやらないは皆さんの判断にお任せします。※結果も自己責任でお願いします。

とはいってもこれからもどんどん役に立つような情報を発信していきますのでまたこのブログを見に来てくださいね!!

 

【関連記事】
サイトのHTTPS化できてますか?

エックスサーバーを使用し、ホームページを開設したばかりなら数分の作業時間でできます。
サイト開設時のHTTPS化をWordPress(ワードプレス)とXSERVER(エックスサーバー)で簡単に行う方法

サイト開設時のHTTPS化をWordPress(ワードプレス)とXSERVER(エックスサーバー)で簡単に行う方法

るーしー

ではまた!

スポンサーリンク



LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です