ブログの内側もデザインしたい!WordPressのエディターで游ゴシックを使う方法。

with コメントはまだありません

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で游ゴシックを指定する方法↓

游明朝体・游ゴシック体のCSSでの利用 – Qiita

 

1. 投稿エディターのCSSファイルを作る

エディターに游ゴシックを適用するCSSファイルを書く。游ゴシックがパソコンに入っていないとき用のフォント指定も忘れずに。

editor-style.cssという名前でこれを書いたファイルを作り、テーマフォルダの直下にアップロードする。※wp-content/themes/テーマ名 の下に置く。

 

2. CSSファイルを使う

wordpressのダッシュボードから外観 > テーマの編集 > functions.php と進み、このCSSファイルを適用するコードを書く。

これで、投稿エディターに游ゴシックが適用される。