46web

pone_web ワサコレ・スマホ・タブレット・パソコン・クルマ

TOP >> スポンサー広告 >> 【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-TOP >> Web site >> 【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
※古い記事を試すときは自己責任で!

この記事にリンクを貼る


Trackback: -- |  Comment: --

【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-

【FC2 BLOG♘用】
SyntaxHighlighter 3.0.83を修正・カスタマイズしてより使いやすくしましょう。
導入がまだの方は先に導入編をお読みください。

関連記事:
【FC2】SyntaxHighlighter 3.0.83 導入編 -1-
・【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-
【FC2】SyntaxHighlighter 3.0.83 使い方編 -3-



まずは修正箇所です。

修正するファイルは「shCoreDefault.css」を使っています。
実際の行番号に沿って記入しています。途中で行を追加した場合は読み替えてください。

IEで表示すると最後の1行が表示されない場合があります。
その修正です。
.syntaxhighlighter table {
width: 100% !important;
margin-bottom: 1em !important; /追加します
}


IE、Google Chromeで縦スクロールバーが常に表示される場合があります。
その修正です。
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important; /追加します
}



ではカスタマイズしましょう。

まず最初にやっておきたいのは行ごとの色分けです。「shCoreDefault.css」はwhiteのままになっています。
.syntaxhighlighter .line.alt1 {
background-color: white !important; /好みの色にします
}
.syntaxhighlighter .line.alt2 {
background-color: white !important; /好みの色にします
}


このページではこのような色コードを使っています。
.syntaxhighlighter .line.alt1 {
background-color: #ffffff !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #fee8ff !important;
}


文字のサイズも変更できます。
font-size: 1em !important;
1emを好きなサイズに変更すれば反映されます。
1emとはそのページで表示されている標準フォントの長さです。
1.5emとすれば標準フォントより1.5倍の長さになります。pt表記やpx表記も使えます。

その他は通常のcssファイルと同じですのでスタイルにこだわる方は挑戦してみてください。
解凍した際「styles」フォルダにたくさんcssファイルがあったと思います。
全部試してみましたが好みのスタイルはありませんでした。。。 ※古い記事を試すときは自己責任で!
Web siteの関連記事

この記事にリンクを貼る


TOP > スポンサー広告 > 【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-TOP > Web site > 【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2-

この記事に対するコメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://recoboo.blog28.fc2.com/tb.php/89-639a0433
この記事にトラックバックする(FC2ブログユーザー)

ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。