「colorfree」２カラム化

Manannan Mac Lir

リクエストいただいて記事にしてみました。当初はこれも共有に、と思ったのですが、「メニューカラム突き抜け問題」に、いい対応策が見つかりません(あったら教えてください）。カラム幅を「％」にしてfloatさせれば解決しそうですが、カレンダーまわりのバランスが変わってしまうので、断念。

・公式テンプレートを適当にダウンロードして、名前を好きにかえ、HTMLとCSSを全部下記のものに入れ替えます。
(テキストエリアのなかをクリックして、Ctrl+a,Ctrl+cで全部コピーしてください）
・あくまで「見本」ですので、HTMLもCSSもご自由に変更してご使用ください。

HTML

<!DOCTYPE HTML 	PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 		"http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="description" content="<%introduction>">  <meta name="keyword" content="<%topentry_tag_list_name>,">  <title><%sub_title> - <%blog_name></title> <link rel="stylesheet" type="text/css" href="<%css_link>" media="screen,tv" title="デフォルト">  <link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS"> </head> <body>  <div id="container"> <div id="primary-column" class="column">  	<div id="header"> 	<div class="l"></div> 	<h1><a href="<%url>" accesskey="0" title="「<%blog_name>」トップへ"><%blog_name></a></h1>  ≫<%sub_title>   ≫<%sub_title>   ≫<%sub_title>   ≫<%sub_title>   ≫全記事一覧       <%introduction>      <div class="l2"></div> </div>     	 	<div class="c"> 	<div class="l"></div> 		<h2 class="entry-header"><%plugin_third_title></h2> 		<div class="entry-body"> 		<%plugin_third_description> 		<%plugin_third_content> 		<%plugin_third_description2> 		</div> 	</div> 	    	 	<div class="c"> 	<div class="l"></div> 		<h2 class="entry-header">全記事一覧</h2> 		<div class="entry-body"> 		<table> 		<thead><tr> 		<td> 		No. 		</td> 		<td> 		Date 		</td> 		<td> 		Title 		</td> 		<td> 		Category 		</td> 		</tr></thead> 		 		<tr> 		<td> 		<%titlelist_eno> 		</td> 		<td> 		<%titlelist_year> 		<%titlelist_month>/<%titlelist_day> 		</td> 		<td> 		<a href="<%titlelist_url>" title="記事ページへ"><%titlelist_title></a> 		</td> 		<td> 		<%titlelist_category> 		</td> 		</tr> 		 		</table></div> 	</div> 	  	 		 	<div class="c" id="a<%topentry_no>"> 	<div class="l"></div>  <h1 class="entry-header">   <h2 class="entry-header">  		 <a href="<%topentry_link>" title="「<%topentry_title>」の直接アクセス用アドレス"><%topentry_title></a>  </h1>   </h2>   <h2 class="btitle"> <a href="<%url>" accesskey="0" title="「<%blog_name>」トップへ"><%blog_name></a> </h2>  		 		<div class="entry-body"> 			<%topentry_body> 			 			<a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">MORE »</a> 			 			 		</div> 		<div class="entry-body"> 			<%topentry_more> 			 		</div> 		 		 		<ul class="entry-footer1"> 			<li class="trk"> 			 			 | <a href="<%topentry_thread_link>" title="スレッドテーマ"><%topentry_thread_title></a>@<a href="<%topentry_community_janrelink>" title="スレッドテーマのジャンル"><%topentry_community_janrename></a>  |  			 			</li> 			<li class="trk"> 			 			<a href="./?tag=<%topentry_tag_list_parsename>" title="タグ一覧(『<%blog_name>』内)"><%topentry_tag_list_name></a> 			 			</li> 		</ul> 		<ul class="entry-footer2"> 			<li class="date">| <a href="<%url>blog-date-<%topentry_year><%topentry_month>.html" title="月別一覧"><%topentry_year>/<%topentry_month></a><a href="<%url>blog-date-<%topentry_year><%topentry_month><%topentry_day>.html" title="日別一覧">/<%topentry_day></a> | </li> 			<li class="category"><a href="<%topentry_category_link>" title="カテゴリ一覧"><%topentry_category></a></li> 			<li class="com"> 				 				 | <a href="<%topentry_link>#comment-top" title="コメント（<%topentry_comment_list_name>,）">COM : <%topentry_comment_num></a> 				 				 			</li> 			<li class="trk"> 				 				 | <a href="<%topentry_link>#trackback-top" title="トラックバック">TB : <%topentry_tb_num></a> 				 				 |  			</li> 			 			<li class="trk"> 			<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" title="新管理ページ『<%blog_name>』管理者専用">EDIT</a> | </li> 			 		</ul> 	</div> 		 		 	   	 	<h3 id="comment-top">Comment</h3> 	 	<div class="section" id="comment<%comment_no>"> 		<div class="comment-header">[<a href="<%url>blog-entry-<%topentry_no>.html#comment<%comment_no>"><%comment_no></a>] <%comment_title></div> 		<div class="comment-body"> 			<%comment_body> 		</div> 		<ul class="comment-footer"> 			<li>| <%comment_year>/<%comment_month>/<%comment_day> |</li> 			<li><%comment_mail+name> #<%comment_trip></li> 			<li><%comment_url+str></li> 			<li>[ <a href="<%comment_edit_link>" title="コメントの編集">編集</a> ]</li> 		</ul> 	</div> 	 	<h3 class="comment-post">コメントの投稿</h3> 	<form method="post" action="./" name="comment_form"> 		<dl> 			<dt> 				<input type="hidden" name="mode" value="regist"> 				<input type="hidden" name="comment[no]" value="<%pno>"> 				<label for="name">Name</label> 			</dt> 			<dd><input class="i270" id="name" type="text" name="comment[name]" value="<%cookie_name>"></dd> 			<dt><label for="name">Subject</label></dt> 			<dd><input class="i270" id="subject" type="text" name="comment[title]" ></dd> 			<dt><label for="mail">Mail</label></dt> 			<dd><input class="i270" id="mail" type="text" name="comment[mail]" value="<%cookie_mail>"></dd> 			<dt><label for="url">URI</label></dt> 			<dd><input class="i270" id="url" type="text" name="comment[url]" value="<%cookie_url>"></dd> 			<dt><label for="comment">Comment</label></dt> 			<dd><script type="text/javascript" src="<%server_url>load.js"></script> 			<textarea id="comment" class="t270" name="comment[body]"></textarea></dd> 			<dt><label for="pass">Pass</label></dt> 			<dd><input class="i270" id="pass" type="password" name="comment[pass]" ></dd> 			<dt><label for="himitu">Secret</label></dt> 			<dd><input id="himitu" type="checkbox" name="comment[himitu]">管理者にだけ表示を許可する</dd> 		</dl> 		<input type="submit" value="送信"> 	</form> 	 	 	<h3 class="comment-edit">コメントの編集</h3> 	<form method="post" action="./"> 		<dl> 			<dt> 				<input type="hidden" name="mode" value="edit"> 				<input type="hidden" name="mode2" value="edited"> 				<input type="hidden" name="edit[rno]" value="<%eno>"> 				<label for="name">Name</label> 			</dt> 			<dd><input class="i270" id="name" type="text" name="edit[name]" value="<%edit_name>"></dd> 			<dt><label for="name">Subject</label></dt> 			<dd><input class="i270" id="subject" type="text" name="edit[title]" value="<%edit_title>"></dd> 			<dt><label for="mail">Mail</label></dt> 			<dd><input class="i270" id="mail" type="text" name="edit[mail]" value="<%edit_mail>"></dd> 			<dt><label for="url">URI</label></dt> 			<dd><input class="i270" id="url" type="text" name="edit[url]" value="<%edit_url>"></dd> 			<dt><label for="comment">Comment</label></dt> 			<dd><textarea id="comment" class="t270" name="edit[body]"><%edit_body></textarea></dd> 			<dt><label for="pass">Pass</label></dt> 			<dd><input class="i270" id="pass" type="password" name="edit[pass]" ></dd> 			<dt><label for="himitu">Secret</label></dt> 			<dd><input id="himitu" type="checkbox" name="edit[himitu]">秘密にする</dd> 		</dl> 		<input type="submit" value="送信"><input type="submit" name="edit[delete]" value="削除"> 	</form> 	   	 	<h3 id="trackback-top">Trackback</h3> 	<div class="section"> 	<textarea class="trackback-uri"><%trackback_url></textarea> 	 	<div class="trackback-header" id="trackback<%tb_no>"><a href="<%tb_url>" title="「<%tb_title>」のトラックバック発信元"><%tb_title></a></div> 		<div class="trackback-excerpt"> 			<%tb_excerpt> 		</div> 		<ul class="trackback-footer"> 			<li>| <%tb_year>-<%tb_month>-<%tb_day> |</li> 			<li><%tb_blog_name></li> 		</ul> 	 	</div> 	   	 		  <a href="<%preventry_url>" title="<%preventry_title>">«</a>   <a href="<%prevpage_url>" title="前頁へ移動する">«</a>   | <a href="<%url>" title="トップへ戻る">HOME</a> |   <a href="<%nextpage_url>" title="次頁へ移動する">»</a>   <a href="<%nextentry_url>" title="<%nextentry_title>">»</a>  	   <div id="siteinfo-legal">  	© 	<a href="<%url>" title="ブログ記事の著作権">Articles by <%author_name></a>, 	<a href="http://manannan.blog84.fc2.com/" title="テンプレート">Designed by Manannan Mac Lir</a>, <a href="http://publicplugin.blog45.fc2.com/?no=154&style4=154&style2=s" title="カレンダースクリプト">Carendarchive</a> <a href="http://pcafe.blog3.fc2.com/" title="FCafe ～ PCafe FC2 version.">by Pcafe</a>, 	<a href="http://blog.fc2.com/" title="ブログシステム">Powerd by FC2 Blog</a> 	<a href="http://manannan.blog84.fc2.com/blog-entry-146.html" title="カスタマイズ質問受け付けます">Sup.byM </a>  	<%ad><%ad2> </div> </div>  <div id="extra-column" class="column">  <div id="navical"> <div class="menutitle"> <table class="calendar" summary="calendar" border="0" cellspacing="1"> <tr> <td class="calendar0 sun">Sun</td> <td class="calendar0">Mon</td> <td class="calendar0">Tue</td> <td class="calendar0">Wed</td> <td class="calendar0">Thu</td> <td class="calendar0">Fri</td> <td class="calendar0 sat">Sat</td> </tr> </table> </div> <table class="calendar" summary="calendar" border="0" cellspacing="1">  <tr> <td class="wnum"><%calender_sun></td><td class="wsp"> </td> <td class="wnum"><%calender_mon></td><td class="wsp"> </td> <td class="wnum"><%calender_tue></td><td class="wsp"> </td> <td class="wnum"><%calender_wed></td><td class="wsp"> </td> <td class="wnum"><%calender_thu></td><td class="wsp"> </td> <td class="wnum"><%calender_fri></td><td class="wsp"> </td> <td class="wnum"><%calender_sat></td> </tr>  </table> </div> <div id="arch0"> <form action="<%url>" method="get" name="Arch" style="margin:0;padding:0"> <a href="<%prev_month_link>" title=" 前の月 ">≪</a> <select name="date" onchange="document.Arch.submit()"> <option value="<%now_year><%now_month>"><%now_year>年<%now_month>月</option>  <option value="<%archive_year><%archive_month>"><%archive_year>_<%archive_month> (<%archive_count>)</option>  </select> <a href="<%next_month_link>" title=" 次の月 ">≫</a> <noscript> <input type="submit" value="Go" /></noscript> </form> </div> <script type="text/javascript"></script>   	 	 		<div class="menutitle"><%plugin_first_title></div> 		<%plugin_first_description> 		<%plugin_first_content> 		<%plugin_first_description2> 	 	  	 	 		<div class="menutitle"><%plugin_second_title></div> 		<%plugin_second_description> 		<%plugin_second_content> 		<%plugin_second_description2> 	 	 </div>  </div> </body> </html>

スタイルシート

@charset "EUC-JP"; 	/* 全体的に折り返し */ 	* {word-break:break-all} 	/* 余白初期化 */ 	body,div,h1,h2,h3,h4,ul,li { 		margin : 0; 		padding : 0; 	} 	body {font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 		color : #222;			/* 文字の色 */ 		background-color :#ede;		/* 背景の色 */ 		/* 背景画像使用例（背景画像を使わない場合はbackground行を削除して下さい */ 		text-align : center;		/* 古いIEでセンタリングする */ 		font-size : 14px;	/* 古いIEの文字サイズ */ 		line-height : 21px;		/* 行間 */ 	} 	html>body { 		font-size : small !important;	/* Opera用の文字サイズ */ 	} /* リンクの設定 ------------------------------------------------------------ */ 	a { 		text-decoration : none; 	} 	a:link { 		color : #969; 	} 	a:visited { 		color : #969; 	} 	a:hover { 		color : #c9c; 	} 	a.tagword:link {color : #222;} 	a.tagword:visited{color : #222;} 	a.tagword:hover {color : #c9c;} 	a.tagword:active {color : #c9c;} 	a img { 		border-style : none; 		border:0px; 		text-decoration : none; 	} /* レイアウト用ブロックの設定 ------------------------------------------------------------ */ 	div#container {background:#fff; 		position:absolute; left:2%; top:0px; 		width:96%; 		border-left:1px #c9c solid; 		border-right:1px #c9c solid; 		width: expression( document.body.clientWidth < 800? "740px" : "96%" ); 		min-width:740px; 		/* ★メニューカラムが下に「突き抜ける」のが気になる場合、ここを手動で調整してください */ 		height:auto; } 	div.column {text-align:left; 		margin : 15px 0; 	} 	div#primary-column {text-align:left; 		background:#fff; 		margin:0 206px 0 0; 		/* width: expression( document.body.clientWidth < 800? "340px" : "auto" ); */ 		/* min-width:310px; */ 		overflow:hidden; 	} 	div#extra-column {text-align:left; 		background:#fff; 		position:absolute; right:0px; top:0px; 		width:204px; 		overflow:hidden; 	} 	/* 著作表示ブロック */ 	div#siteinfo-legal {background:#fff; 		clear : both;			/* 回り込みを解除 */ 		margin : 0 10px; 	} 	.c,#header {border:1px #c9c solid; 	text-align:center; 	margin:30px 1% 0px 1%; 	} 	.section{margin:30px 1% 0px 1%;} 	div.l {border-bottom:1px #c9c solid; 		background-image : url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree-bar10.png); 		background-color:#ede; 		height : 10px;width:100%;margin:0;padding:0; 		} 	div.l2 {border-top:1px #c9c solid; 		background-image : url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree-bar10.png); 		background-color:#ede; 		height : 10px;width:100%;margin:0;padding:0; 		} /* タイトル・サイトの説明部分の設定 ------------------------------------------------------------ */ 	/* タイトル */ 	h1{text-align:center; 		background:url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree-kage1000.gif) top left no-repeat; 		padding:7px 7px 0 7px; 		font-size : 22px;		/* 古いIEの文字サイズ */ 		font-weight : bold;		/* 太字にする */ 		voice-family : "\"}\"";		/* おまじない */ 		voice-family : inherit;		/* おまじない */ 		font-size : 22px;		/* CSSを正しく解釈出来るブラウザ用の文字サイズ */ 		color:#444; 	} 	/* サイトの説明 */ 	.setsumei {text-align:center; 		margin : 0; 		padding : 0 10px 7px 10px; 		font-size : x-small;		/* 古いIEの文字サイズ */ 		voice-family : "\"}\"";		/* おまじない */ 		voice-family : inherit;		/* おまじない */ 		font-size : small;		/* CSSを正しく解釈出来るブラウザ用の文字サイズ */ 		color:#444; 	} 	html>body div#branding p { 		font-size : small;		/* Opera用の文字サイズ */ 	} 	.btitle{font-size:x-small;text-align:right;margin:3px 1%;} /* Primary-Columnの設定 ------------------------------------------------------------ */ 	/* 記事のタイトル部分 */ 	.entry-header {text-align:left; 		font-weight:bold; 		background:url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree-kage1000.gif) top left no-repeat; 		margin:0;padding:5px 1%; 		font-size :x-small ;		/* 古いIEの文字サイズ */ 		border-bottom : 0px solid #c9c; 		voice-family : "\"}\"";		/* おまじない */ 		voice-family : inherit;		/* おまじない */ 		font-size : small;		/* CSSを正しく解釈出来るブラウザ用の文字サイズ */ 		color:#444; 	} 	html>body div.c h2 { 		font-size : small;		/* Opera用の文字サイズ */ 	} 	.entry-header a:link{color:#444;} 	.entry-header a:visited{color:#444;} 	.entry-header a:hover {color : #c9c;} 	.entry-header a:active {color : #c9c;} 	/* 段落の設定 */ 	div.c p { 		margin : 1em 0;			/* 上下1行分空ける */ 	} 	/* 記事本体部分 */ 	div.entry-body { 		border-top : 1px solid #c9c; 		width:96%; 		margin : 0 auto; 		text-align:left; 		padding : 7px 3px; 		overflow:hidden; 	} 	.entry-body img{ 	margin:7px; 	} 	img.emoji{ 	margin:0px; 	} 	.fc2_footer img{ 	margin:0px; 	} 	/* 追記部分 */ 	p.entry-more { 		padding : 5px 15px 0 0; 		text-align : right; 		font-family:'Arial Black',sans-serif; 	} 	.entry-more a:link{color:#c9c;border:none;} 	.entry-more a:visited{color:#c9c;border:none;} 	.entry-more a:hover{color:#222;border:none;} 	/* フッター部分（コメントやトラックバックなど） */ 	ul.entry-footer1 {font-family:'Arial Narrow',sans-serif; 		text-align:center; 		width:96%; 		margin : 0 auto; 		padding : 3px; 		list-style-position : inside; 		border-top:solid 1px #c9c;	} 	ul.entry-footer2 {font-family:'Arial Narrow',sans-serif; 		text-align:center; 		width:96%; 		margin : 0 auto; 		padding : 3px; 		list-style-position : inside; 		border-top:solid 1px #c9c; 	} 	ul.entry-footer1 li { 		display : inline;color: #c9c; 		list-style-type : none; 	} 	ul.entry-footer2 li { 		display : inline;color: #c9c; 		list-style-type : none; 	} 	.emoji{ 		vertical-align:middle; 		border:0; 	} /* コメント部分の設定 ------------------------------------------------------------ */ 	/* コメントフォーム */ 	div#primary-column form { 		padding : 0 10px; 	} 	/* 管理者だけにコメント */ 	input#himitu { 		margin-right : 0.5em; 	} 	/* コメントフォームのボタン */ 	p.form-btn { 		margin-top : 20px; 	} 	/* コメントトップ */ 	.largea{		font-family:'Arial Black',Arial,sans-serif;} 	h3#comment-top { 		margin : 15px 0 10px 0; 		padding : 0 15px; 		font-family:'Arial Narrow',Arial,sans-serif; 		font-size:25px; 		color:#c9c; 	} 	h3.comment-post, 	h3.comment-edit {font-size:16px; 		color:#c9c; 		padding : 0 15px; 	} 	/* コメントのタイトル */ 	.comment-header {font-weight:bold; 		margin-bottom : 10px; 		padding : 0 10px; 		border-bottom : 1px solid #c9c;		/* 枠線 */ 	} 	/* コメント本文 */ 	div.comment-body { 		padding : 0 10px; 	} 	/* コメントフッター */ 	ul.comment-footer { 		padding : 10px 10px 15px 10px; 	} 	ul.comment-footer li { 		display : inline; 		list-style-type : none; 	} 	.t270	{width:270px;height:160px;} 	.i270	{width:270px;} /* トラックバック部分の設定 ------------------------------------------------------------ */ 	/* トラックバックトップ */ 	h3#trackback-top { 		margin : 15px 0; 		font-family:'Arial Narrow',Arial,sans-serif; 		font-size:25px; 		color:#c9c; 	} 	/* トラックバックURI */ 	.trackback-uri {width:270px;height:2em;line-height:1em; 		margin:0 0 15px 50px; 	} 	/* トラックバックのタイトル */ 	.trackback-header { 		font-weight:bold; 		margin-bottom : 10px; 		padding : 0 10px; 		border-bottom : 1px solid #c9c; 	} 	/* トラックバック先の概要 */ 	div.trackback-excerpt { 		padding : 0 10px; 		background : transparent; 	} 	/* トラックバックフッター */ 	ul.trackback-footer { 		padding : 10px 10px 15px 10px; 		display : inline; 		list-style-type : none; 	} 	ul.trackback-footer li { 		display : inline; 		list-style-type : none; 	} /* メニュータイトル部分 ------------------------------------------------------------ */ 	.menutitle { 		width : 200px; 		height : 26px;	 		background-color:#ede; 		background-image : url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree-menu.png); 		font-size : x-small;		/* 古いIEの文字サイズ */ 		border-bottom : 0px solid #c9c;	/* 下線 */ 		text-align : center;		/* センタリング */ 		voice-family : "\"}\"";		/* おまじない */ 		voice-family : inherit;		/* おまじない */ 		font-size : small;		/* CSSを正しく解釈出来るブラウザ用の文字サイズ */ 	} /* Secondary-Columnの設定 ------------------------------------------------------------ */ 	div#secondary-column ul { 		padding:0px 0px 0px 1.2em; 	}	 	div#secondary-column li { 		color:#ede; 	}	 /* 表（全記事表示に表使用） ------------------------------------------------------------ */ 	table {margin:3px;line-height:1.3; border:1px solid #c9c; 		border-collapse: collapse; 		border-spacing: 0px; 		empty-cells:show;} 	td{padding:3px; border:1px solid #c9c;} /* カレンダー部分の設定☆ ------------------------------------------------------------ */ 	/* カレンダー表示用のテーブル設定 */ 	#navical{text-align:center;} 	.calendar {margin:0 auto;padding:0; 		border:none; 		border-spacing: 0px; 		empty-cells:show; 	} 	/* カレンダー見出（前月・当月・次月などのリンク部分） */ 	.calendar caption { 		margin-bottom : 10px; 	} 	/* カレンダーのセル部分（日付表示部分） */ 	.wnum {font-size:14px; 	border:1px solid #fff; 	border-width:1px 0 0 0; 	margin:0; 	font-family:"Courier New"; 	width:20px; 	height:19px; 	padding:0; 	text-align:center; } 	.wsp {font-size:5px; 	border:none; 	margin:0; 	width:6px; 	padding:0; } 	/* カレンダーリンク部分（記事を書いた日） */ 	.wnum a {	 	display : block; 	width:20px; 	height:19px; 	} 	.wnum a:link{background-image:url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree_c0.gif); 	color:#969;} 	.wnum a:visited{background-image:url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree_c0.gif); 	color:#969;} 	.wnum a:hover{background-image:url(http://blog-imgs-23.fc2.com/m/a/n/manannan/colorfree_c1.gif); 	color:#c9c;} 	/* カレンダーのセル部分（曜日表示部分） */ 	.calendar0{font-size:13px!important; 	border:0px solid #c9c; 	font-family:'Arial Narrow',sans-serif!important; 	width:26px!important; 	margin:0; 	height:16px; 	padding:0px!important; 	text-align:center!important; 	color : #444;	 } 	/* 日曜日 */ 	.sun { 		color : #f06;			/* 日曜日を赤色表示 */ 	} 	/* 土曜日 */ 	.sat { 		color : #06f;			/* 土曜日を青色表示 */ 	} 	/* 月選択部分 */ 	#arch0{text-align:center; 	margin:3px 4px 1em 4px; 	padding-bottom:7px;border-bottom:3px solid #ede;} /* Extra-Columnの設定 ------------------------------------------------------------ */ 	div#extra-column ul { 		padding:0px 0px 0px 1.2em; 	}	 	div#extra-column li { 		color:#ede; 	}	 	.prev-next-navi{text-align:center;} /* フッター部分の設定 ------------------------------------------------------------ */ 	div#siteinfo-legal p { 		padding : 10px 0;		/* パディング */ 		border-top : 1px solid #c9c;	/* 上線 */ 		text-align : center;		/* センタリング */ 	} /* 強調の設定 ------------------------------------------------------------ */ 	/* 強調 */ 	em { 		font-style : italic;	/* 斜体 */ 	} 	/* より強い強調 */ 	strong { 		font-weight : bold;	/* 文字を太字にする */ 	} 	.point{font-style:normal;} /* 引用の設定 ------------------------------------------------------------ */ 	/* 背景に画像を使用したい場合はbackground-colorをbackgroundに修正してお使い下さい */ 	/* 書式・例 */ 	/* background : url("画像のパス") 画像の表示位置 繰り返し指定; */ 	/* background : url("hoge.gif") top left repeat; */ 	blockquote {		line-height : 20px;; 		width : 90%;			/* 幅 */ 		margin : 20px 7% 20px 3%;	/* マージン */ 		padding : 0.3em 0.5em 0 0.5em;		/* パディング */ 		border : 1px solid #c9c;	/* 枠の色と線種 */ 	} 	blockquote p{padding:0;margin:0.5em 0.5em 0 0.5em;} /* コード ------------------------------------------------------------ */ 	/* 記事中にプログラムコードなどを書く時に使います */ 	/* プロポーショナルフォントではなく等幅フォントを指定すると良いでしょう */ 	div.c pre { 		margin : 1em auto; 		padding : 0.5em; 		border : 1px solid #633; 		font-family : sans-serif; 		overflow : auto; 		width : 90%;		/* pre element clearing bug in WinIE */ 	} 	/* for without MacIE5 \*/ 	div.c pre {overflow : scroll;	/* MacIE用バグ対応 */ 	}/* */ 	div.c > pre {width : auto;	/* MacIE用バグ対応 */ 	} 	div.section code { 		font-family : monospace;	/* 等幅フォントを指定 */ 	} /* Mac版IEの文字化け対策 ------------------------------------------------------------ */ 	/* マック版IEでは表示できるフォントを指定しないと文字化けを起こしますので通常は削除しないで下さい */ 	textarea,input,select { 		font-family : "\30D2\30E9\30AE\30CE\20Pro\20W3","Osaka","Verdana","Helvetica","Arial","\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF",sans-serif; 		line-height:1.4; 	}

※リクエストがあってつくったので、文字サイズが固定になっています。