マンション管理士は、マンション管理の諸問題に対して管理組合の立場に立って、解決を支援する専門家です!業務地域◇阪神地区:西宮市,宝塚市,芦屋市,神戸市,伊丹市,尼崎市,三田市,川西市ほか隣接地域

  トップメニュー
  インフォメーション
  RSS 配信ニュース
  マンションの法律
  マンションの維持
  マンションの運営
  マンション関連書籍
  et cetera
  HP内検索

高度な検索



カテゴリ: お役立ちツール
訪問Wordpress ビジュアルエディターTinyMCEで日本語フォント追加 備忘録[3]  人気 最終更新日: 2014-6-1
説明:
■ビジュアル画面のメニューボタンで日本語フォントファミリーが別途指定できない問題
懸案だった表示は、[ビジュアル]画面でも見やすいフォントへ変更できました。

前回の備忘録[2]を参照。
http://mansion.eduplan21.net/cam/mylinks/singlelink.php?cid=6&lid=29

ただ、投稿やページ編集の際に、[ビジュアル]画面上のメニューボタン[フォントファミリー]をクリックしても、プルダウンボタンで表示されるフォントには、日本語フォントは反映されておらず、英語フォントしか選択できません。
WEB上で情報収集して、いろいろ試しましたがうまくいきませんでした。

【手順4】
TinyMCEにフォントを追加できるプラグインがないか探していましたら、[KVTinyMCE Editor Add Fonts]というプラグインが見つかり、試してみたところうまくいきました。備忘録として記しておきます。

?ダウンロード
ダウンロード先:
https://wordpress.org/support/view/plugin-reviews/kv-tinymce-editor-fonts?filter=5

またはサーチ欄に、[KVTinyMCE Editor Add Fonts]を入力して検索
https://wordpress.org/plugins/search.php?q=

?プラグインファイルの修正
・ダウンロードしたzipフィアルを解凍したフォルダーの中に、 ・kv_fonts.php があります。

・UTF-8形式のテキストが編集できるエディターで、たとえば以下のように変更します。
------------------------------------------------
// helps you to add the custom font to your tinyMCE editor.
function kv_add_google_webfonts_to_editor()
{$kv_google_selected_fonts_list = array('メイリヨ','ヒラギノ角ゴ+Pro','MSゴシック','MS明朝','MS+UI+Gothic','Open+Sans', 'Josefin+Slab', 'Arvo' , 'Lato', 'Vollkorn', 'Ubuntu', 'Old+Standard+TT' , 'Droid+Sans' , 'Roboto', 'Oswald' , 'Source+Sans+Pro');
foreach($kv_google_selected_fonts_list as $kv_font) {
$font_url = 'http://fonts.googleapis.com/css?family='.$kv_font.':300,400,700';
add_editor_style( str_replace( ',', '%2C', $font_url ) );
}
}
add_action( 'init', 'kv_add_google_webfonts_to_editor' );

function kv_custom_font_list($in)
{ $in['font_formats']= 'メイリヨ=meiryo;ヒラギノ角ゴ Pro=Hiragino Kaku Gothic Pro;MSゴシック=MSゴシック;MS明朝=MS明朝;MS UI Gothic=MS UI Gothic;Open Sans=Open Sans; Josefin=Josefin; Slab=Slab; Arvo=Arvo; Lato=Lato; Vollkorn=Vollkorn; Ubuntu=Ubuntu; Old Standard TT=Old Standard TT; Droid Sans=Droid Sans; Roboto=Roboto; Oswald=Oswald; Source Sans Pro=Source Sans Pro' ;

$in['fontsize_formats'] = "9px 10px 12px 13px 14px 15px 16px 17px 18px 20px 21px 24px 28px 32px 36px";
return $in;
}
add_filter('tiny_mce_before_init', 'kv_custom_font_list' );
------------------------------------------------
「'メイリヨ','ヒラギノ角ゴ+Pro','MSゴシック','MS明朝','MS+UI+Gothic',」
「メイリヨ=meiryo;ヒラギノ角ゴ Pro=Hiragino Kaku Gothic Pro;MSゴシック=MSゴシック;MS明朝=MS明朝;MS UI Gothic=MS UI Gothic;」が追加部分です。

フォントの拡大間隔は現状のままか適当に増減。
(オリジナルのkv_fonts.phpは別フォルダーに保存しておくとよいでしょう。)

?サーバの /plugins フォルダーへ /kv-tinymce-editor-fontsフォルダー毎アップロードして、[KVTinyMCE Editor Add Fonts]を有効化します。

投稿またはページ編集で[ビジュアル]画面にして、メニューボタンの[フォントファミリー]をクリックすると、追加した日本語フォントが選択できると思います。

実際にある文字列を反転させて日本語フォントを適用すると、[テキスト]画面では、該当日本語フォントのタグが追加されていることが確認できると思います。

管理画面[KvCodes]をクリック、追加した英語フォントは追加リストに表示されますが、日本語フォントファミリーはどういうわけかリストには載らないようです。
実際に使えますので、良しとします。

?うまく表示されない場合は、[KVTinyMCE Editor Add Fonts]と[TinyMCE Advanced]を一度停止(無効)にして、ブラウザのキャッシュをクリアする。[KVTinyMCE Editor Add Fonts]→[TinyMCE Advanced]の順にプラグインを有効にして投稿やページ編集で確認してみてください。

これで、会員の方にもどしどし投稿してもらえるようになると嬉しいのですが…
以上、参考まで。

実施の際は、必要なバックアップを取って、自己責任でお願いします。
-------------
[環境]
WordPress日本語版 Ver.3.9.1
TinyMCE Advanced Ver.4.0.2
KVTinyMCE Editor Add Fonts Ver.1.0
InternetExplorer Ver.10
FireFox ver.29


ヒット数: 1454   評価: 10.00 (投票数 1)
このサイトを評価する | 修正 |リンク切れ報告 | 友達に紹介 | コメント (0)

     |ホ ー ムプライバシーお問い合わせお問い合わせフォームリンクについてリンク集
   
Copyright ©2003-2017, Condominium Administrative Manager MAINO, Edu-Plan Ltd.           
  == 左側メニュー枠が縮小されて歪む場合、【 お気に入り 】エクスプローラーバーを一時閉じて閲覧ください ==