はじめに
WordPressでIT関係の記事を書いていると、プログラムコードを書くことがあります。今までは追加設定やプラグインが面倒だったので<i></i>で囲っていたのですが、見づらいですよね。残念なことにTHE THORにはプログラムコードをきれいに載せるタグがないようなので、自分で実装してみることにしました。
今回の実装方法はプラグインはなし、カスタムCSSの記述のみ（ブログ執筆時にタグで囲む必要はあります）です。よって変にプラグインを入れることなく、タグで囲むという運用でカバーする形で実装します。
流れ
以下の流れです。基本的にやることとしては追加CSSに追加するだけです。
- 追加CSSにpreタグ及びcodeタグを追加します。
- 記事の執筆時に<pre><code> ****** </code></pre>と書きます。
追加CSSへタグを追加
以下の通り「外観＞追加CSS」を開きます。
下記コードを末尾に追加します。
（実際に下記のように表示されるようになります）
code { background-color: #f5f5f5; padding: 5px; border-radius: 3px; font-family: 'Courier New', Courier, monospace; }
pre { background-color: #f5f5f5; padding: 10px; border-radius: 5px; overflow: auto; }
記事の執筆時
ビジュアル状態でブログを書いている場合、コードを入力してから「テキスト」タブにて 以下のように<pre><code></code></pre>で囲います。
これで対応完了です。毎回毎回タグで囲う必要はありますが、プラグインなしで対応できるのはメリットかと思います。
おわりに
いかがでしたでしょうか。Wordpressにてプログラムコードを載せたいとき、プラグインなしで記載する方法についてご紹介いたしました。タグで囲うため一手間かかりますが、むやみにプラグインを増やしたくないという方にはお勧めの方法です。またブログタイトルに「THE THOR」と書いておりますが、もちろんWordpressのテーマに限らず対応できます。