この運営ブログのタイトルを、「dtn開発運用日誌」から「dtn.jp運営ブログ」に変更しました。
ブログタイトル変更に伴い、このブログで利用しているWordPressのテーマEmanonで一番引っかかっていたところ、ソースコードなどを記載するコードブロックのデザインを変えるため、Highlighting Code Blockというプログラムのコードを言語別で見やすく表示できるプラグインも追加をしました。
この記事では、ブログタイトル変更の流れや、Highlighting Code Blockの使い方についてご紹介したいと思います。
この記事の目次
ブログ名の変更
この運営ブログのブログタイトルを「dtn開発日誌」から「dtn.jp運営ブログ」に変えました。
日誌どころか年誌にすらなっていなかったところがはずかしくなり、日誌という単語は外そうと考えたことがきっかけでした。いつ変更したかも全く覚えてはおりませんが、2019年の前半頃には変えてしまっておりました。
WordPressのブログタイトル変更
WordPressでのブログタイトル変更は恐ろしく簡単で、管理画面にログイン後、設定 → 一般 → サイトのタイトル に入力するだけで簡単に変更ができてしまいます。変更後はパンくずリスト等もしっかり変わってくれるので、あっという間にブログ名を変更することができます。
もちろん、アクセスが多い人気ブログさんであれば、ブログ名変更は一大事でしょうが、ブログタイトルでの指名アクセスすらない過疎ブログなので、気楽にやれてしまうのが悲しいところです。
このブログのテーマ
ブログタイトルのご紹介ついでにWordPressのテーマについて少々ご紹介しようと思います。
フッターのPowered by Emanonはもう消してしまったので分からないかもしれませんが、テーマはSEO内部対策済みWordPressテーマ Emanon 
の無料版を使用しております。
Movable TypeをWordPressにした際、何か無料で使える良さげなテーマがないかと探していたところ、どこかのサイトの紹介で見つけたものがこのEmanonでした。何もせずにそれっぽいデザインが簡単にできてしまうところが気に入り、細かい設定も特に変更せず、今も使い続けております。
気になるところ
このEmanonで一点だけ、デザイン的にどうしても微妙だと思っていたところが、ソースコードブロックのデザインでした。emanonの標準デザインでソースコードを書いてみるとこんな感じになります。
#shutdown -h nowテーマの雰囲気にはぴったりですが、なんだか薄くて、コマンドやソースコードが書かれているという雰囲気がないため、コードをご紹介することが多いため、結構困っておりました。
Highlighting Code Block
そこで、2017年から使っていて今更ですが、ソースコード用のプラグインを新たに追加してみることにしました。追加したプラグインはこちらです。
Highlighting Code Blockの機能
設定からカラーリングを「Light」と「Dark」の2種類で選択できましたが、ダークにすると、見慣れたVisual Studio Codeの画面と似た印象となりましたので、この設定にしてみました。
書き込んだソースコードの言語種類を選択すると、言語に合わせたシンタックスハイライトを自動的にやってくれる優れものです。
先程のshutdownコマンドもHighlighting Code blockで書いてみるとこんな感じになります。言語を選択すると、右上にちょこっと表示してくれるのも分かりやすくてよいです。
#shutdown -h now「ソースコード プラグイン」なんかで調べると、他にもCrayon Syntax Highlighterとかも良さそうでしたが、技術ブログでもないので、ソースのコピー＆ペーストなんていらないので、シンプルなHighlighting Code blockにしてみました。
おわりに
emanonのCSSだと、<code>タグ自体にこんなCSSがかかっており、変なボーダーも出ていたので、border : 0;で上書きもしておきました。
code {
padding: 2px 8px;
border: solid 1px #e2e5e8;
border-radius: 4px;
}無料版ではかなり多くの機能に使用制限がかかっていますが、有料版購入を考えるほどに訪問者が増えておりませんので、当面はこの無料版で頑張りたいと思います。