WordPressビジュアルエディタの明朝体フォントを変更する方法

公開日: 2015年12月17日
最終更新日: 2016年10月20日


visualeditor-font-top

WordPressのインストールも無事に完了したところで・・・。「おーし、さっそくバリバリ記事書いちゃうよー(・∀・)イキマース」と、やる気はギンギン。「投稿」→「新規作成」と進み、いよいよ初めての記事投稿です。しかしいきなり・・・

「違和感・・・。」

 

違和感の正体はビジュアルエディタの書式。そう、ビジュアルエディタのデフォルトの書式が明朝体フォントになっているのだ。

visualeditor-font-001

「別に明朝体でも良くね?」って言われちゃったらそれまでなんですけど、記事を公開した時の書式と、記事作成時の書式はなるべく一緒になっていたほうが個人的には好き。

・・・てことで今回は、「WordPressのビジュアルエディタの明朝体フォントを他のフォントに変更する方法」をご紹介します。

目次

  1. ビジュアルエディタとテキストエディタの違い
  2. ビジュアルエディタの明朝体フォントを変更する方法
    2-1.HTMLエディタの準備
    2-2.editor-style.cssファイルの作成
    2-3.FTPソフトを使ってWordPressのテーマファイルに保存
    2-4.function.phpにフォント指定の記述をする

1.ビジュアルエディタとテキストエディタの違い

WordPressで記事投稿をする方法には、「ビジュアルエディタ」で記事を書く方法と、「テキストエディタ」で記事を書く方法の二通りの方法があります。

これら二つの投稿方法は、エディタスペース(記事作成エリア)の右上にあるタブで切り替えができます。

visualeditor-font-002

 

そもそも、ビジュアルエディタとは、「Visual(見た目)でEdit(編集する)」という意味を持つ記事作成ツールのこと。HTMLコードが分からない人でも簡単に文字の装飾などができるため、直感的な記事作成ができます。

例えば、「ここの文字をちょっと太くしたい」という場合は、文字を太くしたい部分をドラッグして、「B」という装飾ボタンをクリック。するとこんな感じ↓で、あっさりと文字を太くすることができます。

visualeditor-font-003

<補足>TinyMCE Advancedというプラグインを導入すれば、ビジュアルエディタをもっと使いやすくて便利なエディタにすることが可能です。

TinyMCE Advancedのおすすめの設定と使い方

 

それに対して、テキストエディタとは、「テキスト(HTML)でEdit(編集する)」という意味を持つ記事作成ツールのこと。HTMLコードを使いながら記事作成をしていきます。

テキストエディタで先ほどと同じことをしようとすると、文字を太くしたい部分に対してこのような↓HTMLタグを記述してやらねばなりません。

visualeditor-font-004

 

ビジュアルエディタとテキストエディタ、基本的にはどちらを使っても全く問題ありませんが、HTMLコードが分かったほうが記事の構成を色々とアレンジできるようになりますし、ちょっとしたズレや修正も、HTMLコードを少し編集するだけでだいたい解決できます。

「HTMLが全く分からない!」という方は、最初は直感的に記事作成ができるビジュアルエディタから初めたほうがいいですが、HTMLコードも少しずつ覚えていくことをオススメします。

Special Tips ちなみに、ビジュアルエディタで書いた内容は、自動的にテキストエディタに反映されるので、記事を書きながらビジュアルエディタとテキストエディタを交互に見ていけば、ビジュアルエディタで装飾した箇所のHTMLコードがどのようになっているのかが分かります。

2.ビジュアルエディタの明朝体フォントを変更する方法

それではここから、ビジュアルエディタの明朝体フォントを変更する方法をご説明していきます。途中、HTMLコードがたくさん登場しますが、全てコピペするだけなのでご安心下さい。

2-1.HTMLエディタの準備

具体的な作業に入る前に、まず、HTMLエディタを用意しておきましょう。

HTMLエディタを持っていない場合は、こちら↓のリンク先ページから「Crescent Eve」という無料のHTMLエディタをインストールして下さい。すでに何かしらのHTMLエディタをインストール済みの場合はそちらを使って頂いてもOKです。


Crescent Eveを無料でダウンロードする

多くのWindowsPCにインストールされている「メモ帳」でも代用できなくはないのですが、正しくHTMLが読み込めない場合があるので、なるべくHTMLエディタを使用するようにして下さい。

2-2.editor-style.cssファイルの作成

HTMLエディタの準備ができたら、次はeditor-style.cssというファイルを作成していきます。こちら↓のHTMLコードを全てコピーし、先ほど用意しておいたHTMLエディタを開いて全て貼り付けて下さい。

 

貼り付けができたら、「ファイル」→「名前を付けて保存」を選択。ファイル名を「editor-style.css」、ファイルの種類を「CSSファイル(*.css)」、文字コードを「UTF-8」に変更して「保存」して下さい。とりあえず、デスクトップにでも保存しておきましょう。

visualeditor-font-005

 

2-3.FTPソフトを使ってWordPressのテーマファイルに保存

次に、いま作成したeditor-style.cssを、FTPソフトを使ってWordPressのテーマファイルに保存します。WordPressのテーマファイルとは、あなたが使っているWordPressのテーマ(テンプレート)のファイルのこと。通常、テーマファイルの編集は、FTPソフトを使って行います。

もし、FTPソフトを使ったことがない場合は、こちら↓のリンク先ページを参考にして「FFFTP」という無料のFTPソフトをインストールし、初期設定を行って下さい。すでに何かしらのFTPソフトをインストール済みの場合はそちらを使って頂いても大丈夫です。

 

FTPソフトの準備ができたら、サーバー上のテーマファイルを開きます。こちら↓に書いてある通りにFTPソフトを操作すれば、あなたが使用しているテーマファイルにたどり着けるはずです。


設定するドメイン
public_htmlwp-contentthemes使用中のWordPressのテーマファイル

※この通りに進んでもテーマファイルが見つからない場合は、style.cssというファイルが保存されている場所を探して、style.cssと同じ階層に保存して下さい。

 

テーマファイルを開いたら、先ほど作成したeditor-style.cssをアップロードします。このように↓、ドラッグ&ドロップするだけで簡単にアップロードできます。

visualeditor-font-006

 

2-4.function.phpにフォント指定の記述をする

次は、function.phpというファイルに、明朝体フォントでは無い、別のフォントを指定するための編集を行います。

<補足>function.phpはWordPressを正常に動かすための重要なファイルなので、編集作業を始める前に必ずバックアップを取っておいて下さい。

 

WordPressのダッシュボードを開き、「外観」→「テーマ編集」→「function.php」の順に進みます。function.phpファイルを開いたら、こちら↓のコードをfunction.phpの最下部( ?> より上)に貼り付けて下さい。コードを貼り付けたら「ファイルを更新」をクリックしましょう。

※お使いのWordPressのテーマ(テンプレート)によっては、function.phpの最後に ?> が記述されていない場合があります。その際は、function.phpの最下部にこちらのコードを貼り付けて下さい。

 

visualeditor-font-007

 

以上で、WordPressビジュアルエディタの明朝体フォントを変更する作業は完了です。試しに、WordPressのダッシュボードから「投稿」→「新規追加」と進み、ビジュアルエディタを開いて適当に文字を書いてみて下さい。

こんな感じで↓、明朝体フォントから別のフォントに変わっていればOKです。

visualeditor-font-008

 

ここまでの作業をしたにもかかわらず、明朝体フォントのままの場合は、一度画面を閉じて再度WordPressを開いてみて下さい。それでもまだ変わらない場合は、当記事の内容をもう一度最初から見直してみましょう。

 

“WordPressビジュアルエディタの明朝体フォントを変更する方法”へ9件のコメント

  1. じゅんじゅん より:

    こんばんは。

    普段でしたら、いじったりということは
    必要最低限したくないのですが、

    こちらのサイトを拝見させていただいて
    自分にもできそうな気がしてきました。

    応援ぽち

  2. […] WordPressビジュアルエディタの明朝体フォントを変更する方法 […]

  3. […] ここに解決法が載ってました! WordPressビジュアルエディタの明朝体フォントを変更する方法(Net Business Recipes) […]

  4. […] こちらのサイト(Net Business RECIPES)を参考にさせていただきました。参考にさせていただいたサイトのほうが詳しく書いています。ここは、自分用のメモなので、自分が分かればそれで […]

  5. […] すでに何かしらのFTPソフトをインストール済みの場合はそちらを使って頂いても大丈夫です。 [紹介元] WordPressビジュアルエディタの明朝体フォントを変更する方法 | Net Business RECIPES […]

  6. つか より:

    とても参考になります。質問です。
    テーマのアップデートがあった場合に、アップデートをかけると
    function.phpに上書きがかかって、フォントは元に戻ってしまいませんか?
    防止する方法は?

    • 根本蒼汰(Sota) より:

      子テーマを作ってそちらでカスタマイズをするのがベストかと思いますが、この「フォントを変える」だけのために、わざわざ子テーマを作るのは労力に見合わないかなと。

      なので、アップデートしたらまた当記事でご紹介していることをやり直すのが、何だかんだで一番労力が少なく済むと考えています。慣れれば1~2分でできることなので。

  7. ふくよか より:

    ずっと悩んでいたフォントの変更がおかげさまでできました。本当にありがとうございます!!!!

    • 根本蒼汰(Sota) より:

      お役に立てたようで何よりです。

      わざわざコメントありがとうございます!

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む