トップページ > ブログ > ブログのテンプレート制作 #002

ブログのテンプレート制作 #002

レイアウトはこのへんで一段落にします。

久しぶりの第二回目です。

近所のジョナサンでだらだら作ってたのであまり進んでおりませんが、ラフなレイアウト的なものはそろそろこのへんで良いかなと。次回からはもうちょっとグラフィックも入れてみたいかなぁ。
ブログのテンプレート制作


<!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:small;">



<div class="container-1000" style="width:1000px; margin:0px
auto; padding:0px; background:#d0d0d0;"><!-- container-1000 -->



<div class="header" style="width:1000px; height:92px; border:none;
margin:0px; padding:0px; background:#cccc66;"><!-- header -->



<div class="header-right" style="width:270px; margin:0px; padding:0px;
float:left; background:#ff9900;"><!-- header-left -->

<p>header-left あああああああああああああああああああああああああああ</p>

</div><!-- /header-left -->



<div class="header-right" style="width:730px; height:92px;
margin:0px; padding:0px; float:left; background:#cc6699;"><!-- header-right
-->

<p>header-right あああああああああああああああああああああああああああ</p>

</div><!-- /header-right -->



<div class="clearfix" style="clear:both; display:block; height:0px;
visibility:hidden;"><!-- clearfix -->

&nbsp;

</div><!-- /clearfix -->



</div><!-- /header -->



<div class="navBar" style="width:1000px; margin:0px; margin-bottom:10px;
padding:0px; background:#ffcccc;" ><!-- navBar -->

<ul style="margin:0px; padding:0px; border-bottom:2px solid #000000;">

<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>

<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>

<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>

<li style="display:inline; margin:0px; padding:4px; border-right:1px
solid #000000;"><a href="#">メニュー</a></li>

</ul>

</div><!-- /navBar -->



<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>



</div><!-- /content-body -->



<div class="content-footer" style="height:16px; margin:0px;

padding:0px; background:#66ffcc;"><!-- content-footer -->



&nbsp; .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;
border:6px solid #000022;"><!--

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 -->



&nbsp; .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 -->



&nbsp; .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 -->



&nbsp; .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>



</div><!-- /content-body -->



<div class="content-footer" style="height:16px; margin:0px;
padding:0px; background:#66ffcc;"><!-- content-footer -->



&nbsp; .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;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-300
-->



<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 -->



&nbsp; .content-footer



</div><!-- /content-footer -->

</div><!-- /content-300 -->



<div class="content-300" style="width:300px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-300
-->



<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>



</div><!-- /content-body -->



<div class="content-footer" style="height:16px; margin:0px;

padding:0px; background:#66ffcc;"><!-- content-footer -->



&nbsp; .content-footer



</div><!-- /content-footer -->

</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
-->

<div class="content-160" style="width:160px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-160
-->



<div class="content-body" style="margin:0px; padding:1px; background:#cc99cc;"><!--
content-body -->



<p style="margin:8px;">.content-body only あああああああああああああああああああああああああああああああああああああああああああああ</p>



</div><!-- /content-body -->



</div><!-- /content-160 -->



<div class="content-160" style="width:160px; border:none; margin:0px;
margin-bottom:10px; padding:0px; background:#9999ff;"><!-- content-160
-->

<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 -->



&nbsp; .content-footer



</div><!-- /content-footer -->



</div><!-- /content-160 -->



</div><!-- /column-160 -->



<div class="clearfix" style="clear:both; display:block;

height:0px; visibility:hidden;"><!-- clearfix -->



&nbsp;



</div><!-- /clearfix -->



</div><!-- /column-R470 -->



<div class="clearfix" style="clear:both; display:block;

height:0px; visibility:hidden;"><!-- clearfix -->

&nbsp;

</div><!-- /clearfix -->



<div class="footer" style="width:1000px; height:92px; border:none;
margin:0px; padding:0px; background:#cccc66;"><!-- footer -->

<p>footer あああああああああああああああああああああああああああ</p>

</div><!-- /footer -->



</div><!-- /container-1000 -->





</body>



</html>

ちなみにですね、うちのブログの初期の頃はこんなデザインでした。
webdog初期デザイン
070812_blog2.gif
当時のITmediaなんかの印象が色濃いですね。こういう3カラム流行ってたしな。

ということで次回に続く。

【関連記事】
ブログのテンプレート制作 #001
モダンな3カラムのブログレイアウト


前の記事:GarageBand '08
次の記事:ひとくちカレー »


投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2007年8月12日 02:50

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介/ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 また、YouTubeのチャンネル登録はこちらからできます。

ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー