猿でも出来る。はてなブログでプログラミング言語（ソースコード）を囲って表示させる方法

今回ははてなブログでソースコードを載せる方法をご紹介します。

ワードプレスは超簡単なんですけどね。

はてなブログを使っていた時にめちゃめちゃ苦戦しまして・・・笑

お恥ずかしい話、そもそも『ソースコード』という言葉すら知らなかったんです。笑

ようは下記みたいなやつです。

<script type="text/javascript"><!--
var domain = "http://danblog.hatenadiary.jp";
var path = location.pathname;
var url = domain + path;
location.href=url;
// --></script>

var domain = "http://danblog.hatenadiary.jp";

var path = location.pathname;

var url = domain + path;

location.href=url;

// --></script>

（現在はワードプレスを使用。上記はソースコード表示できる機能を使って表示させています。）

というわけで、はてなブログを利用されている方であれば誰でも分かるようご紹介。

僕みたいな方は多いはず！

直打ちでソースコードを打つと当然こうなる。

こんな記事書いておいて難ですが、別にソースコードを表示させたいだけなら直打ちも一つの手です。

↓直打ちで記入した場合。

ただただ、そのまま打ち込んでます。

僕はこれでも分かればいい派なのでこれでも全然いいんですが、他のブログみてて直打ちしている方がいない。（笑）

プログラミング素人なんで全然分からんが直打ちすると何か悪影響あるのかな…。

でも直打ちだめ！なんて記事見たこと無いし。

もしご存知な方いましたらTwitterからDMください。（笑）

Twitterのアカウント/とでぃー

まぁ多分、見た目カッコいいからですよね。笑

HTML編集を利用して囲うべし。

必死にみんながどうやって囲っているのか調べました。

いくつか方法はあるみたいです。

今回はその中から「僕でもできそう！」って思ったものを一つご紹介します。

結論、はてなブログ内のHTML編集を利用します。

手順は以下の通りです。

1.HTML編集で<pre><code>タグを作成する

うわ…。なんだよHTMLって…。使ったことない。。。

という方。ご安心ください。

僕もそうでした。そして何も分からなくて大丈夫です。

まずは、下の写真と同じようにHTML編集内に記載してみてください。

はい！書けましたか？

※見たまま編集に記載しないよう注意！HTML編集です。

<pre></pre>と<code></code>という文字を打つだけです！

これにはどういう意味があるか1分解説！

[box class=”blue_box” title=”<pre>タグ”]

<PRE>タグはPreformatted Text（整形済みテキスト）の略で、<PRE>～</PRE>で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示します。

ただし、Internet ExplorerやNetscapeなど多くのブラウザでは、<PRE>～</PRE>の範囲内でも < と > は特殊文字として解釈されるので、< と > に置換する必要があります。

参照元：http://www.htmq.com/html/pre.shtml

[/box]

[box class=”red_box” title=”<code>タグ”]

<CODE>～</CODE>で囲んだテキストが、プログラムのソースコードであることを意味します。 Internet ExplorerやNetscape Navigator等の一般的なブラウザでは、等幅フォントで表示されます。

インデント（字下げ）や改行をそのまま表示させるときには、<PRE>～</PRE>で外側を囲みます。

出典：http://www.htmq.com/html/code.shtml

[/box]

なんのこっちゃ分からんですね。笑

要はこの< >をHTMLタグといい、HPを動かすための指示器の役割を果たします。

この中に指示したいワードを入れて指示するわけです。

でHTMLタグは< > </ > ←このように表示させたい文字を囲わないとちゃんと認識されません。

ここテスト出ます。

はい、40秒経過。続けますね。

そして、今回指示したワードが<pre>というタグと<code>というタグ。

この二つを合わせると「このタグ内のソースコードをみんなに見せたいから表示させて！」という支持を出した事になるのです。

とりあえず真似して作成みてください！

百文は一見にしかず！

2.見たまま編集で載せたいソースコードを記入

次は『見たまま編集』で載せたいソースコードを記入します。

できましたでしょうか。

ここで何故わざわざソースコードだけ『見たまま編集』なの？

って疑問に思う方はいらっしゃると思うので、ちょこっと補足。

だって「HTML編集で作成したタグ内に直接打ち込めばよくね？」って感じですよね。

わかります。僕も直接『HTML編集』に打ち込みました。

はい。さっき記述したpreタグ、codeタグの中にちゃんと記載しました。

ただ、問題はプレビューで確認した時です。

え。囲いはあるけど・・・・

ソースコード消えた。爆笑　という事態が発生したんですね。

なので、『見たまま編集』に載せたいソースコードを打ち込んでください。

3.記入したソースコードをHTMLタグ内にコピペする

はい。ラストです。

先ほど『見たまま編集』で記入したコードを『HTML編集』で見てみましょう。

すると、お分かりでしょうか！

実は直接打ち込んだコードと若干変わってます。

これが先ほど『HTML編集』だと表示されなかった原因。

これでオッケーです。

あとは

前後に付いている<p></p>タグを消してソースコードをコピー。
先ほど作成した<pre><code></code></pre>タグ内にペースト。

これで終了です。下の画像を参照に囲ってみてください。

これでOK。

お疲れ様でした。

それでは、一緒に一度プレビューで確認してみましょう。

はい。ちゃんとソースコードがグレーの枠に囲まれてます。

コードの色を変えたりする方法もあるみたいですが、僕は「プログラミング何も分かんねーがとりあえずソースコード載っけたい！」って感じだったので、これで十分。笑

それではまた。