Bloggerの投稿にソースコードを貼り付ける方法を写真で解説【GitHub Gist】

前回でリニューアルをしたこのブログ。素のテーマの状態だと物足りない面もあるので少しずつ手を入れていこうと考えているのですが、今後はそうしたコード等もブログに載せていこうと思い、手段を色々と探しました。
ブログの投稿にソースコードを貼り付ける方法は幾つかあるものの、手軽さと分かりやすさではGitHub Gistを利用するのが一番だと私は感じました。
そこで今回は、GitHub Gistを使ってブログにコードを載せる手順を自分なりに解説していきたいと思います。

※Google および Google ロゴは Google LLC の登録商標であり、同社の許可を得て使用しています。

1. まずは GitHub Gist にアクセス

GitHub Gistへのリンク → GitHub Gist（クリックしてください）

GitHub Gistの画面。ログインしなくても使えます。

2. ブログに載せたいコードを中央の欄にペースト

サンプルとして、このブログの3行のHTMLコード（metaとtitle要素）をペーストしてみます。

※スクリーンショット

この3行を

1の横にペーストして、こんな感じに（赤枠で囲った部分）。

3. 次は右下の Create public gist ボタンをクリック

次は右下のボタンをクリック（その左にある黄色い「Create secret gist」でも可。違いは検索対象になるかならないか）。

4. 画面が切り替わり、埋め込み用のコードが生成されます

この画面になったら、赤い枠で囲ったボタンをクリックしてください。ブログにコードを埋め込むためのコードがクリップボードへコピーされます（その左にあるコードを全選択してコピーでも可）。

5. コピーされたコードをブロガーの投稿の入れたい場所へペースト

(C) Google

コードをペーストする際の注意点として、必ずHTMLモードでペーストしてください。また、ペーストが済んだらプレビューで確認することをお勧めします。

5. 出来上がり

こんな感じになります。

6. 慣れたらコードに名前（ファイルネーム）を付けてみる

ファイルネームは無くてもコードを生成できるので問題はないのですが、見る人に対してコードの概要を伝えるにはファイルネームがあった方が良いと思います。

ファイルネームは赤線で囲った欄に入力してください。今回はサンプルコード01と入力して、先ほどと同じコードを生成してみます。

となります。先ほど貼り付けたコードと比べてみると、グレーの欄にある文字が変わっているのが分かると思います。

【注意点】投稿の作成モードでは GitHub Gist のコードは見えない

作成モードでは、赤い枠に囲われた二つの段落の間にあるGitHub Gistのコードは見えません。
すぐ上にあるGitHub Gistのコードと比較してみて下さい。
(C) Google

先ほどGitHub Gistのコードを貼り付けるにはHTMLモードにする必要があると書きました。HTMLモードで貼り付けたGitHub Gistのコードはプレビューでは確認できるものの、作成モードでは全く見えません。これは仕様なので、見えないからといって慌てないでください。

以上です。