ブログのテンプレート制作 #001
変えよう変えようと思いつつも、Internet Archiveを見る限り現行テンプレで早二年。
何度も作り直してはいますが、公開には至っていませんでした。
さすがにそろそろ本当に変えなきゃいかんだろうということで、使命感を帯びさせるためにもプロセスを開示しながら進めようと思います。
ということで、さきほどダラダラっと書いたHTMLが以下です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content--Type" content-="text/html; charset=utf-8" />
<title>title</title>
</head>
<body style="margin:0px; padding:0px; background:#ffffff; font-size:medium; ">
<div class="container-1000" style="width:1000px; margin:0px
auto; padding:0px; background:#d0d0d0;"><!-- container-1000 -->
<div class="header" style="width:1000px; height:120px; border:none;
margin:0px; padding:0px; background:#cccc66;"><!-- header -->
<!-- これは仮のバナー --><iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=aibadaisuke-22&o=9&p=48&l=ur1&category=toyhobby&banner=0C392YTAYH9WV4ACQR02&f=ifr" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
<p>header あああああああああああああああああああああああああああああああああああああああああああああ</p>
</div><!-- /header -->
<div class="content-1000" style="width:1000px; border:none;
margin:0px; padding:0px; background:#ffff33;"><!-- content-1000 -->
<div class="content" style="border:none; margin:0px; margin-bottom:10px;
padding:0px; background:#ff6666;"><!-- content -->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
</div><!-- /content-1000 -->
<div class="column-L530" style="width:530px; float:left;
border:none; margin:0px; padding:0px; background:#ffcccc;"><!-- column-L530
-->
<div class="content" style="width:520px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#ff6666;"><!-- content
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<!-- これは仮のバナー --><iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=aibadaisuke-22&o=9&p=13&l=ur1&category=toyhobby&banner=0V8TR0T00YTKKVWGREG2&f=ifr" width="468" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
<div class="content" style="width:520px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#ff6666;"><!-- content
-->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
</div><!-- /column-L530 -->
<div class="column-R470" style="width:470px; float:left;
border:none; margin:0px; padding:0px; background:#333333;"><!-- column-R470
-->
<div class="content-470" style="width:470px; border:none;
margin:0px; padding:0px; background:#c0c066;"><!-- content-470 -->
<div class="content" style="border:none; margin:0px; margin-bottom:10px;
padding:0px; background:#ff6666;"><!-- content -->
<div class="content-header" style="margin:0px; padding:0px;
background:#cc6666;"><!-- content-header -->
<h1 style="margin:0px; padding:5px; font-size:100%;">これ見出し .content-header
h1</h1>
</div><!-- /content-header -->
<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->
<p style="margin:1em 8px;">.content-body あああああああああああああああああああああああああああああああああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
<p style="margin:1em 8px;">あああああああああああああああ</p>
</div><!-- /content-body -->
<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->
.content-footer
</div><!-- /content-footer -->
</div><!-- /content -->
</div><!-- /content-470 -->
<div class="column-310" style="width:310px; float:left;
border:none; margin:0px; padding:0px; background:#ccffcc;"><!-- column-310
-->
<div class="content-300" style="width:300px; border:none; margin:0px;
padding:0px; background:#9999ff;"><!-- content-300 -->
<p style="margin:1em;">content-300 あああああああああああああああ</p>
</div><!-- /content-300 -->
</div><!-- /column-310 -->
<div class="column-160" style="width:160px; float:left;
border:none; margin:0px; padding:0px; background:#ccccff;"><!-- column-160
-->
<p>column-160 あああああああああああああああ</p>
</div><!-- /column-160 -->
<div class="clearfix" style="clear:both; display:block;
height:0px; visibility:hidden;"><!-- clearfix -->
</div><!-- /clearfix -->
</div><!-- /column-R470 -->
<div class="clearfix" style="clear:both; display:block;
height:0px; visibility:hidden;"><!-- clearfix -->
</div><!-- /clearfix -->
</div><!-- /container-1000 -->
</body>
</html>
とりあえず「モダンな3カラムのブログレイアウト」を実際に試したいというのがモチベーションなのは明らかですね。
ということで次回「ブログのテンプレート制作 #002」に続く。
投稿者 ジェット☆ダイスケ : 2007年7月24日 07:39
