2013年3月20日水曜日

Bloggerにソースコードを表示 その2

前回書いたソースコードの表示では、縦のスクロールバーが表示されます。
でもいらないですよね。
前回追加したshCore.cssを自作のものに切り替えることで、表示を変更できます。
前回同様、こちらを参考にさせて頂きました。

1. Bloggerのメニューから、テンプレート > HTMLの編集
2. shCore.cssをコメントアウトし、保存
<!-- <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
3. Bloggerのメニューから、テンプレート > カスタマイズ > アドバンス > CSSを追加
4. 以下を貼り付けて、適用
<link -moz-border-radius:="" -webkit-border-radius:="" .5em="" .9em="" .bold="" .container="" .italic="" .line="" .syntaxhighlighter.collapsed="" .syntaxhighlighter.ie="" .syntaxhighlighter.nogutter="" .syntaxhighlighter.show="" .syntaxhighlighter.source="" .syntaxhighlighter="" .toolbar="" 0.1em="" 0.5em="" 0.8em="" 02="" 0="" 0em="" 1.1em="" 100="" 10="" 10px="" 11px="" 1em="" 1px-="" 1px="" 2004-2010="" 2010="" 20px="" 3.0.83="" a.expandsource="" a="" absolute="" alex="" alexgorbatchev.com="" and="" are="" auto="" background:="" baseline="" block="" bold="" border-box="" border:="" bottom:="" box-sizing:="" caption="" center="" code="" content-box="" copyright="" courier="" display:="" div="" donate.="" donate.html="" donationware.="" dual="" float:="" font-family:="" font-size:="" font-style:="" font-weight:="" gorbatchev.="" gpl="" height:="" hidden="" http:="" if="" important="" inherit="" inline="" is="" it="" italic="" itstream="" left:="" left="" license="" licensed="" licenses.="" line-height:="" margin-right:="" margin:="" min-height:="" mit="" mono="" monospace="" new="" none="" normal="" onsolas="" ourier="" outline:="" overflow-y:="" overflow:="" padding-left:="" padding-top:="" padding:="" please="" position:="" pre="" relative="" right:="" right="" sans="" span.title="" span="" static="" syntaxhighlighter="" table="" tbody="" td.code="" td.gutter="" td="" text-align:="" text-decoration:="" textarea="" the="" thead="" top:="" tr="" uly="" under="" using="" vera="" version="" vertical-align:="" visible="" white-space:="" white="" width:="" yntaxhighlighter="" you="" z-index:=""></link>20pxに変更,IEで最後の行が横スクロールバーに隠れるのを防ぐ
}
.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
  background: none !important;
}
.syntaxhighlighter.printing .line .number {
  color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
  color: black !important;
}
.syntaxhighlighter.printing .toolbar {
  display: none !important;
}
.syntaxhighlighter.printing a {
  text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
  color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
  color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
  color: blue !important;
}
.syntaxhighlighter.printing .keyword {
  color: #006699 !important;
  font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
  color: gray !important;
}
.syntaxhighlighter.printing .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
  color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
  color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
  font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
  color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
  color: black !important;
}
これで、縦スクロールバーが表示されなくなります!!

0 件のコメント:

コメントを投稿