2010年08月22日

ブログでソースコードを綺麗に表示する SyntaxHighlighter

プログラミングを紹介するブログでは、よくソースコードを綺麗に表示されていて、大変見やすかったりするので、私のブログでも対応したいと思っていたのですが、方法がわからず、なかなか対応できていませんでした。

そこで今回はSyntaxHighlighterを利用してコードを綺麗に表示するようにしたいと思います。
※:SyntaxHighlighterは3.0.83を利用しています。

まずはページ右側のdownloadをクリックし、ダウンロードページに移行します。そこから最新版のSyntaxHighlighterをダウンロードします。ダウンロードしたファイルをwebサーバーへ解凍してからアップロードします。

HTMLのhead部分からshCore.jsとshCore.css、shThemeDefault.cssを参照します。
同様に利用したいBrushesをhead部に追加します。
※:shCore.jsでXRegExpを利用しているようなので、http://xregexp.com/からダウンロードしてHTMLから参照します。

ソースコードを記述します。


記述にはpreタグとscriptタグが利用できます。違いについてはこちらを参考にしてください。どちらも一長一短があるようです。
preタグおよびscriptタグにはクラスを記述します。クラスは利用する言語に合わせて指定する必要があります。こちらのページに言語ごとのクラス名が記述されています。

head部でSyntaxHighlighter.all()を呼び出します。


以上のやり方でコードが綺麗に表示されるようになりました。

posted by まーつん at 10:18| Comment(0) | TrackBack(0) | Seesaa | このブログの読者になる | 更新情報をチェックする

2010年08月15日

Seesaa Blogのデザインを変えてみる

最近CSSをかじり始めたので、このBlogのデザインを簡単に変更してみようと思います。
これが変更前のデザインです。
image 
Seesaa標準の”モスグリーン(右サイドバー)”を利用しています。

では、手始めに現在読み込まれているCSSを表示してみます。
Seesaaの”マイ・ブログ”画面から”デザイン”タブ>”デザイン一覧”をクリックします。そうすると今まで追加してきたデザインが表示されるので、右端の適用カラムが選択状態になっているデザイン(=現在ブログに適用されているデザイン)のタイトルをクリックします。
これでスタイルシートの編集画面となりました。
image

では早速編集してみたいと思います。
その前に念のため現在のCSSをコピーして、ファイルにバックアップを取っておきます。あと、スタイルシートの名前を変えてみます。これは後でわかりやすくなるからいいかなって程度でそんなに変える意味はないかもしれません。

フォントをメイリオにする。
font-family:Verdana;が結構多くのところで指定されているので、body以外での指定は削除します。そして、bodyのfont-familyをMeiryo,Verdanaに変更しました。
背景を白くする。
Seesaaでは背景はイメージで指定されているよう(少なくとも私の使用しているCSSでは)なので、background-imageを全部削除します。

これだけで結構すっきりしました。(タイトルが見えませんが、、)
image 

ヘッダーを調整する。
ヘッダーが分厚かったので、#banner のheightを40px;に変更しました。
文字の色を青にしたいので、h1 aとh1 a:hoverのcolorを#009AD9 に変更しました。右カラムのタイトルバーを調整する。
タイトルバーの文字の色をグレーに変更したいので、.sidetitleのcolorを#333に変更しました。
デザインを付けるために.sidetitleのpaddingを12px 0 0 0;に変更し、 border-bottom: 3px #009AD9 solid;を追加しました。

image

記事部分の調整をする。
日付の文字の色をグレーに変更したいので、.dateのcolorを#333に変更しました。
日付と記事タイトルの間隔を調整するために、h2のmarginを0に、paddingを10px 0 0 10px;に変更しました。h3のpaddingを10px 0にfont-sizeを14pxに変更しました。
記事部分の枠を青にしたいので、.blogbodyのborderを1px solid #009AD9;に変更しました。

幅を広げる。
ページ全体の幅を広げたいので、#containerのwidthを913pxに、#contentのwidthを640pxに変更しました。

これで完成です。デザインもすっきりし、幅も広くなったので、読みやすいページになったかと思います。
image

ラベル:Seesaa,CSS
posted by まーつん at 11:32| Comment(0) | TrackBack(0) | Seesaa | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。