link1022 link1023 link1024 link1025 link1026 link1027 link1028 link1029 link1030 link1031 link1032 link1033 link1034 link1035 link1036 link1037 link1038 link1039 link1040 link1041 link1042 link1043 link1044 link1045 link1046 link1047 link1048 link1049 link1050 link1051 link1052 link1053 link1054 link1055 link1056 link1057 link1058 link1059 link1060 link1061 link1062 link1063 link1064 link1065 link1066 link1067 link1068 link1069 link1070 link1071 link1072 link1073 link1074 link1075 link1076 link1077 link1078 link1079 link1080 link1081 link1082 link1083 link1084 link1085 link1086 link1087 link1088 link1089 link1090 link1091 link1092 link1093 link1094 link1095 link1096 link1097 link1098 link1099 link1100 link1101 link1102 link1103 link1104 link1105 link1106 link1107 link1108 link1109 link1110 link1111 link1112 link1113 link1114 link1115 link1116 link1117 link1118 link1119 link1120 link1121 link1122 link1123 link1124 link1125 link1126 link1127 link1128 link1129 link1130 link1131 link1132 link1133 link1134 link1135 link1136 link1137 link1138 link1139 link1140 link1141 link1142 link1143 link1144 link1145 link1146 link1147 link1148 link1149 link1150 link1151 link1152 link1153 link1154 link1155 link1156 link1157 link1158 link1159 link1160 link1161 link1162 link1163 link1164 link1165 link1166 link1167
トップページ > ブログ > ブログのテンプレート制作 #001

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

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

変えよう変えようと思いつつも、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="https://rcm-jp.amazon.co.jp/e/cm?amp;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="https://rcm-jp.amazon.co.jp/e/cm?amp;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」に続く。



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

ジェット☆ダイスケ

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

最近のエントリー