【WordPress】文中のコードのフォントを変える、枠をつける

Wordpress

今回は、文中のコードのフォントの変更方法、枠をつけて目立たせる方法をまとめています。

WordPressの初期設定のまま文中にコードを書くとprint(‘hello world’)のようになってしまい少し読みづらいです。そこで、Qiitaの記事のように、コードをprint('hello world')の形式で表示させ、コード部分を目立たせたいと思います。

なお、記事内に長めのコードを挿入する方法は以前の記事で解説しています。

Crayon Syntax Highlighterを使って記事内にソースコードを表示させる方法

フォントを変える

まず、文中のソースコードの部分をプログラミング用のフォントに変えたいと思います。

Google Fontsからフォントを選ぶ

Google Fontsは、無料でたくさんのWebフォントを使えるサイトです。Webフォントは、どのデバイスからページにアクセスしても同じように表示されるので、オススメです。

ここでは、プログラミング用のフォントとして、Source Code Proというフォントを使うことにします。

+ボタンを押すと、右下に詳細が表示されます。

EMBED→Embed Fontの赤枠で囲った部分のコードをコピーします。

header.phpの編集

外観→テーマエディターに移動し、header.phpを開きます。

<head>〜</head>までの好きな部分に、先ほどコピーしたコードを貼り付けてください。

※header.phpが見当たらない場合はこちらを参考にしてみてください。

【Cocoon】テーマエディタにheader.phpを追加する|ロリポップ!ユーザー向け

style.cssの編集

続いて、EMBED→Specify in CSSの赤枠部分のコードをコピーします。

外観→テーマエディターに移動し、style.cssを開きます。

style.cssに文中のコードに適用するクラスを新たに作成します。新しく作成したクラスに先ほどコピーしたコードを貼り付けてください。

変更を保存して閉じます。

コードを書いてみる

ここまで終わったところで、投稿編集画面に移動し、どのように表示されるか確認したいと思います。

カスタムHTMLで、以下のコードを記載し、プレビューで確認してみてください。

コードのフォント部分が先ほど指定した、Goole Fontsのものに変わっていればOKです。

※ ソースコードを書くときはcodeタグで囲みます。

枠、背景の編集

フォントは変更できたので、次は、背景を変えたいと思います。

外観→テーマエディターに移動し、style.cssを開き、先ほど作ったクラスに追記していきましょう。

このように、背景色をグレーにするとQiita風になります。print('hello world')

枠で囲む場合は以下のようにします。

このように、背景色をグレーにするとQiita風になります。print('hello world')

タイトルとURLをコピーしました