こちらの記事は、はてなブログのテーマ「Palette(パレット)」のカスタマイズについて説明しています。
プロングラミングやカスタマイズ系の記事を書かれている方は、コードなどを自分のページにアップされることが多いと思います。
このテーマでは下記のように表示できるようにしました。(↓は画像です♪)
はてな記法やマークダウンでやっている場合は問題がないと思いますので、この記事は読まなくて大丈夫です!(笑)
「はてな記法」をプレビューして「みたまま編集」にコピペしていた方は(私もその一人)このテーマに変えると以前にコピペしたコードの表示が崩れてしまいます。
プレビューをコピペしていたので、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日誌
雑記: シンタックスハイライトの配色変更 - クッキーの日記
「はてなブログ」公式の説明ページ
ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ