このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。 おちゃのこネットの刑部です。
今回のデザイン道場は、先日リリースしたHTML5テンプレートについて、ご紹介させていただきます。

既に設定されている方も多数おられるようですね。ご利用ありがとうございます！

基本的には、従来のテンプレートと同様にスタイルシートを編集してデザインをカスタマイズしますが、class名やid名が新しくなり、より細かく指定が可能となっています。また、これまでの<table>タグレイアウトは利用せず、<div>タグや<ul><li>タグを使いレイアウトを行っていますので、より自由なカスタマイズが可能です。

今後、デザイン道場やFAQ等でカスタマイズ方法をご紹介していきますが、今回は文字サイズについて従来のテンプレートから変わった点をご紹介させていただきます。

今回のHTML5テンプレートでは、文字サイズに「px」ではなく「%」を利用して表示しています。
これは、サイトの右上に配置している文字サイズの切り替えに対応するためのものです。

そのため各スタイルシートの上部に文字サイズに関する下記のような表記がコメントで入っています。
これまでのpx指定に対応する％を表で記載しています。

この%指定は、親要素に対する%となります。
つまりbodyタグで13pxを指定している場合、その親要素のサイズから何%の文字サイズで表示したいかで、子要素の文字サイズを指定していきます。
初期設定では、全テンプレートのbodyタグで13pxの文字サイズが指定されています。

bodyタグが13pxで、いらっしゃいませ欄を小さい文字で表示したい時は、85%を指定すると、文字サイズは小さくなります。

また、全体の文字サイズを大きくしたい時は、bodyの文字サイズで15pxを指定した場合、サイト内の全文字サイズを大きくすることができます。

次号より、各部分のカスタマイズ例をご紹介していきたいと思います。
今後ともデザイン道場をよろしくお願いします。