Urvanov Syntax Highlighterでツールバーを日本語化する方法

「Crayon Syntax Highlighter」の後継「Urvanov Syntax Highlighter」に乗り換えましたが（機能や設定は全く同じ。設定は日本語対応もされている）、この機会にツールバーのアイコンメニューも日本語化してみました。

見る人に最もよく使われるのが「コピー」だと思いますが、それだけでも文字のメニューにして視覚的により分かりやすくしたかった、というのがその理由です。

CSSのみで簡単にできたので、その方法をご紹介。

ツールバーを日本語化

新たに 「Urvanov Syntax Highlighter」 に生まれ変わり、設定画面も多くが日本語に翻訳されていたりして、使い勝手上もグンと向上してますね。

ここでツールバーのアイコンも日本語表示にしてみたのが以下。

CSSだけの対応ですが、
以下のCSSを追加すれば日本語メニューに早変わり！

やってることは単純で、アイコン画像を非表示にして、
代わりに before疑似要素で日本語メニューを表示しているだけ。

「② 各メニューの文言指定」でメニュー文言の指定してますが、
好きな文言に変えればOK。

とても簡単に日本語化できるので試してみてください。

ちなみに英語文言のメニューにすると例えば以下のようになりますね。

↓↓↓↓↓↓（このCSSを追加すると）

メニュー文字が見づらい場合

テーマによっては、メニューの文字が見づらい場合もあるようです。
その場合には以下を追加して、文字色や背景色を変更・調整してみてください。

例えば「bncplusplus」というダーク系のテーマでは
メニューが以下のようになりますが．．．

背景色の濃い目のグレーと黒の文字色のコントラストがあまりなく、ちょっと見づらいかも、ということで以下を追加してみたりする。

見やすいかどうかもありますが、好みの問題の方が大きいかも（笑）。

モバイル時の表示

スマホなどのモバイル表示では、日本語メニューがちょっと目立ちすぎる感じがするかもしれません。

またメニューをすべて表示している場合（初期状態から設定を変えてない場合）、メニューがツールバーに全て入りきらず折り返され、実は「すべてのメニューが表示されていない」ということもあります。

表示するメニューの数を減らすのも良いですが（「行番号」（の表示/非表示）とか実際使う機会もなさそうですし）、スマホなど横幅が狭い画面の場合には元々のアイコンメニューを表示にする、としても良いですね。

ここでは画面の横幅が500px以上の場合は日本語表示（つまり500px未満だったら元々のアイコン表示）としている例。

CSSの追加方法について

普通にプラグインとか使ってCSSを追加する場合には、
以下参照してみてください。

【WordPress】CSSやJavaScript,jQueryを簡単追加する方法！プラグインのおすすめ

ただ、ブログ内の記事の多くがHTMLやCSS、PHPなどのコード紹介というわけではなく、たまにそうした記事も書いてるよ、という場合、単にプラグインとか使ってCSSを追加すると全ての記事の表示で「その記事では使われないCSS」が読み込まれるのが気になる、という場合もありますね。（私がそうなんですが笑）

「Urvanov Syntax Highlighter」は、記事内に表示対象のコードがあれば、その記事だけ記事のヘッダにCSSのリンクを入れる、という親切設計。

それを活用すると追加するCSSも、HTMLやCSS、PHPなどのコードを記述している記事だけに読み込まれる、ということができます。

手順は簡単で以下４つ。

• １）「新たなテーマフォルダ」の作成
  • 使っているテーマをコピーを作る（ダウンロードする）
  • フォルダ名称変更
• ２）CSSファイルの編集
  • CSSファイル名の変更
  • CSSファイル内のテーマ名が含まれるセレクタを一括置換
• ３）コードの貼り付け
• ４）「新たなテーマフォルダ」のアップロード

自分専用のテーマを作って、その中に追加CSSを記述する、という方法。

自分専用のテーマを作る場合、プラグインのアップデートがあっても上書きや削除されないので（と「Urvanov Syntax Highlighter」の公式ドキュメントに書いてあるので）安心です。

ちなみにこの１～４の対応時間は、
ファイルのアプロード、ダウンロードに慣れていれば数分レベル。

１～４対応後、「Urvanov Syntax Highlighter」の設定（「設定」⇒ 「crayon」）で作ったテーマを選択すればよいですね。

では１～４の手順について、具体例をちょっと見てみましょう。

１）「新たなテーマフォルダ」の作成

試しにテーマ「classic」をダウンロードして、
これを元に例として「tabibitojin」というテーマを作ってCSSの追加をしてみます。

まず「Urvanov Syntax Highlighter」のテーマのありかは以下。

• ワードプレスのルートフォルダ/wp-content/plugins/urvanov-syntax-highlighter/themes

このテーマフォルダにある「classic」フォルダをダウンロードして、「tabibitojin」という名称へと変更しておきます。

２）CSSファイルの編集

フォルダーにはCSSファイルが含まれるので、まずそのCSSファイルの名称変更。

※）フォルダ名称、CSSファイル名が一致しない場合、テーマとして認識されないようだ

CSSファイル内では「元のテーマのセレクタ」が記載されている箇所は「全て新たなテーマ名に変更」。

テーマ「classic」の場合、セレクタが「.crayon-theme-classic」とかになっているので、テキストエディタで「.crayon-theme-tabibitojin」に一括置換とかすればOK。

※）これを変えておかないと、テーマの文字色などが反映されない

３）コードの貼り付け

最後に追加CSSの貼り付け。
ファイルの最後に貼り付ければOK。

４）「新たなテーマフォルダ」のアップロード

以上ができたら、テーマフォルダーにフォルダごとアップロードしておきます。

最後は忘れずに作ったテーマ（ここでは「Tabibitojin」）を設定で選択して設定保存をしておきましょう。

手順通りできていれば、設定内で表示されるサンプルコードも元のテーマ同様に色付けされ、ツールバーのメニューもアイコン表示ではなく日本語文言の表示になっているはず。

この表示の何かがおかしい、という場合には、手順を戻ってCSSの編集など改めて確認してみてください。

今回のポイント

以前の「Crayon Syntax Highlighter」でもそうでしたが、
文字で表示できる領域があれば、アイコン表示より文字メニューの方が断然分かりやすい。

あまり使わないであろうメニューはアイコンで何気に表示でも良いですが、コピーだけはパッとみて分かりやすくしておくと、見ている人は嬉しいかもと思いつつ日本語化の対応してみました。

ちなみに前身である「Crayon Syntax Highlighter」は phpバージョンが7以上だとエラーが出るようになり、そのため新たに「Urvanov Syntax Highlighter」として生まれ変わったようですが（phpバージョン8.xxでも問題なく動いているようですが）なぜ名前まで変えて別のプラグインにしたのか気になるところ。（”Urvanov”が読めないし笑）

ちょっと気になって調べてみると「Urvanov」は人の名前で、この方が中心になって更新がされない「Crayon Syntax Highlighter」のメンテ＆サポートをし「生まれかわったプラグイン」として提供をするようになったようです。

私のサイトは非常によく使用しているのでサポートと改善を引き継いだ

一瞬何語かな？と思いつつドメイン見ると「.ru」なので、ロシア語になるのかな？

自分も良く使ってるからと言いつつサポートを引きついだ、ということですが、私を含め（私のことはどうでも良いですが笑）多くの方が利用しているプラグインなので貢献度が非常に高くて素晴らしいですね。UrvanovさんはJavaのプログラマーのようですが、これからも更新続けてくれると嬉しいです。

ブログの収益化やネットビジネスについては以下のメルマガを読んでみてください。