バンビの初心者ブログ教室

私がブログ運営で月間10万円稼いだ方法を教えます!

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

※当ブログ内では商品広告やPRを行っております。

こちらの記事は、はてなブログのテーマ「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;
}


コードに色付けする「シンタックス・ハイライト」については
こちらの記事がわかりやすかったです!
はてなブログのソースコードの色を変更する - PG日誌

雑記: シンタックスハイライトの配色変更 - クッキーの日記


「はてなブログ」公式の説明ページ
ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ