ブログを書いていると、HTMLやCSSなどのソースコードを記事内に埋め込みたい場面がありますよね。
プラグインを使う方法もありますが、プラグインを増やすと競合リスクやサイト速度の低下が心配です。そこでおすすめなのが、GitHubが提供する「Gist」というサービスです。
2026年現在でも、Gistはシンプルかつ無料で使えるコード共有・埋め込みツールとして健在です。この記事では、Gistの基本的な使い方からWordPressへの埋め込み方法まで解説します。
Gistとは
Gistとは、GitHubから無料で提供されている「ソースコード管理・共有ツール」です。主に次の3つのことができます。
- コードのブログへの埋め込み：HTMLのscriptタグ1行で記事にコードを表示
- バージョン管理：コードの変更履歴を自動で記録
- コードの共有：URLを共有するだけで他者とコードをシェア
シンタックスハイライト（色分け表示）にも対応しており、見やすいコード表示が簡単に実現できます。
Gistのアカウント作成方法
GistはGitHubアカウントがあれば利用できます。すでにGitHubアカウントをお持ちの方はそのままログインしてください。
アカウントがない場合は、以下の手順で作成します。
- GitHub公式サイトにアクセス
- ユーザー名、メールアドレス、パスワードを入力
- 無料プラン（Free）を選択して「Continue」をクリック
- メール認証を完了すればアカウント開設完了
Gistの使い方
コードの作成・埋め込み方法
- gist.github.comにアクセス
- 画面右上の「+」をクリックして「New gist」を選択
- ファイル名（例：sample.css）を入力し、コードを貼り付ける
- 「Create public gist」（公開）または「Create secret gist」（限定公開）をクリック
- 作成されたGistページで「Embed」の欄にある
<script>タグをコピー - WordPressの記事編集画面（テキストモードまたはカスタムHTMLブロック）にペースト
これだけで、シンタックスハイライト付きのきれいなコード表示が記事に埋め込まれます。
コード表示の高さを調整する方法
長いコードを埋め込むと表示が縦に長くなりすぎることがあります。その場合、CSSで高さを制限してスクロール可能にしましょう。
WordPressのテーマのカスタムCSS（外観→カスタマイズ→追加CSS）に以下のようなスタイルを追加します。
.gist .gist-data {
max-height: 400px;
overflow-y: auto;
}max-heightの値を変更すれば、表示される高さを自由に調整できます。
2026年のコード表示の代替手段
Gist以外にも、2026年現在では以下のような方法でソースコードを記事に埋め込めます。
- WordPressブロックエディタの「コード」ブロック：シンプルなコード表示が可能（シンタックスハイライトなし）
- Prism.jsやhighlight.js：軽量なJavaScriptライブラリで、プラグインなしでシンタックスハイライトを実装可能
- CodePen：HTML/CSS/JSの実行結果をプレビュー付きで埋め込めるサービス
- AI活用：ChatGPTやGitHub Copilotでコードを生成し、そのままGistに保存して共有する使い方が増加
用途に合わせて最適な方法を選びましょう。手軽さと管理のしやすさではGistが依然として優れた選択肢です。
まとめ
GitHub Gistを使えば、WordPressにプラグインを追加することなく、きれいなソースコード表示を実現できます。アカウント作成からコード埋め込みまで数分で完了するので、ブログでコードを紹介する機会がある方はぜひ活用してみてください。