WordPressテーマ「Affinger6」でソースコード（文字列）を見やすく表示したいときは、ボックスデザインの【pre】ショートコードを使うのが便利です。 しかし、この【pre】ショートコードはデフォルト設定では行間が広く、コードが間延びして見えてしまうのが難点です。
旧エディタにおいて、行間を調整するために「コード」モードにして、HTMLを直接編集し、<p style=“line-height:120%;”> のようにインラインスタイルを追記すると、HTML構文上のエラーとなり、ブラウザによっては正しく表示されない場合があります（<pre>内ではプレーンテキストのみ使用可能です）。
この記事では、Affinger6の【pre】ショートコードをカスタマイズし、ソースコードの行間や外観を調整する方法について解説します。
【pre】ショートコードについて（基本の使い方）
Affinger6の【pre】（ショートコード）は、３種類あります。
【pre】ショートコード
〜ソースコード（文字列）等を記述〜
[/st-pre]
html
<div class="st-list-no">
<ol>
<li>1234</li>
<li>abcd</li>
</ol>
</div>
【pre:terminal】ショートコード
〜ソースコード（文字列）等を記述〜
[/st-pre]
command
ffprobe imput.m4a -hide_banner -show_frames | head -n 20
-------上のコマンドを実行すると、以下が表示されます。------
[FRAME]
media_type=audio
stream_index=0
key_frame=1
【pre:shortcode】ショートコード
〜ソースコード（文字列）等を記述〜
[/st-pre-sc]
shortcode
[st-pre myclass="" text="html" webicon=""]
〜ソースコード（文字列）等を記述〜
[/st-pre]
HTML構文上の注意点：preタグ内で使えない要素
例えば、下部に示す【st-pre】（ショートコード）で囲まれたソースコード（文字列）を旧エディタの「コード」モードに切り替えて確認すると、WordPressの自動整形機能によって<p>タグが付加されていることが確認できます。 下の例では、故意に赤字で示すstyle~"line-height:120%;" を記述しています。
旧エディタの「コード」モード
<p>[st-pre myclass="st-terminal" text="command" webicon="st-svg-terminal"]</p>
<p style~"line-height:120%;">[FRAME]<br />
media_type=audio<br />
stream_index=0<br />
key_frame=1</p>
<p>[/st-pre]</p>
WordPressはサーバー側で動的ページを静的なHTMLに変換しますが、そのHTMLは<pre>タグ内にある<p>タグはブラウザが補正して（<p>タグの無い）プレーンテキストとして扱うため、構文上の問題は発生しません。
しかし、ソースコード（文字列）の行間を狭める目的で、赤文字で示される<p style=“line-height:120%;”>のようなインラインスタイルを直接記述すると、<pre>タグ内の<p>タグはブラウザによって補正されずに残存する場合があり、HTMLの構文上は不正となる可能性があります。
備考：Chrome拡張機能の「HTMLエラーチェッカー」で確認すると、構文エラーが確認できます。-----
自動でWebページの構文エラーが確認できる「HTMLエラーチェッカー」の入手先はここをクリック
つまり、【pre】（ショートコード）内では、WordPress において自動整形によって付加された <p> タグに対して、インラインスタイルを直接記述することはNGです。
CSSで行間を調整する方法（スタイル変更）
Affinger6の【pre】（ショートコード）は、myclass を指定するオプションがあります。 例えば、pre_style をmyclassオプションに追記して、CSSを .pre_style{ line-height:120%!important;} にすると、【pre】（ショートコード）内の文字列全体の行間を狭めることができます。
具体的には、以下になります。
html [st-pre myclass="pre_style" text="html" webicon=""] 〜ソースコード（文字列）などを記述〜 [/st-pre] <style> .pre_style{ line-height:120%!important;background-color:#E8F5E9;} </style>備考：上の例は、【pre】（ショートコード）に pre_style をオプションとして指定して、CSSを .pre_style{ line-height:120%!important;} にしていますので、通常の【pre】（ショートコード）よりも行間が狭くなります。 また、CSSの .pre_style に background-color で色を指定すると背景色等も変更できます。
以上、「Affinger6のpreボックス内の文字列行間を調整する方法」の説明でした。
-
-
関連記事WordPressの旧エディタで「ページ区切り」に付加されてしまう Pタグの構文エラーを対策する方法
Affinger6の旧エディタで編集中の頁に「ページ区切り」 <!--nextpage-->を挿入して、確認のためプレビューするとChrome拡張機能の「HTM ...