TOACHは、女性向けビールマガジンのほかにWhite Horsesというサイトも運営しています。このサイトは、京都のアーティストやカフェ、バー、イベントの中の人を紹介し、その人の「人となり」を伝えることを目的としています。また、京都は外国人旅行者や留学生が多いことでも有名。そこで日本語サイトのほかに英語サイトも用意しています。
White HorsesはWordpressで構築しており、テーマは外国のもの（Fashionistas）を使っているため、日本語版White Horsesにアクセスしたときはもちろん、Wordpressダッシュボードも極力日本語化して使っている。その一環で投稿エディターの日本語フォントを游ゴシックにしたのでその方法を紹介しようと思う。
游ゴシック？
macとwindowsに共通で入っているフォント。今までこういうフォントがなかったため、サイトをmacで見た時はフォントをヒラギノ、windowsならメイリオという様に別々のフォントにするとか、webフォントでどちらのOSでも共通の見た目にするとかしていた。その流れの中で注目されたのが、googleとadobeが共同開発したnoto sans japanese
投稿エディターのフォントはサイトで使われているものと合わせたほうがいいのだけれど、どうせ最終的にはプレビューで確認するから、前から使ってみたかった游ゴシックを使うことにした。
投稿エディターのいじり方
なんのことはない、wordpressは投稿エディターにもCSSを適用できるから、それ用のCSSファイルを書いてアップして、適用させるだけでいい。
参考にしたのはこのサイト↓
WordPressビジュアルエディタの明朝体フォントを変更する方法
それからCSSで游ゴシックを指定する方法↓
1. 投稿エディターのCSSファイルを作る
エディターに游ゴシックを適用するCSSファイルを書く。游ゴシックがパソコンに入っていないとき用のフォント指定も忘れずに。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* フォントを指定するクラス */ body.mceContentBody { font: 13px/1.6 "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif; } .editor-area a { color: #339933; text-decoration: underline; } .editor-area h3 { padding: 3px 13px 6px; font-size: 116%; color: #666666; margin-bottom: 1em; border-bottom: 1px solid #CCCCCC; } |
editor-style.cssという名前でこれを書いたファイルを作り、テーマフォルダの直下にアップロードする。※wp-content/themes/テーマ名 の下に置く。
2. CSSファイルを使う
wordpressのダッシュボードから外観 > テーマの編集 > functions.php と進み、このCSSファイルを適用するコードを書く。
|
1 2 3 4 5 6 |
add_editor_style('editor-style.css'); function custom_editor_settings( $initArray ){ $initArray['body_class'] = 'editor-area'; //オリジナルのクラスを設定する return $initArray; } add_filter( 'tiny_mce_before_init', 'custom_editor_settings' ); |
これで、投稿エディターに游ゴシックが適用される。
