« テンプレートを用意しておく | トップページ | PDFプリンタをインストールする »

2008/09/11

ブログのデザインを変更してみた。

もうそろそろこのブログを立ち上げて1年が経つ。いい機会だからブログのテンプレートを変更してみた。

可変幅のテンプレートはやっぱりいい。大画面で表示したときの見やすさが格段にあがる。このテンプレートは結構前から提供されていて、変更しようと思えばいつでもできたのだが、やらなかったのは可変幅のものがこれ以外選択肢がなかったことと、今までのブルーのデザインがとても好きだったから。

ココログにはぜひ可変幅のテンプレートを作ってもらいたい。(このテンプレはdecowebのだから純正テンプレは全て固定幅)

他には、ソースコード類の表示には pre タグで統一することにした。(結局、code-prettifyを動作させられなかった)

< とか > とか " は実体参照しなきゃならないけど、手作業で書き直すのは骨が折れるから変換ツールを使ったほうが無難。

Link:蓄々HTML実体参照変換 - akiyan.com

ただ pre タグで囲むだけじゃ見づらいのでCSSを使って設定してみた。

pre {
   min-height: 80px;
   max-height: 500px;
   overflow: auto;
   border: 1px dashed;
   color: #333;
   font-size: 90%;
   background-color: #def;
}

表示面積が小さい画面だとコードが表示されなくなってしまうのでoverflowプロパティにautoを指定。これはscrollだと必要なくても常にスクロールバーが表示されてしまうため。

min-heightを設定してあるのはスクロールバー表示時に必要以上に狭くなるのを防ぐためで、max-heightは縦/横のスクロールバーの利便性を考えて。

|

« テンプレートを用意しておく | トップページ | PDFプリンタをインストールする »

HTML/CSS」カテゴリの記事

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: ブログのデザインを変更してみた。:

« テンプレートを用意しておく | トップページ | PDFプリンタをインストールする »