Gistを使ってWordPressに色分けされたソースコードを綺麗に表示させる方法

皆さんは、ブログにコードを表示させるとき、どのようにしていますか？

わたしは今まで、ブログ初心者でそういった類のことが全くわからず、整形済みテキストを使用して表示させていました。

（合っているのかさえ分からず、そうしていました笑）

でも、他のブロガーさんたちのように色や番号を付けて綺麗に見やすく表示させたいと思い、いろいろと調べてみました。

WordPressで専用のプラグインをインストールして表示させる方法もあるようですが、サイトが重くなってしまうということで、何か他に良い方法はないかと思っていたら、ゆこぴんさんの記事を発見！！

ここに出ているGistが良さそうなので、初心者ながら挑戦してみました。

これはあくまでもGistを使用して色分けされたコードをサイトに綺麗に表示するやり方をメモした記事となりますので、Gistを使用するうえでのメリットやデメリットについては触れておりません。

その辺について詳しく知りたい方はゆこぴんさんの記事を参考にしてください。

わかりやすく書かれております♫

初心者のため、すみません（＞＜）

1 アカウントを作成する
2 必要箇所を記入する
3 記事に埋め込む
4 まとめ

アカウントを作成する

まず、Gistを使用するためにはアカウントを作成する必要があります。

検索でGistとやってもうまくこの画面へ行かない場合もあるので、リンクを貼っておきます。

こちらからどうぞ！

Where software is built

任意のユーザーネーム、メールアドレス、パスワードを入力したら、「Sign up for GitHub」をクリックします。

プランを選択します。

デフォルトで「Free」になっていると思うので、そのままでOKです。

「Finish Sign up」をクリック。

これで、アカウント作成は完了です。

必要箇所を記入する

このような画面が表示されていると思います。

必要箇所を記入しましょう。

こちらを参考にしてください。

Gist description

後で自分が何のコードを書いたのかを把握するための説明を記入するところです。

空白でも表示するうえで問題はありませんが、管理する側（自分）としては記入しておいた方が後で見たときラクです。

Filename including extention

言語の拡張子を付けたファイル名を記入しましょう。

ここでいう拡張子とは、「html」「css」「php」など、自分が実際にブログに載せる予定のコードを使用した場所を記入します。

例えば、style.cssにコードを記入した場合は「style.css」と記入します。

「Spaces」「数字」「No wrap」

インデント系の設定が出来ますが、よくわからなければいじらなくてOKです。

コードを記入しましょう。

「Create secret gist」「Create public gist」

非公開か公開かどちらかを選択してクリックします。

ブログなどで公開するとしたら、publicを選びましょう。

記事に埋め込む

すると、きちんと色分けされたコードが表示されると思います。

もしきちんと色分けされていないとしたら、拡張子が間違っている可能性があります。

思いあたる拡張子を入力し、再度試してみてください。

正しく入力すると、このようなカタチに表示されます。

<例・コードの一部分>

コードが表示されたら、こちらのURLをコピーします。

（URLのすぐ右側にあるボタンをクリックするとコピー出来ます）

これを、WordPressの編集画面で自分の記事の表示させたい場所に貼り付ければOKです。

＊「ビジュアル」ではなく「テキスト」に貼り付けてください。

最後に「公開」して確認してみると…

サイト上にコードが綺麗に表示されていると思います。

まとめ

とりあえず、色分けされた番号の付いたコードをサイト上に綺麗に表示させることが出来たので、今回のミッションはクリアです。

ただ、まだちょっとGistを理解しきれていないので、これから色々と勉強したいと思います。

また何かわかったことがあったら記事かきま〜す(=ﾟωﾟ)ﾉ

この記事を読んでいただきどうもありがとうございました！！

またお会いしましょう。