WordPress(ワードプレス) ホームページ

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

更新日:

スポンサーリンク

タイトル

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

今回は「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(ワードプレス)の管理画面にログイン

URL

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

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

外観

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

現在のテーマ

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

スタイルシート選択

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

コピー
枠内を一度クリックし、

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


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

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

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

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

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

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

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

開いたテキストファイル

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

貼り付け画面

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

保存して閉じる

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

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

スポンサーリンク



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

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

URL

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

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

外観

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

現在のテーマ

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

スタイルシート選択

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

style.css編集

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

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

画面サイズが992px以上(ようするにパソコン)のpタグ内文字列を装飾

  1. 文字サイズ:18px
  2. 行間:1.5em
  3. 文字間:0.8pt

という意味になります。

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

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

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

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

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

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

保存ボタンクリック
「ファイルの編集に成功しました。」と表示されれば完了です。

保存完了画面

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

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

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


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

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

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

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

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

開いたテキストファイル

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

貼り付け

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

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

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

 

るーしー
テーマの子テーマを使用していれば、親テーマをアップデートしても上書き(追記分がなくなる)はされません

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

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

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

お疲れ様でした!!

スポンサーリンク



まとめ

いかがでしたか?

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

このページをスマホで表示している方はPCでも見てみてください。

とても読みやすいフォントサイズ、行間、文字間になっています。

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

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

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

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

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

るーしー
ではまた!

スポンサーリンク



膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事

トピック
「膠原病(こうげんびょう)にかかった(かもしれない)」
と分かった時、自分が何をどうするべきか分からず途方にくれました。 同じような心配をお持ちの方はこの記事を見てください。 その時に私がした事を全てまとめました。

膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事

  1. (検査・治療)入院に備える
  2. 膠原病(こうげんびょう)であると確定させる(確定していない場合)
  3. 医師に「診断書(臨床個人調査票)」を記入してもらう
  4. 【確定診断後】(指定難病の)医療費助成制度に申請する
  5. 【確定診断後】自治体の福祉制度(給付金など)の申請をする
  6. 【確定診断後】障害年金が受給できる場合は申請をする
  7. 【確定診断後】生活費が工面できない場合は生活保護の申請をする
上記の内容を出来る限り詳細にまとめています。

膠原病(こうげんびょう)にかかった(かもしれない)時にすべき事を確認する

-WordPress(ワードプレス), ホームページ

Copyright© 膠原病でした , 2018 All Rights Reserved.