SyntaxHighlighter Evolved 文字サイズを指定する方法
2019年2月3日
Categories | ブログ(WordPress)
SyntaxHighlighter Evolved 文字サイズを指定する方法
SyntaxHighlighter Evolved とは、
ワードプレス(WordPress)のプラグイン(機能拡張)。
ブログ記事内にソースコード(html・css等)を文字化けすることなく、
きれいに表示できます。
しかし、ある程度サイト作成などのスキルが必要とされ、
素人が簡単に利用できるものではないと思う。
現バージョンは「3.5.0」
WordPress の必須バージョン: 4.2.3以上
導入時のカスタマイズ
良くやってしまう失敗として、
テキストエディタでの記述では問題なく利用できるが、
途中でビジュアルエディタに切り替えてしまうと、その機能を果たさなくなる。
つまり、やっぱり文字化けしてしまう。
そこらへん気を付けなければいけない。
ところで本題ですが、
当初は文字がデカくなってフォントサイズをカスタマイズしましたが、
本体の不定期なアップデートで、その情報が上書きされ消滅してました。
それらを回避するため、いっそのこと子テーマを作ってしまおうかと。
でも、たかだか文字サイズの為に・・・・。
そこで、その都度文字サイズを好みで変更できるように、
ボックス指定することにしました。
※ 因みに「SyntaxHighlighterの設定」で、
「追加のCSSのclass名(複数可能)」がありますが、こちらでは文字サイズ指定は出来ないようです。
結論として、
SyntaxHighlighterのショートコードを「div」で囲む。
こうです。
例01 文字サイズ指定なし
<div>例01 文字サイズ指定なし</div>
例02 文字サイズ指定「12ピクセル」
<div style="font-size: 12px;">例02 文字サイズ指定「12ピクセル」</div>
例03 文字サイズ指定「10ピクセル」
<div style="font-size: 10px;">例03 文字サイズ指定「10ピクセル」</div>
以上