昨日の投稿でコードを表記する際に<code>タグで囲っただけでしたので、表示がなんとなくいまいちでした。
それがこちら。
これではかっこわるいし親切でないのでGitHubの【Gist】を使用してきれいにコードを表示してみたいと思います。
手順
１．GitHubのアカウントを作成（ない場合）
２．Gistを開いてコードを記入する
３．作成したものをWordPressの投稿に張り付ける 以上の手順になります。
では以下で詳細を説明します。
１．GitHubのアカウントを作成（ない場合）
とりあえずみんな大好きGitHubに飛んで、アカウントを作成します。
「Sign Up」をクリックして、必要事項を記入します。
GitHub使われたことのない方は、便利すぎるので今後のためにも作成されたほうがよろしいかと思われます。
（大体のIT屋であれば導入していると思われます。）
２．Gistを開いてコードを記入する
アカウントを作成したら、ホームに戻って画面右上の「＋」から「New gist」を選択します。
（例によってGitHubさんがデザイン変更されると位置が変わりますが「gist」は大体似たような場所にあると思われます） 
次にWordPressの投稿に表示したいコードを書き込んでいきます。
一応画像と同じものを文字に起こしておきます。
①このコードの説明を記入する場所です。
日本語でも大丈夫です。
②ファイル名を記入します。
拡張子を指定した方がわかりやすいです。
③コードの記述場所です。
④インデントの指定をする場所です 「Space」か「Tab」のお好きな方を選べます。
⑤インデントが「Tab」の場合、幅を選択できます。
⑥No wrap：右端に来ても折り返さない。
Soft wrap：右端に来たら折り返す。
⑦Create secret gist：このコードを公開します。
Create public gist：：このコードは非公開とします。
完成したら、⑦の「Create secret gist」か「Create public gist」のどちらかを選んで保存します。
保存したら、下記のアイコンをクリックするとクリップボードに表示用のコードがコピーされます。
３．作成したものをWordPressの投稿に張り付ける
あとは２でコピーしたコードを投稿したい記事にペーストするだけです。
実際に張り付けたものが下記になります。
表示できているでしょうか？
大分それっぽく表示できるので、<code>タグで囲って表示するよりもはるかに良いですね。
コメントを残す