解説系の記事を書いていると、HTML のタグや、JavaScript、スタイルシートなどのソースコードを埋め込んで紹介したくなるときがあります。
この記事ではそんな時に使える、簡単にコードを貼れるタグ、ウェブサービス、おすすめのプラグインを紹介していきます。
簡単にコードを貼れるタグ
まずは簡単にコードを貼れるタグを紹介します。
HTML ではコードを貼る時に、<pre> タグを利用するのが一般的です。<pre></pre> に囲まれたコードは、スペースや改行などがそのまま表示されますので、コードを貼るときに便利です。
プラグインなどを使うまでもない、ちょっとしたコードを貼るときに利用してみてください。
<pre></pre>
<p>シンプルな状態</p>
なにも変更せずにシンプルな状態で <pre> タグを利用すると、上記のような表示になります。
<pre style=”color: #ffffff; background-color: #000000;”></pre>
<p>黒色の背景に白文字</p>
背景を黒くして白文字で内部を表示する <pre> タグです。強調されて文字も見やすくなります。プログラマーの方が運営されているブログの場合は、コマンドプロンプトのコマンドを紹介する際などに利用すると、わかりやすいのではないかと思います。
ただし長いコードを入力すると…
<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>
横向きのスクロールバーが表示され、スクロールしないと全文が見えなくなってしまいます。見にくい上に、コピーしてコードを利用してもらう場合に選択しづらいため、読者に余計な手間をかけることになってしまいます。
<pre style=”color: #ffffff; background-color: #000000; overflow: auto; white-space: pre-wrap; word-wrap: break-word;”></pre>
<p>abcdefghijklmnopqrstuvwxyz 0123456789 abcdefghijklmnopqrstuvwxyz 0123456789abcdefghijklmnopqrstuvwxyz 0123456789</p>
そこでおすすめしたいのが、この <pre> タグです。適当なところで自動で折り返すようになっていますので、選択がしやすくコピーも簡単です。このブログでもよく使っているタグなので、よければ使ってみてください。
黒背景が気に入らない場合は color: #ffffff; background-color: #000000; を削除して利用してください。
Gist – ウェブサービスを使う
コードを埋め込んで貼り付ける場合、これが一番おすすめの方法です。
ちょっとしたものだと、<pre> タグで十分なのですが、長いコードを貼りたいときは、専用のサービスを利用すると、埋め込んだコードに色がついて綺麗に表示され、とても読みやすくなります。
プラグインに比べると少し手間はかかるのですが、プラグインをインストールしなくて済むので、WordPress が無駄に重たくならないというメリットもあります。
ここで紹介している Gist は GitHub が運営している、手軽に各種コードを管理できるウェブサービスです。
Gist でコードを貼り付けるとこんな感じになります
| jQuery(function(){ | |
| jQuery('[data-slide-contents]').click(function(event) { | |
| event.preventDefault(); | |
| var slideContents = jQuery(this).data('slide-contents'); | |
| jQuery('#' + slideContents).slideToggle(400); | |
| }); | |
| }); |
バージョン管理もできるので、過去のコードをチェックすることも可能です。コードを編集した後に、あれ、前のコードどんなだっけ？ということがなくなります。
Gist を利用するには、GitHub のアカウントが必要になります。アカウントの作り方から解説しますので、Gist を利用してみたい方は記事を参考にしながら試してみてください。
Gistの使い方
1. Gist のページに移動する
Gist: https://gist.github.com/
上記のサイトにアクセスして、Sign in と書かれているボタンを押してください。
2. 新規アカウント作成ページに移動する
Create an account. と書かれた部分を押して、アカウント作成ページに移動しましょう。GitHub のアカウントをすでに持っている方は、このページでログインしてください。
3. アカウントを作成する
Username: ユーザーネーム
This will be your username. You can add the name of your organization later.
翻訳：これはあなたのユーザー名になります。後で組織の名前を追加できます。
Email address: メールアドレス
We’ll occasionally send updates about your account to this inbox. We’ll never share your email address with anyone.
翻訳：この受信トレイにアカウントの更新情報を送信することがあります。あなたのメールアドレスは決して誰とも共有しません。
Password: パスワード
Use at least one lowercase letter, one numeral, and seven characters.
翻訳：少なくとも1つの小文字、1つの数字、および7つの文字を使用します。
入力したら Create an account ボタンを押しましょう。
4. Gist を利用する
アカウントを作成したらログインして、さきほどの Gist トップページに移動しましょう。画像のページが表示されたら、コードの説明文・ファイルネーム・埋め込みたいコードを入力しましょう。
ファイルネームは拡張子も一緒に入力してください。html の場合は .html、スタイルシートの場合は .css、JavaScript の場合は .js、こんな感じです。
入力し終わったら、Create public gist ボタンを押しましょう。これは公開用のコードを作成するボタンです。今回は WordPress で公開しますので、secret ではなく public を利用します。
5. 埋め込み用コードを取得する
コードが作成されると、このような画面になります。画像赤線の Embed と書かれた場所に、埋め込み用のコードがありますので、コピーして WordPress の投稿ページに貼り付けましょう。貼り付けるときは、テキストエディタで行ってください。ビジュアルエディタを利用すると正常に表示されません。
6. 完成！
| a { | |
| color: red; | |
| } |
スタイルシートのサンプルコードを埋め込んでみました。
7. 編集するときは？
コードが間違っていて編集したいときは、画像のページに移動して、Edit ボタンを押しましょう。編集用のフォームが表示されます。
Gist のページに移動するときは、埋め込みコードのファイル名のリンク（今回の場合は sample.css と書かれた部分）「sample.css hosted with 
by GitHub」を開いてください。
これまでに投稿したコードの一覧を見れたりもしますので、管理もしやすくなっておすすめです。英語のサイトでアカウントを作成するのは、若干ハードルが高く感じてしまうかもしれませんが、慣れてしまえば簡単なので、ぜひ試してみてください。
コード埋め込みプラグインの紹介
WordPress には、コードを埋め込むためのプラグインがたくさんあります。これらのプラグインを利用すると、最も簡単にコードを埋め込むことができるようになります。それぞれ見た目や使い勝手が違いますので、いろいろ試してみて気に入るものを見つけてください。
高機能なものから、シンプルで軽量なプラグインまで、さまざまなものが揃っています。コードを貼り付けたときのサンプル画像付きで、各プラグインを紹介しています。
最後に
それぞれの方法にメリット・デメリットがありますので、自分の使い方に合った方法を採用してください。
<pre> タグ
メリット：簡単に貼れる。
デメリット：色がつかないのでコードが長いと読みづらい。
Gist（ウェブサービス）
メリット：バージョン管理ができる。これまでに投稿したコードを一覧でチェックできる。
デメリット：アカウントを作らなければならない。<pre> タグやプラグインに比べると手間がかかる。
プラグイン
メリット：最も簡単にコードを貼れる。
デメリット：プラグインをインストールするので WordPress が重たくなる可能性がある。
