«
»

iG:SyntaxHiliterのデザインを少しだけ変更する

WordPress上でコードがハイライト表示できるプラグイン iG:SyntaxHiliter は、非常に重宝するのですが、なんとなく見た目が少し残念なので、思い切ってタイトルバーをなくしてシンプルな表示にする事にします。

所詮、CSSの変更だけなのですがメモって事で。

タイトルバーを無くしてみる

テーマエディタでスタイルシートに以下を追加します。visibility: hidden;でタイトルバーの表示を消してみたものの間隔が詰まらなかったので、margin-topにマイナスを指定して引き上げています。いいんだろうか、こんな事で。
しかし、本来、タイトルバーにあるリンクがなくなってしまうという弊害があります。
(追記: プラグインの設定によっては margin-topはいらないようです)

PLAIN TEXT
CSS:
  1. .igBar {
  2.         visibility: hidden;
  3. }
  4. .syntax_hilite {
  5.         margin-top: -1.5em;
  6. }

(再追記: visibilityじゃなくて、display を使わないと間は詰まらない！　そうだったかー)

PLAIN TEXT
CSS:
  1. .igBar {
  2.         display: none;
  3. }

タイトルバーの背景色や枠の色を変更する

私がよくわかってないせいか、テーマエディタの修正では変更できない場合がありました。しょうがないので、ig_syntax_hilite/css/syntax_hilite_css.css を直接書き換えます。

PLAIN TEXT
CSS:
  1. .syntax_hilite, li .syntax_hilite {
  2.         border:1px solid #コード部分の枠の色;
  3. }
  4. .igBar a, .igBar a:hover {
  5.         color: #タイトルバーの文字の色;
  6. }
  7. .igBar, li .igBar {
  8.         background-color: none;
  9.         border-top:1px solid #タイトルバー上枠の色;
  10.         border-left:1px solid #タイトルバー左枠の色;
  11.         border-right:1px solid #タイトルバー右枠の色;
  12. }

＃追記
IEで見ると不必要なまでにスクロールバーが表示されて美しくない。まぁ、いいか。

関連すると思われる記事:

タグ: , ,

この投稿は 2008年6月17日 火曜日 21:40:34 に WordPress カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。

コメントをどうぞ