WordPress入力画面のフォントを変更する方法

WordPress入力画面のフォントを変更する方法

スポンサーリンク

スポンサーリンク

この記事では、WordPressの入力画面のフォントを変更する方法を説明します。

変更出来るのは、フォントファミリーにフォントサイズ、行間(line-height)といった、文章を構成するスタイル部分の全般です。

以前、WordPressの入力画面のフォントがいきなり明朝体になってしまって、文章の入力が見辛くなったことがありました。

下の画像のように。

WordPressの入力画面のフォントが明朝体

突然このような現象が起こってしまったと共に、それまではゴシック体で文章を入力していたこともあり、文章が打ちづらいったらありませんでした。

そこでこの現象を解決するために調べた結果、入力画面のフォントを変更すればいいという結論に至りましたので、それを共有/紹介したいと思います。

WordPress入力画面のフォントを変更する

WordPressの入力画面のフォントを変更する方法は、とても簡単です。

手順としては、

  1. functions.phpにコードを追加
  2. editor-style.cssを新しく作成しアップロード

のみです。

functions.phpにコードを追加

まずはfunctions.phpに以下のコードを丸々コピペし、アップロードします。

このコードを追加することで、次に説明するeditor-style.cssがWordPressに反映させることが出来るようになります。

editor-style.cssを新しく作成しアップロード

次にCSSを新しく作成します。

CSSのファイル名はeditor-style.cssにしてください。このCSSをサーバーのテーマ内にアップロードすることで、CSSに記述したスタイルを入力画面に反映させることが出来ます。

フォントファミリーを変更する

フォントファミリーを変更する記述ですが、例えば遊ゴシックをメインとする場合は以下のように記述します。

もちろん他のゴシック体や明朝体に変更することも可能なので、お好きなフォントファミリーを設定してみて下さい。

フォントサイズを変更する

続いてフォントサイズを変更する記述です。

フォントファミリーの記述の前に、サイズを指定する記述を加えるだけです。

このように一括で記述しても大丈夫ですし、以下のようにバラバラで記述してもどちらでも大丈夫です。

行間(line-height)を変更する

フォントだけではなく、文章の行間(line-height)を変更することも可能です。

フォントサイズの直後に、スラッシュ(/)と行間(line-height)を指定する数値を入力するだけです。

もちろん以下のようにバラバラの記述でも大丈夫です。

文字色(color)を変更する

フォントと行間(line-height)だけではなく、文字色(color)を変更することも可能です。

まとめ

この記事を書くにあたってWordPressの入力画面のフォントを変更しているうちに、フォントはゴシックじゃなくて明朝体でもいいかもな、と思うようになってきました。

明朝体はゴシックと比べて少し線が細くなる気がするので、文字色(color)を#000にしてみたり、フォントサイズを1pxか2px程大きくすれば、そこそこ見えやすくなります。

入力画面はwebサイトの閲覧に直接関係のあるものではありませんが、ブログやコンテンツのためにいざ文章を入力する、というときにはとても重要な要素となってきます。

この記事が皆様の文章入力のお役に立ちますように。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク