Diverなら記事内にソースコードを埋め込むのもプラグイン不要で簡単よ。

2019年10月15日

カスタマイズについて記事を書く際、記事内にHTMLタグやCSSのソースコードを表示させたいことがあります。

（そのまま書くとソースが反映されちゃうものね）

一般的にはプラグインやツールを使って表示させるケースが多いと思うんですけど、WordPressテーマ「Diver」なら入力補助機能で簡単にソースコードの埋め込みが出来てしまいます…！

Contents

記事内へのソースコード埋め込みはプラグインが必要？

CSS追記のカスタマイズ方法や、HTMLタグの埋め込みをレクチャーする際に、記事内にソースコードを表示したいと思うケースはあると思います。

私が別で使っているWordPress無料テーマでは、ソース埋め込み用のプラグインが必要。

「Crayon Syntax Highlighter」あたりが人気のようで、よく見かけます。

参考サイト

でも私、プログラマーでもないし、ちょっとしたカスタマイズ程度しか共有できないし。

つまりはプラグインをいれるほど、すごいことできない。

だけど、Diverの入力補助機能を使えば、プラグインなしで記事内にコードが埋め込みできちゃうじゃないの！（購入前には気付かなかった）

このブログを立ち上げて、一番最初に行ったカスタマイズが、Noto Sans JPへのフォント変更。

この記事内でも使ってるのが、コードの入力補助機能です。

記事内へのコード埋め込みが一発で出来ちゃいます。

「Diver入力補助」⇒「コード」

コードの言語をプルダウンキーで選んで枠内にコードを貼り付けます。（行番号はチェックをいれてます）

「コードを挿入する」をクリックするだけで、

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/*フォント変更*/
body{
	font-family: "Noto Sans JP",sans-serif;
	font-weight: 400;
}

便利すぎる！

デザインはCrayon Syntax Highlighterプラグインのほうがスマートだけど、設定なども不要だし、プラグインを増やす必要もないので、かなりありがたい。

ちなみに、ビジュアルエディタでは以下のように表示されます。

こんな便利な機能があるなら、もっと使う機会が増えるようにカスタマイズ勉強しなくちゃ…。