
カスタマイズについて記事を書く際、記事内にHTMLタグやCSSのソースコードを表示させたいことがあります。
(そのまま書くとソースが反映されちゃうものね)
一般的にはプラグインやツールを使って表示させるケースが多いと思うんですけど、WordPressテーマ「Diver」なら入力補助機能で簡単にソースコードの埋め込みが出来てしまいます…!
記事内へのソースコード埋め込みはプラグインが必要?
CSS追記のカスタマイズ方法や、HTMLタグの埋め込みをレクチャーする際に、記事内にソースコードを表示したいと思うケースはあると思います。
私が別で使っているWordPress無料テーマでは、ソース埋め込み用のプラグインが必要。
「Crayon Syntax Highlighter」あたりが人気のようで、よく見かけます。
Crayon Syntax Highlighterの使い方
でも私、プログラマーでもないし、ちょっとしたカスタマイズ程度しか共有できないし。
つまりはプラグインをいれるほど、すごいことできない。
だけど、Diverの入力補助機能を使えば、プラグインなしで記事内にコードが埋め込みできちゃうじゃないの!(購入前には気付かなかった)
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プラグインのほうがスマートだけど、設定なども不要だし、プラグインを増やす必要もないので、かなりありがたい。
ちなみに、ビジュアルエディタでは以下のように表示されます。
こんな便利な機能があるなら、もっと使う機会が増えるようにカスタマイズ勉強しなくちゃ…。