テーマインストール後に<pre>のコード表示が崩れる場合

こちらの記事は、はてなブログのテーマ「Palette（パレット）」のカスタマイズについて説明しています。

プロングラミングやカスタマイズ系の記事を書かれている方は、コードなどを自分のページにアップされることが多いと思います。
このテーマでは下記のように表示できるようにしました。（↓は画像です♪）

f:id:zuboraca:20180627090931j:plain

はてな記法やマークダウンでやっている場合は問題がないと思いますので、この記事は読まなくて大丈夫です！（笑）

「はてな記法」をプレビューして「みたまま編集」にコピペしていた方は（私もその一人）このテーマに変えると以前にコピペしたコードの表示が崩れてしまいます。

プレビューをコピペしていたので、htmlのスタイルの属性も一緒にコピーしてしまっていることが原因です。
以前と同じように表示するためには、左側の＜／＞が付いた枠線を表示しないようにする必要があります。

左側の＜／＞枠を非表示にするには、下記をCSSにコピーしてください。
（デザイン→カスタマイズ→{}デザインCSSにコピーする）

.entry-content pre.code:before{display: none;}

どうしても＜／＞付きの左枠を表示したい場合は、以前にプレビューからコピペしたものは、もう一度やり直さないといけなくなってしまいます。
今のところ、それ以外の解決方法が思い当たりません。
テーマ変更以前にプレビューからのコピペが多い方は、上記の非表示で対応お願いします。
別の方法が思い浮かんだ方は教えてくださるとありがたいです♪
（やっぱり「はてな記法」で書いておくべきだったかしら...）

一応、下記に＜PRE＞の部分のCSSコードを載せておきますのでご参考になさってください。

   /*=== pre & code ===*/
.entry-content pre,
.entry-content code {
    font-family: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
}

.entry-content pre,
.entry-content code {
    position: relative;
    margin: 0;
    padding: 10px;
    padding-left:50px;
    /*↑↑左に枠をつけたので左側に余白を持たせて表示する*/
    white-space: pre-wrap;
    text-overflow: ellipsis;
    line-height: 1.3;
    font-size: .8rem;
    background-color: black;/*背景色→黒*/
}

.entry-content pre.code:before{
   	position: absolute;
    	top: 0;
    	left: 0;
	font-family:"blogicon";/*はてなブログのブログアイコン*/
  	content: "\f038";
   	color: white;/*アイコンの色*/
    	background-color:grey;/*左側の枠の色*/
   	padding-top:5px;
	font-size: 20px;
	font-weight: bold;
	text-align:center;
	height:100%;
	width:35px;
}