文字サイズ

SyntaxHighlighter Evolved 文字サイズを指定する方法

Categories | ブログ(WordPress)

SyntaxHighlighter Evolved 文字サイズを指定する方法

03 01 400x280 SyntaxHighlighter Evolved 文字サイズを指定する方法

SyntaxHighlighter Evolved とは、

ワードプレス(WordPress)のプラグイン(機能拡張)。

ブログ記事内にソースコード(html・css等)を文字化けすることなく、

きれいに表示できます。

しかし、ある程度サイト作成などのスキルが必要とされ、

素人が簡単に利用できるものではないと思う。

現バージョンは「3.5.0

WordPress の必須バージョン: 4.2.3以上

 

導入時のカスタマイズ

SyntaxHighlighter Evolved(ワードプレス プラグイン)のカスタマイズと使用方法

 

良くやってしまう失敗として、

テキストエディタでの記述では問題なく利用できるが、

途中でビジュアルエディタに切り替えてしまうと、その機能を果たさなくなる。

つまり、やっぱり文字化けしてしまう。

そこらへん気を付けなければいけない。

 

ところで本題ですが、

SyntaxHighlighterを導入した数年前

当初は文字がデカくなってフォントサイズをカスタマイズしましたが、

本体の不定期なアップデートで、その情報が上書きされ消滅してました。

それらを回避するため、いっそのこと子テーマを作ってしまおうかと。

でも、たかだか文字サイズの為に・・・・。

そこで、その都度文字サイズを好みで変更できるように、

ボックス指定することにしました。

※ 因みに「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>

 

以上

Comment(0) | Trackback(0)

TAGS: / / / | 2019年2月3日 |