【ブログ初心者】プラグインを使うのはもう古い。。簡単にソースコードを記事内に表示させる2つの方法を紹介します

こんにちわ、WordPressテーマ「ストーク」を使っているmaikoです。

みなさん、カスタマイズしたい時とかに他のブログやサイトでソースコードって見たことありますよね？

あの、「コピペokで〜す！！」ってやつです。

でも自分の記事内に書いたことありますか？？

実はソースコードを直接書いても、上手く表示されないんです。。。。

ソースコードを記事内に表示させる

まず、そもそもソースコードとは何ぞや？から。

ソースコードとは？

ブログ初心者にはさっぱりなんのこっちゃ。。。w

※文字で説明するよりも画像の方が理解しやすいと思います
次のように書かれたコードの事を言います。

これは画像です。

表示させる方法が２種類見つかったので説明します。

1　プラグインを使う方法

「Crayon Syntax Highlighter」というプラグインを使う方法があるようです。

実際にやってみました。

「Crayon Syntax Highlighter」をインストールする→インストールできたら「有効化」をクリック。

「ダッシュボード」から「設定」→「Crayon」をクリック

すると「Crayon」の設定画面に移動します。
❈設定画面は英語表記になっていますが設定は超簡単ですよ

設定画面の［Tags］のところのCapture<pre>…にチェックが入っていることを
確認して画面の一番下の［seve changes］をクリックしたら設定は完了です。

それでは実際に記事に表示させてみましょう。

「投稿の編集」でコードを埋め込みたいところにカーソルをあてます。

次に、下の写真のように＜＞をクリックします

クリックすると、下の写真のようにコード編集画面が現れます。

①の赤枠のように表示させたいコードを記入します。
記入したら②の［save］をクリックすると、下のようにコードが記事内に表記されます。

【ソースコード表示の例】

2　プラグインを使わない方法

実は、も〜〜〜っと簡単な方法があったんです！！

説明します。

ビジュアルエディタで記事を書いていきます。

次に「テキストエディタ」に切り替えます。

①の「投稿の編集」でコードを埋め込みたいところにカーソルをあてます。
※テキストエディタのカーソルの位置は、ビジュアルエディタのカーソルの位置を引き継ぎます

②のcodeをクリックして表示させたいコードを記入します。

コードを記入して、/codeでコードを閉じたら下のようにソースコードが記入できました。

【ソースコード表示の例】

/* デバイス幅が768px以上の場合にマガジン風レイアウトを3カラムにする */
@media only screen and (min-width: 768px) {
.post-list-magazine .post-list{
width:33.333%;
}

まとめ

記事内にソースコードを記入し表示させる方法は２種類あります。

1　Crayon Syntax Highlighterを使用する方法

2　テキストエディタのツールバーを使用する方法

二つとも試してみて表示のし方が違うことが分かりました。

どちらでも好みの表示方法を使ってみてください。