【ブログ役立ち】Bloggerでソースコードを載せる方法

ブログをはじめるときに、どこの無料ブログを使うのが良いかはかなり悩みますよね。ブログをやる以上やはり収益化をしたい所ではありますし、書いていてストレスがない所が良いですよね。

かといって自分でドメインを取得したりサーバを借りたりするってのもなかなかに面倒臭いです。

個人的におすすめなのが、私も使っている「Blogger」というサービスです。このサービスは使い勝手が良く個人的にも使用感はかなり良いです。

他のブログでは私はプログラミング系のブログを書いているのですが、その場合にはどうしてもソースコードを載せたくなるのが常です。そのままブログにべた書きでもよいのですが、どうせならかっこいい文体の方が良いではありませんか。

そこで今回は、Bloggerでプログラミング系のブログを書く際にソースコードをきれいに乗っける方法について紹介していきたいと思います。

Bloggerでソースコードを貼る方法は非常に簡単です。手順としては、普段のBloggerの記事の編集画面に行き、一番左の鉛筆アイコンをクリックするとHTMLビューと、作成ビューというのを選ぶことができます。

Bloggerだと普通にブログを書いている画面が作成ビューに相当します。この部分をまずHTMLビューに変えます。そうすると何やらよくわからないコードの羅列が出てきます。

その中で自分がソースコードを挿入したい箇所に下記のコードを入力して、その中に書きたいソースコードを入れてあげればよいです。私の場合pythonのブログをやっているので、lang = pythonになっていますが、この部分は個人の書いているプログラミング言語のソースコードに依存します。

<pre class="prettyprint lang=python">

書きたいソースコード

</pre>

試しに私のブログの一部のソースコードを入れてみるとこんな感じになります。

print('hellow world')

こんな感じの文章を入力することができます。意外と簡単ですよね。入れる場所を間違えるとエラーを吐いてHTMLビューの変更が反映されない場合があります。

たいていの場合であれば、ソースコードを入れたい箇所らへんをたくさん改行しておいて、HTMLビューを開くと、<div>っていうコードが見つかると思いますので、先ほどのコードをこの<div>の直後に貼り付けてやってしまえばだいたいうまくいくと思います。

ブログを書くとなると、やれドメインだサーバだといろいろ面倒な手順が含まれてしまい、敷居が高くなりがちではありますが、単に始めるだけであれば、無料のブログサービスで十分だと甘味は考えています。

BloggerはGoogleがやっているサービスなのでつぶれることはきっとないはずだし、テーマやテンプレートも探せばシンプルで使いやすい奴が転がっているし、プログラミング系のブログで必須なソースコードの貼りつけだって簡単にできるので、最初にわざわざ初期投資を払ってまでブログを始める必要はないかなと思います。