ページ

2012-10-22

このブログのデザインメモ

追記


気まぐれにブログのデザインを変えた。テンプレート:シンプル(グリーンのやつ)。
基本的な流れは、以前の記事と同じ。
SyntaxHighlighterのメモ。使用するテーマによってcssを足してやる必要があった。
(chromeで表示がおかしかった)。
管理画面 - テンプレート - HTMLの編集 - 続行 で</head>前に以下のコードを挿入。
<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'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<style type="text/css">
/* SyntaxHighlighter: adjustment for chrome */
.syntaxhighlighter .gutter .line {
  word-wrap: normal;
}
.syntaxhighlighter .code {
  word-wrap: normal;
}
.syntaxhighlighter .toolbar {
  display: none;
}
</style>

テンプレートデザイナー - アドバンス - Add CSS
h2 {
  font-size: 13px;
}
.date-header span {
  font-size: 15px;
  font-weight: normal;
}
注意
SyntaxHighlighterでhtmlなどのタグを貼り付ける場合は、「<」を&lt;にすることが必須。
ソースコードのインデントがタブだと、1タブ = 1半角スペース に置き換えられる。
タブも半角スペースに置換しておくこと。

0 件のコメント:

コメントを投稿