Syntax Highlighterを導入したはイイが、文字ソース部分だけなぜかフォントサイズがでかくなってしまい、むーん。。。
いやまぁ、完全にテーマ本体のcss設計のせいなのですが。とりあえずは対処法。
生成されるソースを見ると、
<div id="highlighter_xxxxxx" class="syntaxhighlighter"> なんちゃらかんちゃら <div>
という訳で、「syntaxhighlighter」というクラス名でフォントサイズを制御している模様。
そのありかをチェックすると、「syntax-highlighter/css/shCore.css」の22行目。
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span,
.syntaxhighlighter .bold,
.syntaxhighlighter .italic,
.syntaxhighlighter .line,
.syntaxhighlighter .line .number,
.syntaxhighlighter .line .content,
.syntaxhighlighter .line .content .block,
.syntaxhighlighter .line .content .spaces,
.syntaxhighlighter .bar,
.syntaxhighlighter .ruler,
.syntaxhighlighter .toolbar,
.syntaxhighlighter .toolbar a,
.syntaxhighlighter .toolbar a:hover
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: none;
text-align: left;
float: none;
vertical-align: baseline;
position: static;
left: auto;
top: auto;
right: auto;
bottom: auto;
height: auto;
width: auto;
line-height: normal;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
font-weight: normal;
font-style: normal;
font-size: 100%;
}
なーんてなっておりまして……。
下手にパーセンテージを小さくしようものなら、入れ子構造でエラいこっちゃ。
で。その次にあったのが。
.syntaxhighlighter
{
width: 100%;
margin: 1em 0 1em 0;
padding: 1px; /* adds a little border on top and bottom */
position: relative;
overflow: auto;
}
ここだったら、クラス単体での設定が可能。
という訳で、以下のように書き加えてみました。
.syntaxhighlighter
{
width: 100%;
margin: 1em 0 1em 0;
padding: 1px; /* adds a little border on top and bottom */
position: relative;
overflow: auto;
font-size: 85%;
max-height:200px;
}
「font-size:85%」というのは、<p>タグのサイズに準拠。
ついでに「max-height」指定をカマして、ずらずら長いソースを収納したという手筈でございます。
しっかし……今後、アップグレードする度に書き換えなきゃいけないかと思うとorz。
極力プラグイン本体の内容はいぢりたくないんだよね……(..;)。
Related posts:
- Syntax Highlighter for WordPress ...
- All in One SEO Pack 折角ブログを立ち上げるんなら、皆さんに見て頂きたい訳で。 それには当然、検索エンジンの上位に載っかるコトが先決。 そこで必須になってくるのが「All in One SEO Pack」。タイトルやMETAタグの内容をページ [...]...
関連記事はYARPP関連記事プラグインによって表示されています。