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

WordPressのインストールも無事に完了し、いよいよ初めての記事投稿・・・!

しかし・・・

「なんか違和感・・・。」

 

違和感の正体はビジュアルエディタの書式。

ビジュアルエディタのデフォルトの書式が明朝体フォントになっているではありませんか・・・。

visualeditor-font-001

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

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

 

【オススメ】当ブログ訪問者の86%の人に読まれている人気の記事

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

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

 

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

visualeditor-font-002

 

そもそも、ビジュアルエディタとは、「Visual(見た目)でEdit(編集する)」という意味を持つ記事作成ツールのこと。

HTMLコードが分からない人でも簡単に文字の装飾などができるため、直感的な記事作成ができます。

 

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

visualeditor-font-003

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

 

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

HTMLコードを使いながら記事作成をしていきます。

 

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

visualeditor-font-004

 

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

 

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

 

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

 

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

それではここから、ビジュアルエディタの明朝体フォントを変更する方法をご説明していきます。

途中、HTMLコードがたくさん登場しますが、全てコピペするだけなのでご安心下さい。

 

HTMLエディタの準備

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

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

もしすでに何かしらのHTMLエディタをインストール済みの場合はそちらを使って頂いてもOKです。

 

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

 

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

 

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

HTMLエディタの準備ができたら、次はeditor-style.cssというファイルを作成していきます。

こちら↓のHTMLコードを全てコピーし、先ほど用意しておいたHTMLエディタを開いて全て貼り付けて下さい。

 

貼り付けができたら、「ファイル」→「名前を付けて保存」を選択。

ファイル名を「editor-style.css」、ファイルの種類を「CSSファイル(*.css)」、文字コードを「UTF-8」に変更して「保存」して下さい。

とりあえず、デスクトップにでも保存しておきましょう。

visualeditor-font-005

 

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

次に、いま作成したeditor-style.cssを、FTPソフトを使ってWordPressのテーマファイルに保存します。

WordPressのテーマファイルとは、あなたが使っているWordPressのテーマ(テンプレート)のファイルのこと。

通常、テーマファイルの編集は、FTPソフトを使って行います。

 

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

すでに何かしらのFTPソフトをインストール済みの場合はそちらを使って頂いても大丈夫です。

 

FTPソフトの準備ができたら、サーバー上のテーマファイルを開きます。

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

 

設定するドメイン → public_html → wp-content → themes → 使用中のWordPressのテーマファイル

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

 

テーマファイルを開いたら、先ほど作成したeditor-style.cssをアップロードします。

このように↓、ドラッグ&ドロップするだけで簡単にアップロードできます。

visualeditor-font-006

 

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を開いてみて下さい。

それでもまだ変わらない場合は、当記事の内容をもう一度最初から見直してみましょう。

 


 

【オススメ】当ブログ訪問者の86%の人に読まれている人気の記事

 

なぜ多重債務者が月収100万の自由な起業家になれたのか?
僕はほんの数年前まで、
リサイクルショップのたった数百円の洋服を買うことすらも、
奥さんにためらわせてしまうレベルの多重債務者でした。
毎月20万円の利息返済のために、
営業の仕事と警備員のバイトを掛け持ちし、
毎日毎日、自分をすり減らしながら生きていました。
そんな僕でしたが、ある時、偶然手にした一冊の本で
インターネットビジネスの存在を知り、
すがる思いでネット副業を開始。
最初はわからないこともたくさんありましたが、
やっていくうちにだんだん稼げるようになり、
気付けば月収100万円を超え、
絶対に完済はムリだと思っていた
多額の借金がなくなりました。
いまの時代はインターネットを使えば、
個人でも極めてローリスク、ローコストで、
しかも簡単にビジネスを始めることができてしまいます。
僕がどうやって、
多重債務者から月収100万円の自由な起業家へなったのか?
その方法やノウハウを、
僕の無料メールマガジンで公開しています↓↓
コメント一覧
  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) より:

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

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

コメントを残す

おすすめの記事