クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

WordPress Gistでブログにソースコードを貼り付けよう

f:id:clrmemory:20170422152654p:plain 

CやC++、HTMLにphpなどのコードをブログに貼り付けたい時はありますよね。

そのような時に使えるのが、GitHubのGistです。

 

今回は、簡単にブログでコードを表示する方法を紹介します。

(ブログに貼り付けたいコードはあらかじめ用意しておいてください。)

 

 

 

GitHubとは

 

GitHubはほとんどのプログラマが使っているサービスです。

ここにコードを載せておくことで、チーム内でのコードの行き来が楽になります。

さらに、コードを管理際のにも使えます。

 

広告サービスのマニュアルスクリプトにも使われていたりするので、個人でプログラミングをしている方もぜひ使ってみてください。

 

Gistとは

 

GitHubの紹介が済みましたので[Gist]の紹介に入ります。

Gistは作成したスクリプトをGitHub内に保存するというサービスです。

 

 

これを使うことでブログなどにコードを表示させることができます。

このサービスをお勧めする理由は、「自分が作ったコードをペーストするだけで良い」「インデントが自動で下げられる」「コードに色がつく」などありますが、何より使い方が簡単というところにあります。

 

Gistの使い方

 

こちらからGistのページにアクセスしましょう。

「Filename Including extension ,,,」という欄にコードの名前をつけます。

 

コードの名前に拡張子をつけることで、ブログなどに表示させた時に色が付きます。

詳しくは以下のページからどうぞ。

 

https://clrmemory.com/wordpress/gist-code-color/

 

 

コードの入力が完了したら「Create secret gist 」を選択します。

ここで「Create public gist」を選択すると、冒頭で話したようにGistを使っている他のユーザーにもコードが見えるようになります。

ブログなどで使う時にはsecret gistを選択しましょう。

ブログにコードを貼り付ける

 

Gistで作成したコードをブログに貼り付けるには、コードのURLを取得します。

Create secret gist を選択すると以下のようなページになるので

 

 

「Embed URL」にあるコードをコピーしておきましょう。

(頭に http:// と付いていない方です。)

 

 

次は自分のブログにアクセスします。

記事編集画面内でソースコードを表示してください。

 

WordPressでは、ツール > ソースコードを選択すると開くことができます。

<p></p>や<br></br>がたくさん書かれていると思いますが、これが改行や段落のコードです。

 

<p> 表示したいコードのURL </p>となるように先ほどコピーしたURLを貼り付けましょう。

 

プレビューなどで確認してみてください。このように表示されていれば成功です。

><

 

 

まとめ

 

Gistがとても簡単だということがおわかりいただけましたでしょうか。

これだけ簡単なサービスが登録なしで色付きのコード、しかも無料というのは素晴らしいと思っています。

 

Gistを使うことでブログ内に作成したスクリプトを表示できるようになります。

 

これまで頑張って入力していた人は、Gistで作ったコードをブログに載せるととても見やすくなるので、必ず使ってください。

 

ではまた。

新着記事