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

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

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

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

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

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

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

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

参考サイト

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

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

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

Diverの入力補助機能【コード】の使い方

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

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

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

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

Diver入力補助画面

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

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

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

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

便利すぎる!

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

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

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

 

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事