さくらブログについての問い合わせの回答

タグに登録したアルファベットの大小間違いを修正できない件について

さくらのブログのサポートに問い合わせたところ、

「一度登録すると変更できません。ブログの仕様です」との回答をもらいました。

「さくらのブログ」でソースコードを見栄えよく掲載する

このブログで利用している「さくらのブログ」でSyntaxHighlighter(V3.0)を追加する方法をまとめます。

ソースコードを記載するのに最適です。

テーマ一覧、対応言語

【設定手順】

ファイルの入手

上記のサイトからファイルをダウンロードし、必要なファイルを用意します。

CSSはshCore.cssと好きなテーマ（今回はshThemeMidnight.css）

JSはshCore.jsと好きな言語（今回はHTMLのshBrushXml.jsとC#のshBrushCSharp.js）

CSSファイルのアップロード

管理画面にファイルマネージャ機能があるので、CSS,JSファイルをアップロードします。

フォルダを分けるかどうかは好みで。

URLはメモしておきます。

ブログテーマのHTMLを改修

「HTMLを追加」を押して、編集画面を開きます。

HTML名の欄に新しい名前を入れます。今回は「CODEハイライト表示」とします。

HTML編集欄に以下のコードを挿入します。場所は</HEAD>の直前。

なおURLは先にメモしたものに書き換える。

前の画面に戻って今保存したHTMLを選ぶ（オプションボタンを有効にする）

これで下準備完了。

<!--SyntaxHighlighter-->
<!--URLは適宜書き換えて使用してください-->
<link href="http://xxxxxx.sakura.ne.jp/sblo_files/mindalign/syntaxhl/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://xxxxxx.sakura.ne.jp/sblo_files/mindalign/syntaxhl/shThemeMidnight.css" rel="stylesheet" type="text/css" />
<script src="http://xxxxxx.sakura.ne.jp/sblo_files/mindalign/syntaxhl/shCore.js" type="text/javascript"></script>
<script src="http://xxxxxx.sakura.ne.jp/sblo_files/mindalign/syntaxhl/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://xxxxxx.sakura.ne.jp/sblo_files/mindalign/syntaxhl/shBrushXml.js" type="text/javascript"></script>
 
<script type="text/javascript">
SyntaxHighlighter.config.tagName = "pre";
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all()
</script>
<!--/SyntaxHighlighter-->

【記事の投稿方法】

記事を投稿する際は以下の要領で行います。

(1)編集モードを「リッチテキスト」にする。
(2)入力フォームに記載したいコードを一旦張り付ける。
(3)ここで「ソースコード」ボタンを押して、ソースコード編集用の子画面を表示させる。
(4)ソースコードが囲われている<div>〜</div>を<pre class="brush: csharp">〜</pre>に書き換える。（classは言語によって変える）

プレビューして表示を確認。うまくいけば成功です。