Blogger QooQのブログ記事本文にソースコードを掲載する方法

今回は、Bloggerのブログ記事本文にソースコードを掲載する方法をご紹介します。

本記事は、当ブログをBloggerで運営していた時期に投稿しています。
現在はWord Pressで運営していますが、多数のアクセスをいただきご好評いただいている記事ですので、Word Press移行後も引続き掲載します。
現在のBloggerの状況はわかりかねますので、本記事をご参考にカスタマイズされる際はこの点をご了承ください。

Blogger利用時に行ったカスタマイズについては別記事にてまとめていますので、こちらも是非ご覧ください。

Bloggerでブログを運営していた時は、ブログデザインはラムネグさんのテンプレート「QooQ（クーク）」を利用していました。

今回ご紹介する方法はその時に用いていた方法になりますが、他のブログサービスやテンプレートでも利用できます。

ソースコードをブログ記事に掲載する方法

IT系の記事や、ブログカスタマイズ方法の説明記事などでは、記事中にソースコードを掲載して説明したい場合があるかと思います。

その際、ソースコードをブログ記事入力欄にそのまま貼り付けると、当然そのまま記事に反映されて表示されてしまいます。

そのため、記事中に掲載するソースコードは、掲載用の形式に変換する必要があります。

掲載用の形式に変換する

掲載用の形式にするためには、ソースコードに以下の処理を行う必要があります。ソースコードを掲載用に変換するために必要な処理

1番目と2番目はそれぞれ<code>や<pre>をコードの最初と最後に挿入するだけなので簡単です。

問題は、3番目。

「<」「” 」「&」などの特殊文字は、掲載用の表示だとそれぞれ「&lt;」「&quot;」「&amp;」という形式に変換しなければいけません。

長いソースコードの中からこれらの文字をひとつずつ拾って変換していくのは不可能です…。

簡単に変換する方法はないのかと調べてみたところ、ソースコードを変換できるツールがありましたので、以降の内容でご紹介します。

HTMLエスケープツールを利用してソースコードを変換する

ソースコード変換ツールは様々なものが公開されています。

私がいくつか試した中で、最も使いやすかったものは、dounokounoさんのHTMLエスケープツールです。

「変換前」のボックスにブログ本文に掲載したいソースコードを入力し、「変換」をクリックするだけで、変換後のコードが表示されます。

あとは、変換されたコードを全てコピーして、ブログ記事の作成画面に貼り付けるのみです。

これで、どのようなソースコードでリンクが表示されているかを示せるので、ブログカスタマイズの説明の時に、どのようなコードを利用したかを掲載することができます。

「このままコピペして使ってください」という案内もできるようになります。

HTMLエスケープツールを使えばソースコードを変換できる！

以上、ブログ記事にソースコードを掲載する方法のご紹介でした。

ソースコードを掲載するためには掲載用の形式で記事に貼り付ける必要があり、なかなか複雑な処理となりますが、ツールを利用することで一発で簡単に変換することができます。

HTMLエスケープツールを用いてソースコードを変換し、記事に掲載してみてください。