『投稿画面のビジュアルモードで指定できるフォントサイズをもっと増やしたいけど、どうやったらいいのかな。。できればテキストモードでHTMLをいじらずに好きなサイズに変更したいけど。』

こんな疑問にお答えします。

WordPressで賢威8.0をテーマとして使用している方向けです。

賢威8.0:WordPressの投稿画面(ビジュアル)で指定できるフォントサイズを追加する

WordPressの投稿画面で、テキストモードでHTMLを編集せずにフォントサイズを色々変更したい、、という方がいると思います。

というか僕のようにHTMLに詳しくない人はビジュアルモードからフォントサイズを指定するほかありませんよね。

ここでは、賢威8.0テーマで投稿画面のビジュアルモードから指定できるフォントサイズの追加方法を解説していきます。

問題:デフォルトで指定できるフォントサイズが少ない

ビジュアルモードでフォントサイズを指定できますが、デフォルトの状態で指定できるフォントサイズが少ないと思います。具体的には以下のフォントサイズがデフォルトで指定可能です。

8px 10px 12px 14px 16px 20px 24px 28px 32px 36px 48px 60px

フォントサイズを特に指定しなければ、16pxとかになっていると思いますが、僕としてはもう少し大きい方が見やすいと考え、17pxあたりで書きたいわけです。

なのに16pxの次はいきなり20pxとなり、これだと大きすぎかと思います。

ということで、このビジュアルモードから選択できるフォントサイズをもっと追加したいと考えました。

対策:賢威8.0でのフォントサイズの追加方法

賢威8.0テーマにおいて、投稿画面から指定できるフォントサイズの追加方法を解説していきます。簡単なのですぐ終わるかと。

まずはWordPressの[外観→テーマの編集]と進んでください。

WordPressの設定[外観→テーマの編集]

 

「テーマファイル」の一覧から、[keni/common/keni.php]を探して開いてください。

「function customize_tinymce_settings」のキーワードをソースコード上で検索すると、フォントサイズを定義している箇所が見つかります。ここに追加したいフォントサイズを書き足します。

賢威8.0でのフォントサイズの編集方法追加作業はこれで完了。

設定が正しく変更されているか確認しましょう。

WordPressの投稿画面で、ビジュアルモードからフォントサイズの一覧を確認してみてください。追加したフォントサイズが反映されているでしょうか。僕の場合は17px,18pxの2つを追加し、不要なサイズは削除しました。

WordPress投稿画面で追加したフォントサイズの確認

 

はい、これで賢威8.0でのフォントサイズの追加は完了です。お疲れさまでした。

メイントピックはこれで終了ですが、該当される方(TinyMCE Advancedを導入している方)は必ず以下もご覧ください。

【注意】TinyMCE Advancedを導入している人が陥りやすい罠

記事の編集がとっても簡単になる神プラグイン「TinyMCE Advanced」を入れてる方は多いと思います。もちろん僕も入れています。

それゆえに、フォントサイズを追加しようとして面倒なトラブルに陥りました。念のため共有しておきます。

勘違い:投稿画面のフォントサイズはTinyMCE Advancedが表示していると思っていた

投稿画面のビジュアルモードから指定できるフォントサイズを追加したい(増やしたい)と考えたとき、僕はまずTinyMCE Advancedの設定を変更しようと考えました。

理由は、投稿画面(ビジュアルモード)のフォントサイズ指定のアイコンが、TinyMCE Advancedによって表示されていると思っていたからです。

実際、TinyMCE Advancedを導入することで、ビジュアルモードにフォントサイズ指定のアイコンが表示できます。

なので、Googleで次のように検索してみたわけです。

Googleでフォントサイズ追加方法を検索

TinyMCE Advancedの設定を変更して、ビジュアルモードから指定できるフォントサイズを増やす方法を説明した記事がいくつかヒットしました。そして勘違いしたまま、説明されているとおり作業を進めていきました。

TinyMCE Advancedの設定からフォントサイズを追加する方法

参考までに、Googleで検索してヒットした記事で説明されていた、TinyMCE Advancedの設定変更によるビジュアルモードで指定できるフォントサイズの追加方法を解説しておきます。

まずWordPressで[プラグイン→プラグイン編集]と進んでください。

WordPress設定[プラグイン→プラグイン編集]

 

「編集するプラグインを選択」でTinyMCE Advancedを選択します。編集するのは「tinymce-advanced.php」というファイルです。

TinyMCE Advancedの編集画面

ファイルを開いたら、「private $fontsize_formats」で検索してください。ここでフォントサイズを設定しています(上図)。僕は最初、ここに追加したいフォントサイズの17px,18pxを追加しました。(⇒結局上手くいきませんでした。。)

正しく追加できたかどうかの確認をします。WordPressの[設定→TinyMCE Advanced]を選びます。

WordPress設定[設定→TinyMCE Advanced]

画面を少しスクロールして、以下の赤く囲んだ箇所を確認します(下図)。フォントサイズの中に追加したフォントサイズが含まれていればOKです。

TinyMCE Advanced:追加したフォントサイズの確認

 

そして再び投稿画面でフォントサイズの一覧を確認したところ、、、(下図)

WordPress投稿画面でのフォントサイズ確認

あれ、追加したフォントサイズが反映されていない。。

はい、これが僕の勘違いから引き起こされた失敗です。ネットで検索して出てくる解説では、ここで追加したフォントサイズがしっかり反映されているのです。。

この後何度も作業をやり直したり、Wordpressを開き直したり、色々調べましたが、まったく解決しませんでした。

そもそもTinyMCE Advancedで設定したフォントサイズと違う

そこであることに気づきました。

投稿画面(ビジュアルモード)のフォントサイズ一覧に表示されているフォントサイズと、WordPressの[設定→TinyMCE Advanced]で確認したフォントサイズが微妙に違っているのです。(下図)

投稿画面とTinyMCE Advancedで設定されたフォントサイズが異なる

TinyMCE Advancedの設定には含まれる72px,96pxというサイズが、投稿画面のフォントサイズに表示されていません。

あれ、ひょっとすると、投稿画面に表示されているフォントサイズのアイコンはTinyMCE Advancedが表示しているのではない?

ここまできて、やっとこのフォントサイズのアイコンがTinyMCE Advancedではない別の何かが出力していると気づきました。

そこで思い当たったのが、そういえば自分は賢威8.0テーマを使用している。それがフォントサイズ指定に影響しているのでは?ということでした。

賢威8.0でフォントサイズを設定しているファイルを探す

そして、賢威8.0でフォントサイズを設定しているファイルを探したところ、[keni/common/keni.php]というファイルで設定していることを知りました。

もう一度以下の画像をご覧ください。見にくかったら拡大表示してみてください。。

TinyMCE Advancedでのフォントサイズの追加方法

赤枠内のコメントで、「tinymceのエディター設定を変更」と記載されているではありませんか!!勝手に何してくれてんの?と思いました(笑)

このコメント文から推測するに、おそらくTinyMCE Advancedで設定しているフォントサイズを上書きしている、もしくは賢威8.0の設定の方が優先的に読み込まれるようになっている、、という感じでしょう。

このため、賢威8.0テーマを使用していた僕は、一般的に説明されているTinyMCE Advancedの設定変更によるフォントサイズ変更ができなくなっていたのでした。

まとめ:賢威でTinyMCE Advanced使っている人は注意して!

ということでまとめですが、賢威8.0テンプレートを使っている人で、かつTinyMCE Advancedも入れている人は、投稿画面から指定できるフォントサイズの変更には注意してください。僕のようにTinyMCE Advancedの設定変更でフォントサイズを追加しようとして、何度やっても反映されない、、という事態に陥る可能性があります。その場合は、冒頭で解説したように賢威8.0の設定(keni.php)から変更すれば良いです。

おすすめのプログラミングスクール

本気でプログラミングを学び、IT企業転職、フリーランスで稼ぎたい方向け。元プログラマーおすすめのプログラミングスクールを4社(無料体験あり)ご紹介します。

プログラマーおすすめのプログラミングスクール4社:無料体験あり!