助ボンのパパsheretweetはてブLINEPocketfeedlyワードプレスのカスタマイズやWEB系の記事を書いていると、記事中にHTMLやCSS、jQueryなどのソースコードを埋め込んで表示させることがあります。<pre>タグを使ってシンプルに表示しても構わないのですが、コードの行が増えてくると読みにくくなるので、一般的には以下のようなプラグインを使って表示することが多いです。Highlighterただ、これらのプラグインは高機能で優秀なのですが、高機能であるが故に操作が複雑だったり、ページの表示速度が遅くなったりといったデメリットもあります。そこで僕が使うようにしているのが「Gist」というツールです。「Gist」を使えば以下のようなシンプルで見やすい軽量なソースコードを誰でも簡単に記事中に埋め込むことができるようになるので、ぜひ取り入れることをオススメします。今回の記事では、その「Gist」を使ってワードプレスの記事内にソースコードを埋め込む方法を紹介していきたいと思います。最後に「Gist」とは一体なに?まず、Gistとは何なのか?ということなんですが、簡単に説明すると、Gistは開発者向けのソースコード共有サービス「GitHub」から派生したサービスのひとつです。1ファイル、コードの一部分といった細かい単位でバージョン管理したり、ソースコードの埋め込みコードを取得したりすることができるすっごく便利なサービスになっています。便利なサービスと聞いても、初めてGistという言葉を耳にした人にとって意味が分からないと思いますので、実際に登録して手を動かしながら使い方を見ていきたいと思います。「Gist」の使い方アカウント登録Gistに登録するには、GitHubのページからアカウントを作成する必要があります。入力項目は以下の通り。GitHub」ボタンをクリック。plan」ということで、プランを選択します。free.」のフリープランでOK。(ちなみに月額プランは限られたユーザーにしか見せなせなくない場合に使います。)選択したら「Continue」をクリック。これでアカウントの開設は完了です。登録したEmailアドレスにgistからメールが届くはずです。gist」をクリックしてGistのトップページへ移動してください。Gistの各項目の説明こちらが「Gist」のトップページになります。いくつか項目があるので、一つひとつ説明していきます。descriptionコードの説明文の入力。extension拡張子を含めたファイル名を入力。「test-blog.php」といったように拡張子を付けた名前にすることによって、言語とコードを紐づけてコードを見やすいように色分けしてくれます。作成したソースコードを入力。「Tabs」インデントを「スペース」か「タブ」にするかの選択。「8」インデントしたときの空白の個数を選択。見た目の好みで良いと思います。右端まで来たときに折り返すか折り返さないかの選択。wrap」は折り返さない。warap」は折り返す。gist非公開でGistを作成するときに選択。gist公開してGistを作成するときに選択。file新たなコードを追加。Gistの作成それでは実際に手を動かして、Gistを作成していきましょう。サンプルとして「hover時に拡大する」というGistを作ってみます。スタイルシートファイルですので拡張子を.cssにしてファイル名を作成しコード欄を入力。gist」をクリックして保存します。Gistを記事に埋め込む次に、先ほど保存した「Gist」をWordPressへ埋め込んでいきたいと思います。「Gist」を作成したら以下のような画面に移動するので、右上にある四角いボタンをクリックしてください。クリックするとGistで作成したタグがコピーされるので、WordPressの投稿画面のテキストエディターを選択して、任意の場所に貼り付けてください。以下のように表示されていれば「Gist」を使ったソースコードの貼り付けは完了です。最後にいかがでしたでしょうか。プラグインを使った場合に比べると派手さはないですが、シンプルに表現されて見やすいのではないでしょうか。色分けができていないなどの不具合があった場合は、ファイル名に「拡張子」が含まれていない可能性がありますので、もう一度チェックしてみてください。助ボンのパパ奈良県在住の2児のパパ。完全なる文系人間ですが、管理人のノンシュガーマンにそそのかされてWordPressやIllustratorなどを勉強するようになりました。このブログでは、それらで勉強したことや、趣味、読書、それから奈良のことなどを綴っていく予定です。サンダルが良いこと尽くめな件。