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

スポンサーリンク

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

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

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

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

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

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

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

ソースコードとは?

ソースコード(英: source code)とは、コンピュータプログラミング言語で書かれた、
コンピュータプログラムである文字列(テキストないしテキストファイル)のことである
ーウィキペディアより

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

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

これは画像です。

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

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%;
}

まとめ

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

1 Crayon Syntax Highlighterを使用する方法

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

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

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













コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

日本のライフスタイルが自分には合わず海外へ脱走。 着いたところシドニー。ライフチェンジで自分らしくのんびり生きる。 ワーホリ二年、学生二年、国際結婚を経験。