コード掲載の基準
ブログ上にコード掲載するには、独自ドメインを持つ人は高機能なプラグインを使ったり出来ますが、一般のアメブロユーザーはそれなりの工夫をする必要があります。
●ビジュアル上で何らかのコードである事を示すため、他の文字列にない背景にするか、コード全体を枠線で区切る。
●コードのインデントを表現できること。
●スマホからの参照に可能な限り対応する。
●コードはコピペによる利用を前提にして、画像化は避ける。
●横に長いコードは、一般のCSSで必要程度（URLが入る場合など）は横スクロールで対応。
●行数の多い場合に、縦スクロールで誌面を読み易くする。（最近に導入）
●区切れないとても長い1行コードは、特別な枠で対応。（必要な場合は少ない）
およそ以上の様な点がポイントになると思いますが、スマホ表示をコントロールするのは、HTMLタグ内に「style=""」の形でインライン指定するしか方法がありません。 ここから、
▪スマホ表示の修飾はインライン指定
▪PC表示にはPCブログスキンでインライン指定の足りない部分を補い、適さない部分があれば上書き指定
という修飾の分担が必要です。
ペースト時の要領
コードをブログ編集画面上で編纂する事はまあなく、基本は他で編纂した結果をコピーして来てペーストします。 この際に、HTMLコード（タグが含まれている）場合は「通常表示」にペーストが必須です。
一方、CSSコードはタグが無いので「通常表示」「HTML」のどちらにもペースト可能です。 ただし、「HTML表示」にペーストした場合にコード枠を書き込まないままだと、「通常表示」に移動した段階でインデント・改行が消失するので、コードが数珠繋がりになってしまいます。
そんな失敗をしない様に、私の場合はHTML画面で先にコード枠の定型を書き込み、空のコード枠を作ってから、ペーストする場合が多いです。 複数のコード枠が並ぶ場合は、空コード枠を先に複数コピーして、後からコードを貼り付けて行く手順が最も楽です。
インライン指定の定型
以下は、インライン指定でHTMLに書き込む定型です。
▪<pre>は掲載コードのインデント表示（空白文字を幅のある形で表示する）に必須です。
▪それを囲うブロック<div>に、枠線、背景色、スクロールバー、左右余白、を受け持たせています。
▪「background:#eceff1」「border:1px solid #aaa」「padding:0 30px」
は、スマホ表示 / PC表示 の両方に周囲デザインを指定します。
▪「overflow-y:hidden」は「謎のChrome 縦スクロールバー」の表示を防ぐ目的で、これはPCスキンのCSSからの指定が本筋です。 ただ、このためだけに<div>にクラス名を付ける記述は、余計に長くなると判断してインライン指定にしています。 PCスキンで他にすべき指定が増えた場合は、クラス名を付ける形にした方がインライン指定が簡略になります。 要はインライン指定の文字数を減らしたいのです。
（IMEの文字変換を使って定型を書き込むので、この要請があります。 他の方法で定型が書き込める場合は、指定方法が変わるかも知れません）
▪上の定型には入れていませんが、とても行数が多い場合にブログ自体が読み難くなるので、最近は「height:50vh」を追加しています。 50vhはウインドウ高さの半分という事で、値は適当に調節します。「max-height」を使えば、行数が少ない場合はその行数で自動調節になり、オールマイティなコードになります。
▪「max-width:660px」は、とても有難い指定です。 ブロック幅指定を固定して指定していないので、paddingを計算に入れると本文幅が720px以下のPCスキンに対して、常に本文幅のコード枠が表示されます。
またそれ以上に、スマホ表示では必須です。
max-widthで指定した場合は、ブロックが画面に自然に納まります。
PCブログスキンの指定
Chrome / Firefox はこのままで良いのですが、IE / Edge は枠内がかなり異なった表示になります。 下の様に無法な場所で自動改行されて横スクロールバーは出ません。
IE / Edge の表示に対策
PCスキンのCSSを調べると「word-wrap: break-word」が指定されていて、これが自動改行をさせていました。 この指定を「word-wrap: normal」で上書きすると、正常な改行になります。「word-wrap: normal」は Chrome / Firefox の表示には影響しないので、PCスキンで指定すれば4種ブラウザを適正化出来ます。
更に、上図の横スクロールバーの位置が変に内側です。 これは「overflow: auto」の指定がPCスキンに入っていました。 これを解除するため「overflow: visible」を指定したのが下です。
この指定も Chrome / Firefox の表示に影響せず、直接にPCスキンに指定出来ます。
既設の指定と対策指定を併合
私の場合は、今までに<pre>に文字サイズとフォント指定をしていました。 これは、<pre>枠のフォントは一般に「monospace」となり、本意でないフォントになる事があるので、PCスキン側で明示的に指定しているものです。
今回の指定をそれに追加する事になり、PCブログスキンの指定は以下になりました。 インライン指定とこれで、4種のブラウザと汎用スマホで、目的通りのコード掲載枠のデザインを得ています。（当然スキンは CSS編集用デザインです）