この運営ブログのタイトルを、「dtn開発運用日誌」から「dtn.jp運営ブログ」に変更しました。

ブログタイトル変更に伴い、このブログで利用しているWordPressのテーマEmanonで一番引っかかっていたところ、ソースコードなどを記載するコードブロックのデザインを変えるため、Highlighting Code Blockというプログラムのコードを言語別で見やすく表示できるプラグインも追加をしました。

この記事では、ブログタイトル変更の流れや、Highlighting Code Blockの使い方についてご紹介したいと思います。

ブログ名の変更

この運営ブログのブログタイトルを「dtn開発日誌」から「dtn.jp運営ブログ」に変えました。

日誌どころか年誌にすらなっていなかったところがはずかしくなり、日誌という単語は外そうと考えたことがきっかけでした。いつ変更したかも全く覚えてはおりませんが、2019年の前半頃には変えてしまっておりました。

WordPressのブログタイトル変更

WordPressでのブログタイトル変更は恐ろしく簡単で、管理画面にログイン後、設定 → 一般 → サイトのタイトル に入力するだけで簡単に変更ができてしまいます。変更後はパンくずリスト等もしっかり変わってくれるので、あっという間にブログ名を変更することができます。

もちろん、アクセスが多い人気ブログさんであれば、ブログ名変更は一大事でしょうが、ブログタイトルでの指名アクセスすらない過疎ブログなので、気楽にやれてしまうのが悲しいところです。

ブログタイトルをdtn.jp運営ブログに変更しました
新しいブログタイトルは「dtn.jp運営ブログ」です

このブログのテーマ

ブログタイトルのご紹介ついでに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;
}

無料版ではかなり多くの機能に使用制限がかかっていますが、有料版購入を考えるほどに訪問者が増えておりませんので、当面はこの無料版で頑張りたいと思います。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。