サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、ブログの記事内にソースコードを表示する方法について説明していきます。
ブログ記事内にソースコードを表示する設定をする
Bloggerにおいて、記事内にソースコードを表示する場合には、設定を行う必要があります。
まずは、その設定を行っていきます。
①ブログ管理画面メニューの「テーマ」をクリック
ブログ管理画面メニューの「テーマ」をクリックします。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-i8cpGaPRD-A/W_i27xwsADI/AAAAAAAAKoo/C3YUT2CfX1gedfKk65D8QDwnM8hnEo_4wCK4BGAYYCw/s640/1%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
②テーマ内にある「HTMLの編集」をクリック
テーマのプレビューが表示してある下に「HTMLの編集」とあるのでクリックします。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-IdKYhKHIRys/W_i2-iaubVI/AAAAAAAAKow/wvXQES__3dYq0LrlScn-snUGqDnthsJWwCK4BGAYYCw/s640/2%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
③HTMLコードが表示される
「HTMLの編集」をクリックすると、たくさんのコードが出てきますが、これがブログを「HTMLコード」で表示したものになります。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-FMQXSxcFiMw/W_i3COCqRhI/AAAAAAAAKo4/B4l0iAJFUq49Utz3o2-JUVb-S0TiJO8tACK4BGAYYCw/s640/3%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
④コード内の左上に「head」の表示を確認する
まずは、コード内の左上に「head」の文字があることを確認しましょう。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-pfjDFsvmt8Y/W_i3FkVaRqI/AAAAAAAAKpA/0N8W-1Gb9JUIqk8SqhccPts3hLBxZbkNACK4BGAYYCw/s640/4%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-IkkqM8NJs4Q/W_i3IJaTQAI/AAAAAAAAKpI/KHJZVYZrn30gdQbmbfRy_wWpPl9tS0MtgCK4BGAYYCw/s400/5%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
⑤「head」の下にソースコードを入力
headの下に、ソースコードをコピーして貼り付けてください。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
⑥ソースコードを貼り付けると下のようになります。
実際に、ソースコードを貼り付けたときの状態が下の画像です。
貼り付けたソースコードの上に「 <!–ブログ記事内にソースコードを表示–> 」とありますが、これはプログラミング内のメモ書きみたいなものです。
「 <!–○○–> 」という形で記述したものは、プログラム内にしか表示されません。
メモ書きをしておくと、あとで見直しがしやすくなります。
必要なときには使用してください。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-OVwJ5h8-Fds/W_i3T6czEkI/AAAAAAAAKpc/OpTiVB9pd6k8QtbahfgdLWdPmuLazVRRwCK4BGAYYCw/s640/7%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-sc-IqJw_-wU/W_i3WeyeCSI/AAAAAAAAKpk/k5kxffE8wBEdLbefnKts2qbkMSGCNPpxwCK4BGAYYCw/s640/7%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%25891.jpg)
⑦「テーマを保存」をクリック
作業が終了したら、「テーマを保存」をクリックします。
これで、記事内にソースコードを表示するための準備が完了しました。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-_nTM-Vsrw4Q/W_i3ZY8wpgI/AAAAAAAAKpw/fOWYiSZTFAkfja0rPIxqWHZOavz1SsLLwCK4BGAYYCw/s640/8%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
実際にブログ記事内にソースコードを表示してみる
前項で、ブログ記事内にソースコードを表示する準備ができましたので、次は実際にソースコードをブログ記事内に表示してみましょう。
ソースコードを表示させるには、HTML入力画面で作業を行っていきます。
今回は、下に表示させているソースコードを表示させてみます。
main(aaa) { std::bbbb << “pretty print” >>}
①ブログ管理画面メニューの「新しい投稿」をクリック
まずは「新しい投稿」をクリックして、記事作成画面を開きましょう。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-dILXDUYPCfk/W_i3gEmxkVI/AAAAAAAAKp4/ZNlQ4PTJ_0stns2H_RCbbBOkW62ytp9hwCK4BGAYYCw/s640/32%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
②どこにソースコードを表示させるか決める
今回は、「ここの下の部分にソースコードを入力する」と「ここの上の部分にソースコードを入力する」の間の部分(青枠部分)にソースコードを表示させたいと思います。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-Cxnoj32OgOI/W_i3jZt7LoI/AAAAAAAAKqA/6WCxXotnZlcxvJSROmEDtBrprLfcq8aJgCK4BGAYYCw/s640/33%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
③画面左上にある「HTML」をクリック
現在は直接入力画面になっているので、HTML入力画面に変更します。
HTML入力画面への変更は、画面左上の「HTML」をクリックすることによって行います。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-8G9pjNLcmg0/W_i3llCBl3I/AAAAAAAAKqM/P7APV43gcKwZKvW_Qg3OEoq9Fretw29jgCK4BGAYYCw/s640/34%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
(HTML入力画面に切り替わったところ)
ソースコードを表示させるにはこの画面で入力を行います。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-frpFan_jcbM/W_i3oYPO74I/AAAAAAAAKqU/PZagDBv9hV0CUadNhFwB_RquXf40EHmmwCK4BGAYYCw/s640/35%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
④ソースコードを入力する
表示させたいソースコードは、下のソースコードの形で入力します。
<pre class="prettyprint">表示させたいソースコード</pre>
それでは、下の画像の赤枠部分にソースコードを入力します。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-TOI511-rti4/W_i3q4UWLNI/AAAAAAAAKqc/YkVgJJUXuqMdFa_Bz2zHamot1qIkO_V4QCK4BGAYYCw/s640/36%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
上の画像の赤枠の部分に、下のソースコードを入力してみましょう。
<pre class="prettyprint">main(aaa) { std::bbbb << "pretty print" >>}
</pre>
上に記述したソースコードが下の赤文字で表示した文字列を表すソースコードになります。
main(aaa) { std::bbbb << “pretty print” >>}
ソースコード内では「<」と「>」が特殊文字で表示されていますが、HTML上にソースコードを入力する場合には、一定の文字は特殊文字を使用して入力する必要があります。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-rmk-jdvcr_M/W_i3tokMUyI/AAAAAAAAKqk/8FHkY5xh85AnqPqvSrsbMs_TzEOKee1vwCK4BGAYYCw/s640/37%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-uN_1h3jAjjM/W_i3w3Oa47I/AAAAAAAAKqw/-vtnTYlLtBQcMiCWISsG5fItl-TXVikXACK4BGAYYCw/s640/37%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%25891.jpg)
⑤「公開」をクリック
ソースコードの入力が終了したら「公開」をクリックします。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-9rbRzFXKo7o/W_i3zt1bdFI/AAAAAAAAKq4/g_kSCQ6ONRkP4h7IQOjOvQ0Rafj2AL13ACK4BGAYYCw/s640/38%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
⑥ブログを表示して確認
きちんとソースコードが表示されているか確認しましょう。
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-ZI9-L4N7jm0/W_i33Q4sUNI/AAAAAAAAKrA/1_yti5lMp9MGlKCbY_VX1gKKBZtsB-VUwCK4BGAYYCw/s640/39%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
![Bloggerで始める無料ブログ:ブログの記事内にソースコードを表示する方法【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-QEFQTkwe3h8/W_i355bqrTI/AAAAAAAAKrI/mDmm3iugQ3cFMOtop0Jic-Ab5R6SiaX6ACK4BGAYYCw/s640/40%25E3%2582%25BD%25E3%2583%25BC%25E3%2582%25B9%25E3%2582%25B3%25E3%2583%25BC%25E3%2583%2589.jpg)
まとめ:今回のおさらい
Bloggerでは、記事上にソースコードを表示させることができますが、それには、最初に設定を行う必要があります。
設定自体はそんなに難しいものではないので、順番に行っていけばすぐに終わります。
設定さえ終わってしまえば、ソースコードの表示は簡単にできるので、興味がある方は行ってみてください。