トップページ > ブログ > ブログのテンプレート制作 #001
カスタム検索

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

モダンな3カラムのブログレイアウトを試すときが来た



Clip to Evernote


変えよう変えようと思いつつも、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 -->

&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;"><!--
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 -->

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

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

&nbsp;

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


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


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

&nbsp;

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


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


</body>

</html>

とりあえず「モダンな3カラムのブログレイアウト」を実際に試したいというのがモチベーションなのは明らかですね。

ということで次回「ブログのテンプレート制作 #002」に続く。



Clip to Evernote



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2007年7月24日 07:39

コメント:

Related Posts Plugin for WordPress, Blogger...

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 そしてGoogle Plusはこちらにどうぞ。また、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 交換レンズ編

最近のエントリー

AMN