Gistの使い方!ソースコードをブログ記事に貼付・表示させる方法

お元気ですか。Hodaです。

HTMLやCSS、JavaScriptなどのソースコードをブログの記事に掲載しようと思い、Gistというサービスにたどり着きました。

この記事では、共有したいコードをブログへ張り付け、表示させる方法をまとめます。

Gistとは

Gistとは、GitHubが無料で提供しているWebサービスです。

プログラミングソースをブログ記事に埋め込み、表示させることができます。

登録したソースはGistの掲示板「Discover」で公開することも可能です。

GitHubのアカウント登録

GitHubのホームページ

Gistを使うには、GitHubにサインアップする必要があります。

GitHubのホームページへ行き、Sign Upボタンを押してアカウントを登録しましょう。

ユーザー名とメールアドレス、パスワードを入力し、アカウント作成ボタンを押すと、入力したメールアドレス宛に確認メールが届くので、指示にしたがって登録を済ませます。

 

Gistへアクセス

アカウント登録が済んだら、サインインしてGistのページへ行きましょう。

GitHubホームページの上部にリンクがあります。

 

 

 

Gistの使い方

Gistのページへ行くと、次のような画面が表示されます。

gistの使い方

 

Gist description

……コードの説明文を入力します。

Filename including extension

……分かりやすい名前を付けてあげます。

Create secret gist

……Dicoverには非公開、プライベートに保存します。

Create public gist

……Discoverに公開して、コードを共有保存します。

 

真ん中のテキストエリアにコードを入力し、Createボタンをクリックします。

コードが保存され、埋め込み用のスクリプトをコピーできるようになります。

「Embed」を選択し、コピーしてあなたのブログ記事へ張り付けましょう。

gistの使い方

まとめ

Gistを使った、ソースコードの埋め込み方法をまとめました。

とても便利なサービスですよね。

あなたも是非、使ってみてください。

それではごきげんよう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください