WordPressの投稿画面にも「Source Han Code JP」を適用したら気持ちよさ増し増し

やべーコーディングフォントｷﾀ━(ﾟ∀ﾟ)━!　オープンソースだとッ！　と話題になった「Source Han Code JP」を僕も愛用のブラケッツちゃんに適用したんですが、

言ってみればWordPressの投稿画面もコードも書くエディタなので、こっちにも書体を当ててみたところなかなかに快適。

ということで、設定メモ。ちな、ビジュアルエディターは切ってますのであしからず。

ざざっとした手順

管理画面や投稿画面にスタイルを当てる場合は、まずはフォントをダウンロード。

Release Fonts version 1.004 (OTF, OTC) · adobe-fonts/source-han-code-jp

で、テーマフォルダの中にeditor-style.cssを作ります。

投稿画面のエディタのフォントサイズを変更する – rakuishi.com

admin_head アクションで、投稿画面にスタイルを差し込みます。

functions.phpに上のコードを記述。

あとはfont-familyを指定してやるだけ。

.wp-editor-area {
    font-family:
        'SourceHanCodeJP-Regular',
        '源ノ角ゴシック Code JP Medium',
        'SourceCodePro-Regular',
        'Source Code Pro',
        Consolas,Monaco,monospace !important;
}

ブラケッツちゃんのデフォルトフォントのSourceCodePro-Regularも別環境で作業するためについでにいれてます。いらなければカットで。

macとwinで書体の識別が変わるからクロスプラットフォームで行きたい場合両方記述が吉。

'SourceHanCodeJP-Regular',
'源ノ角ゴシック Code JP Medium',

winだと書体が細く表示されるのでMedium設定にしてます。

こんな感じ。書体の太さを調節する場合は-Regularの部分をMediumとかお好みで。

ついでに文字の大きさとか、文字の色とか自分好みに変えちゃえばWordPressで記事書くのも快適になります。もともとのデフォルトスタイルが当たってて詳細度とかめんどうなので、!importantでいってます。

まとめ

手順をざっくり

1. フォントダウンロード
2. 管理画面用のCSSを作成・記述
3. functions.phpにスタイル反映用の記述
4. 更新ファイルアップロード

ってとこなので、コピペで済ませれば5分以内かな。

日本語もコードもどちらも見やすくなるので、コード少なめのライターさんにも目に優しくてオススメ。

デフォルトの表示が見にくいなぁ、変えたいなぁって方はスッキリさせてみてはどうでしょうか。ではでは。

文：シンタロヲフレッシュ

はてブ

pocket

twitter