Hatena Blogに「SyntaxHighlighter」を導入！躓かないで成功させる方法
Bloggerで成功していたのでHatena Blogで「SyntaxHighlighter」導入はラクチン！
ソースコードをブログ記事上で見やすくするツールの「SyntaxHighlighter」です。
こんな感じで↓ブログに表示して、コピペが出来るようになるのです。
/*日付*/
h2{
font-size: 130%;
}
/*大見出し文字サイズ*/
h3{
font-size: 160%;
margin:10px 0px;
padding:0 0 3px 15px;
border-left:15px solid #356cc4;
}
/*中見出し文字サイズ*/
h4{
font-size: 145%;
margin:8px 0px;
padding:0 0 3px 15px;
border-left:10px solid #356cc4;
}
/*小見出し文字サイズ*/
h5{
font-size: 130%;
margin:8px 0px;
padding:0 0 3px 10px;
border-left:6px solid #356cc4;
}
Bloggerでは成功していたので、Hatena Blogに移植する感じで、5分くらい出来ました。
「SyntaxHighlighter」の導入の仕方は、ダッシュボード＞デザイン＞カスタマイズ＞ヘッダー＞HTMLのスペースに、以下のコードをペタっと貼付けて保存です。
ヘッダーのHTMLにこのコードを貼付けると、<head>と</head>の間にコードが挿入されて、魔法の呪文になるわけです。
★★★★★
★★★★★
HTMLでコードを挿入しても、見たまま編集ではそのコードが見えない場合があります。
「SyntaxHighlighter」で躓くのは「見たまま編集」で見えないことなのです。
HTMLで挿入してから、「見たまま編集」に戻っても
HTMLで挿入したはずのコードが表示されなくても、「プレビュー」で見るとちゃんとコードが表示されているはずなので、あわてずにまずは確認してみましょう。
このようにコードを挿入しても
コードは表示されていませんが、「プレビュー」や実際の表示では問題がありません。
Hatena BlogでもBloggerでも「SyntaxHighlighter」は同じように使えます。
便利なツールなので、入れておくと使い勝手はいいと思います。
色の調整等も出来るそうなので、もっと凝りたい人は「SyntaxHighlighter」で検索を！
Hatena Blogの「クシャミ」の問題はまだ分かりません、たまに固まると「見たまま編集」はとんでもないことになります。
これ、役に立つと思います、オススメ度は★★★★★ 星5つです。
「クシャミ」は「delete」してるときに起こるような気がします。
