ポケットにチョコレート

子育て主婦が役に立ちそうなことを雑多に。日々節約、ちょっといいこと。

オススメ記事

はてなブログをカスタマイズ - SyntaxHighlighter導入編

はてなブログ
※この記事の内容は2016/5頃より対応しておりません
（shCore.jsを読み込むとブログが正しく表示されなくなりました…)

ソースコードを紹介しているサイトで、ハイライトなど見やすくする為によくSyntaxHighlighterが使われていますね。

こんなやつです。

#main {
      background: transparent url(none) repeat left top;
      width: 650px;
}

私も気になって導入してみましたので、手順をメモしておきます。

ファイルをアップロードしたりJavaScript・CSSを記述する必要がない、ホスティングファイルを利用する方法ですのではてなブログでも簡単です。

記述する場所

デザイン > カスタマイズ > ヘッダ > タイトル下の部分に記述します。

f:id:poketton:20130704120450g:plain

と、してみましたが、多くの方はサイドバーにHTML領域を追加してそこへ記述しているようですね。

個人的にlinkやScriptタグはページ上部に持ってきたいのでヘッダにしましたが、実際にはページのどこに書いてあっても同じのようです。

ソース

HTMLとCSSに対応させる例は以下になります。

※'//'と赤い部分は削除してください

他の言語にも対応させたい場合は、shBrushxxx.jsを追加します。

ファイル名はこちらを参照してください。

予め全部記述しておけば何でも使えて良さそうですが、ページを表示する度読み込みますので多ければ多い程読み込みに時間がかかるようになります。

自分のサイトに合わせて必要最低限のものだけにするのがオススメです。

これで終わり！

一般的にはダウンロードした各ファイルをアップロードして参照しますが、それですとブログの場合別にファイルを置く場所を用意する必要がありブログ内で完結しなくなってしまうので、ホスティングファイル利用にしました。

ホスティング用に有料サーバを利用しているみたいですので、頻繁に使うようなら寄付を考えましょう～。

はてなブログでの注意点

はてなブログに限った話ですが、やっかいになるのがキーワードリンクです。

記述したコード内に対応キーワードが含まれてしまう場合、キーワードリンクのタグ詳細まで勝手に表示されてしまいます。

例えば昨日の記事だと…

.entry {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

しかもリンク先はCSSのコードとは無関係だし(^^;

proに申し込んでいないとキーワードリンクをオフにすることが出来ないので、他に解決方法がないか模索中です。

オートローダーが使えない？

オートローダー(autoloader)という、必要なjsファイルを自動で選んで読み込んでくれる機能もありますが、どうやってもうまく動かすことが出来ませんでした。

これについては私自身急いで必要でもないので時間がある時に研究します。

設定を変更する

ソース内のリンクを無効にするなどの設定を変えることが出来ます。

詳しくは次の記事をご覧ください。

プライバシーポリシー