WordPressの投稿記事で、ちょっとしたソースコードを表示したいときに使えるHTMLタグ<code>と<pre>を紹介します。
プラグインでコードを表示する方法もありますが、プラグインは増やしすぎるとサイトが重くなるなどのデメリットがあります。
コンテンツ
HTMLはテキストエディタで入力できる
WordPressでは、投稿画面のテキストエディタでHTMLを入力できます。
実際にテキストエディタでこのタグで<strong>文字が強調</strong>されますと打ち込んでみましょう。
「プレビュー」から確認すると、このように表示されます。
半角の「<>」の表記方法
半角の「<>」などの特殊文字を表示するには、割り当てられた表記方法があります。
| 表示したい記号 | HTMLで入力する文字列 |
|---|---|
| < | < |
| > | > |
その他の記号は下記を参照＞＞
特殊文字一覧 – ウェブランサー
たとえばタグ<strong>を文字として表示するには、テキストエディタにはこのように表記します。
プレビュー画面で確認しましょう。
これをふまえて、コードを表示したい場合の入力方法を見ていきます。
短いコードを表示したい場合
<code></code>を使います。
表示例
<strong>テキスト</strong>
テキストエディタでの表記方法
<code><strong>テキスト</strong></code>
テキストエディタの編集画面を開くと、上に「code」と書かれたボタンが表示されます。ここをクリックしてもタグが挿入されます。
テーマにより背景色が設定されていることもありますが、自分で背景色を設定することもできます。
＞＞<code>に背景色を付けたい場合にスキップ
長めのコードを表示したい場合
<pre></pre>を使います。
インデント（行の前にある空白）も編集画面のまま表示されるので、複数行あっても見やすいのが特徴です。
表示例
<table> <tbody> <tr> <th>テキスト</th> <td>テキスト</td> </tr> </tbody> </table>
テキストエディタでの表記方法
<pre> <table> <tbody> <tr> <th>テキスト</th> <td>テキスト</td> </tr> </tbody> </table> </pre>
<code>に背景色を付けたい場合
表示例
<code></code>
テーマによっては<code>タグの背景色がデフォルトで設定されていますが、もしなければ設定するとより分かりやすくなります。
追加CSSから<code>を装飾
WordPressダッシュボードの「外観」→「カスタマイズ」を選択
プレビュー画面が右に、メニューが左に出てくるので「追加CSS」を選択（テーマにより違う可能性がありますが下の方にあります）。
下記のコード（画像下でコピペ可能）を書いて「公開」をクリック
【コードの詳細】
code {
background-color: #eee;
border: 1px solid #ccc;
}
今回は背景色に加えて周りに枠線を付けていますが、枠線がなくてもいい場合は
border: 1px solid #ccc;を削除します。
特殊文字の表示を気にせずソースコードをWordPressの記事に埋め込みたい場合は、下記でプラグインを使ったソースコード表示方法も紹介しています。
http://pulpfingers-com.check-xserver.jp/878
