どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレス(WordPress)のビジュアルエディタを、無料ブログのように多機能に拡張してくれる便利なプラグインが「TinyMCE Advanced」です。
ワードプレスブログを利用されている方なら、基本的に導入されることが多いメジャーなプラグインで、「フォントサイズ」を14段階に拡張できる機能があります。
しかし、無料テンプレートの１つである「STINGER8」に導入した場合は、フォントサイズ(px)が選択できずにパーセント表記での変更しかできません。
私はSTINGER8で早速エディタを使って投稿しようと思ったら、パーセント表記だったのでその時はなぜ変わっていないのか、意味がわかりませんでした。
そこで同じ状況に遭遇してしまった方の為に、プラグインのフォントサイズが選択できない原因と、STINGER8でも細かいフォントサイズの変更ができるようにする方法を、ご紹介しますので参考にして下さい。
STINGER8でフォントサイズが出ない原因
STINGER8ではテンプレートの親テーマ内の「テーマのための関数(functions.php)」でフォントサイズがすでにパーセント表記で指定されています。
指定されたフォントサイズを確認するには、ワードプレスの管理画面メニューから「外観」⇒『テーマの編集』をクリックします。
「STINGER8 Child」の子テーマを導入されている方は、画面左上にある「編集するテーマを選択」から「STINGER8」の親テーマを選択します。
テンプレートの項目にある『テーマのための関数(functions.php)』をクリックし、テーマ内下段の方に以下の表記があることを確認しましょう。
「$init_array[‘fontsize_formats’] = ‘70% 80% 90% 120% 130% 150% 200% 250% 300%’;」のコードがフォントサイズを指定している部分になります。
WindowsPCなら「Ctrl+F」、MacPCなら「command+F」で「fontsize」をページ内検索すればすぐに見つかります。
このコードがTinyMCE Advancedのフォントサイズが表示されない原因となっているので、パーセント表記されている部分を「px」に変更することで、フォントサイズが指定できるようになります。
STINGER8のテーマを編集するにあたって
STINGER8のテーマ内のコードを編集する場合は、親テーマではなく子テーマで編集することをオススメします。
子テーマで編集した内容は親テーマがアップデートされたとしても、消えることがないので親テーマに比べてリスクなく使用できます。
また、親テーマで編集した内容よりも、子テーマで編集した内容の方が優先されて表示されるようになっています。
子テーマを「編集する前」と「編集した後」の変化
実際にワードプレスのビジュアルエディタのフォントサイズが、どのように変化するのか気になると思いますのでここで確認しておきましょう。
子テーマを編集する前はビジュアルエディタのフォントサイズを選択すると、以下のように表示されています。
パーセントで表示されていると、使い慣れるまではいまいち文字のサイズがわかりにくい印象があります。
子テーマを編集した後ではビジュアルエディタのフォントサイズを選択すると、以下のように表示されるようになります。
「px」で表示されている方がサイズ感も掴みやすく、私的にもこちらの方が使いやすいのでオススメです。
それでは子テーマを使ってパーセント表記からフォントサイズへ変更していきます。
子テーマを編集してフォントサイズを表示させる手順
現状ではSTINGER8の親テーマにある「functions.php」でフォントサイズが指定されているので、これを新しく子テーマのfunctions.phpで任意の内容に指定し、親テーマで指定されている内容を上書きします。
なお、functions.phpの編集は少しでもコードの入力を誤ると、画面が真っ白になってサイトにアクセスできなくなるので、編集する際は十分注意する必要があります。
子テーマ内「functions.php」の編集方法
ワードプレスの管理画面メニューから「外観」⇒「テーマの編集」⇒「テーマのための関数(functions.php)」の順に進めていきます。
※この時、編集するテーマが「STINGER8 Child」の子テーマであることを確認しておいて下さい
functions.phpのテーマ内の一番下に以下のコードをコピーして追加して下さい。
if (!function_exists('st_tiny_mce_before_init')) {
/**
* オリジナルタグ登録
*/
function st_tiny_mce_before_init( $init_array ) {
//書式プルダウンメニューのカスタマイズ
$init_array['block_formats'] = '段落=p;見出し2=h2;見出し3=h3;見出し4=h4;見出し5=h5;見出し6=h6';
$init_array['fontsize_formats'] = '8px 10px 12px 14px 16px 18px 20px 24px 32px';
//自作クラスをプルダウンメニューで追加
$style_formats = array (
array( 'title' => '太字', 'inline' => 'span', 'classes' => 'huto' ),
array( 'title' => '太字（赤）', 'inline' => 'span', 'classes' => 'hutoaka' ),
array( 'title' => '大文字', 'inline' => 'span', 'classes' => 'oomozi' ),
array( 'title' => '小文字', 'inline' => 'span', 'classes' => 'komozi' ),
array( 'title' => 'ドット線', 'inline' => 'span', 'classes' => 'dotline' ),
array( 'title' => '黄マーカー', 'inline' => 'span', 'classes' => 'ymarker' ),
array( 'title' => '赤マーカー', 'inline' => 'span', 'classes' => 'rmarker' ),
array( 'title' => '参考', 'inline' => 'span', 'classes' => 'sankou' ),
array( 'title' => '写真に枠線', 'inline' => 'span', 'classes' => 'photoline' ),
array( 'title' => '記事タイトルデザイン', 'block' => 'p', 'classes' => 'entry-title' ),
array( 'title' => 'code', 'inline' => 'code' ),
array( 'title' => '吹き出し', 'block' => 'p', 'classes' => 'h2fuu' ),
array( 'title' => '回り込み解除', 'block' => 'div', 'classes' => 'clearfix' , 'wrapper' => true ),
array( 'title' => 'センター寄せ', 'block' => 'div', 'classes' => 'center' , 'wrapper' => true ),
array( 'title' => '黄色ボックス', 'block' => 'div', 'classes' => 'yellowbox' , 'wrapper' => true ),
array( 'title' => '薄赤ボックス', 'block' => 'div', 'classes' => 'redbox' , 'wrapper' => true ),
array( 'title' => 'グレーボックス', 'block' => 'div', 'classes' => 'graybox' , 'wrapper' => true ),
array( 'title' => '引用風ボックス', 'block' => 'div', 'classes' => 'inyoumodoki' , 'wrapper' => true ),
array( 'title' => 'olタグを囲む数字ボックス', 'block' => 'div', 'classes' => 'maruno' , 'wrapper' => true ),
array( 'title' => 'ulタグを囲む数字ボックス', 'block' => 'div', 'classes' => 'maruck' , 'wrapper' => true ),
array( 'title' => 'table横スクロールボックス', 'block' => 'div', 'classes' => 'scroll-box' , 'wrapper' => true ),
array( 'title' => 'imgインラインボックス', 'block' => 'span', 'classes' => 'inline-img' , 'wrapper' => true ),
array( 'title' => 'width100%リセット', 'block' => 'span', 'classes' => 'resetwidth' , 'wrapper' => true ),
array( 'title' => '装飾なしテーブル', 'block' => 'div', 'classes' => 'notab' , 'wrapper' => true ),
);
$init_array['style_formats'] = json_encode( $style_formats );
$init['style_formats_merge'] = false;
return $init_array;
}
}
8番目に表示されているコードのpxを任意の数値に変更、または追加することで使用したいフォントサイズに編集できます。
また、上記のコードは親テーマのfunctions.phpに記載されている「if (!function_exists(‘st_tiny_mce_before_init’)) {」で始まる部分のコードと同じ内容になっています。
親テーマから直接コピーする場合は、パーセントで記載されているフォントサイズの部分を任意の数値に変更しましょう。
変更が終わったら下にある『ファイルを更新』をクリックして設定完了です。
参考までにこの記事はフォントサイズ16pxで書いています。
大きいサイズになると24pxサイズ、32pxサイズというようにかなり目立ちますが、文章として使うには大きすぎますね。
まとめ
以上がSTINGER8のエディタに、「TinyMCE Advanced」フォントサイズが表示されない原因と対策方法になります。
無料テンプレートのSTINGER8と、ワードプレスプラグインのTinyMCE Advancedは、共に利用している方が多い人気のものです。
これから利用されていく方は今回のようなテーマの関係上、正常に反映されないことがある可能性が出てくるかもしれませんので、その時はテーマ内に問題はないかどうか確認するようにしましょう。
| 合わせて読んでほしい |
