In Cider ブログテンプレート「Dot Box」について

しがないお題屋やってます。
たまにしがないブログデザイン屋に転職してます
66名義で登録している共有テンプレートについてのご意見・質問はこのブログのコメントにてお願いします

≪ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 ≫

[PR]

Date : 2024-04-19 (Fri)
Category :

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Date : 2007-03-03 (Sat)
Category : 共有テンプレート

気になったコメントがあったのでここで少し。
「Dot Box」は中央配置にするために position:absolute; を使っているのですが、どうやらこのスタイルシートの属性は忍者さんのカウンタとの相性が悪くカウンタの表示位置がおかしくなりました。

それに足してIEとも相性が悪いようです。
IE以外の Fire Fox ・ Opera ・ Netscape では少々問題(オンマウスでTODAYとYESTERDAYのポップアップが出ない、もしくは位置が変)があるもののカウンタが消える現象はありませんでした。

原因は「Dot Box」の position:absolute; と忍者さんのカウンタ表示タグにある position:relative;top:0px;left:0px; にある模様。といっても、カウンタの方のタグには手の出しようがないのでテンプレートのほうでどうにかしなければいけません。

カウンタが気になる方は以下テキストエリアをコピー&ペーストをしてください。

【上のテキストエリア】

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<meta name="keywords" content="  ">
	<meta name="description" content="">
	<link rel="stylesheet" href="http:///css/" type="text/css">
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http:///RSS/">
	<link rel="alternate" type="application/atom+xml" title="ATOM" href="http:///ATOM/">
	<title> </title>
</head>
<body>
<table width="100%" height="100%">
<tr><td>
	<div id="mainBlock">
		
		<div id="TopBlock">
			<div id="TopTitle">
				<a href=""><span class="TopTitleFont"></span></a>
			</div>
			<div id="TopExplanation">
				
			</div>
		</div>
			<div class="PagetopLinkBlock">
				
					 
				
			</div>
		<div id="EntryBlock">

<div class="EntryInnerBlock">
				<div class="EntryTitle">
					<a href=""><span class="EntryTitleFont"></span></a>
				</div>
				<div class="EntryTextBox">
					<div class="EntryText">
						
					</div>
					
					
					<br>
					<div class="EntryText">
						
					</div>

<div class="EntryPsText">
						<a href=""></a>
					</div>
					
					
				</div>
				<div class="EntryFooter">
					<span class="EntryUserName"></span>
					<span class="EntryWriteDate">
						<a href="/Date//">// ()</a>
					</span>
					<span class="EntryCategory">
						<a href=""></a>
					</span>
					
					<span class="EntryTrackback">
							<a href="#trackback">Trackback()</a>
					</span>

<span class="EntryComment">
						<a href="#comment">Comment()</a>
					</span>
					
				</div>
			</div>

<div class="CommentBlock">
				<div class="CommentMenuTitle">この記事にコメントする</div>

<div class="CommentFormBlock">
<form action="" method="POST">
<a name="comment"></a>
<table class="CommentFormTable" cellpadding="0" cellspacing="0">
<tr>
<td class="CommentFormTh">お名前</td>
<td class="CommentFormTh">タイトル</td>
</td>
</tr>

<div class="CommentTextBox">
					<a name="comment"></a>
					<div class="CommentTitle">
						
						<span class="CommentWriteDate">// :</span>
					</div>
					<div class="CommentText">
						
					</div>
					<div class="CommentFooter">
						<span class="CommentUserName"></span>
						<span class="CommentURL"></span>
						<span class="CommentEdit">
							<a href="">EDIT</a>
						</span>
					</div>
				</div>
				
				<div class="CommentResBlock">
					<div class="CommentResBox">
						<div class="CommentResTitle">
						<span class="CommentResFooter">
							// :
						</span></div>
						<div class="CommentResText"></div>
						
					</div>
				</div>
				
				
			</div>

<div class="TrackbackBlock">
				<div class="TrackbackMenuTitle">この記事へのトラックバック</div>
				<div class="TrackbackURLTitle">
					<a name="trackback"></a>
					この記事にトラックバックする：<input id="TrackbackURL" type="text" name="tbURL" value="" onclick="this.select(0,this.value.length)">
				</div>
				
				<div class="TrackbackTextBox">
					<a name="trackback"></a>
					<div class="TrackbackTitle">
						
					</div>
					<div class="TrackbackText">
						
					</div>
					<div class="TrackbackFooter">
						<span class="TrackbackURL"></span>
						<span class="TrackbackWriteDate">// :</span>
					</div>
				</div>
				
			</div>

</div>

<div class="PluginInnerBlock">
				<div class="PluginTitle ">
					
				</div>
				<div class="PluginExplanation ">
					
				</div>
				<div class="PluginContents ">
				
				</div>
				<div class="PluginExplanation ">
					
				</div>
			</div>

<div class="PluginInnerBlock">
				<div class="PluginTitle ">
					
				</div>
				<div class="PluginExplanation ">
					
				</div>
				<div class="PluginContents ">
				
				</div>
				<div class="PluginExplanation ">
					
				</div>
			</div>

<div class="PluginInnerBlock">
				<div class="PluginTitle ">
					
				</div>
				<div class="PluginExplanation ">
					
				</div>
				<div class="PluginContents ">
				
				</div>
				<div class="PluginExplanation ">
					
				</div>
			</div>

<div class="PluginInnerBlock">
				<div class="PluginTitle ">
					
				</div>
				<div class="PluginExplanation ">
					
				</div>
				<div class="PluginContents ">
				
				</div>
				<div class="PluginExplanation ">
					
				</div>
			</div>
			
		</div>

<div class="CommentBlock">
				<div class="CommentTitle">コメントを編集する</div>

<div class="CommentFormBlock">
					<form action="" method="POST">
<table class="CommentFormTable" cellpadding="0" cellspacing="0">
<tr>
<td class="CommentFormTh">お名前</td>
<td class="CommentFormTh">タイトル</td>
</td>
</tr>

<tr>
<td class="CommentFormTd"><input class="CommentForms" type="text" name="name" value="" style="width:100%;"></td>
<td class="CommentFormTd"><input class="CommentForms" type="text" name="title" value="" style="width:100%;"></td>
</tr>
<tr>
<td class="CommentFormTh">URL</td>
<td class="CommentFormTh">メールアドレス</td>
</tr>
<tr>
<td class="CommentFormTd"><input class="CommentForms" type="text" name="url" value="" style="width:100%;"></td>
<td class="CommentFormTd"><input class="CommentForms" type="text" name="mail" value="" style="width:100%;"></td>
</tr>
<tr>
<td class="CommentFormTh">コメント</td>
</tr>
<tr>
<td class="CommentFormTd" colspan="2"><textarea class="CommentForms" name="comment" cols="40" rows="4" style="width:100%;"></textarea></td>
</tr>
<tr>
<td class="CommentFormTh" colspan="2">
パスワード  
<input class="CommentForms" type="password" name="pass">
<input type="submit" value=" S E N D ">  
</td>
</tr>
</table>
</form>
				</div>
			</div>
		
<div class="PageLinkBlock">
				
					<a href="">≪BACK</a>
				
				<a href="">HOME</a>
				
				<a href="">NEXT≫</a>
				
			</div>
		<div id="FooterBlock">
		<a href="//www.ninja.co.jp/blog/?utm_source=blog&utm_medium=text&utm_campaign=blog_userpage_cm1" target="_blank" title="忍者ブログ">忍者ブログ</a> [PR]<style>.asumi_ad_frame{display:inline-block;}
.asumi_ad_frame div{display:inline-block;}
</style>
<div class="asumi_ad_frame"><script type="text/javascript" charset="utf-8" src="//asumi.shinobi.jp/encount"></script><script type="text/javascript" charset="utf-8" src="//asumi.shinobi.jp/fire?f=184"></script></div>
		</div>
	</div>
</td></tr>
</table>
</body>
</html>

【下のテキストエリア(css)】

/**************************************************************************************
全ブロックの共通設定
**************************************************************************************/
*{
scrollbar-track-color:#fff;
scrollbar-face-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff;
scrollbar-arrow-color:#666;}
/*BODY全体に関する設定*/
body {
font:65%/150% Verdana,Osaka,sans-serif;
color:#999;
overflow-x:auto;
overflow-y:auto;
}
table{font:100%/150% Verdana,Osaka,sans-serif;}
/*<td>の全ての設定*/
td {
text-align:center;
}
/*table全ての設定*/
table{
font-size:100%;
border-collapse: collapse;
}
a{
text-decoration:none;
font-weight:bold;
color:#666;}
/*通常のリンクの設定*/
a:link {
}
/*過去に見たことがあるページのリンクの設定*/
a:visited{
}
/*カーソルが合っている状態のリンクの設定*/
a:hover {
color:#f00;
}
/*アクティブ状態のリンクの設定*/
a:active {
}

/*全体の設定*/
#mainBlock {
width:700px;
height:500px;
margin:auto;
border:1px solid #999;
background-color:#fff;
}
/*テキスト左寄せ*/
.left {
text-align:left;
}
/*テキスト中央寄せ*/
.center {
text-align:center;
}
/*テキスト右寄せ*/
.right {
text-align:right;
}
/**************************************************************************************
トップブロック用デザイン
**************************************************************************************/
/*一番上のブロック（タイトルが書かれる場所）の設定*/
#TopBlock {
border-bottom:1px dotted #999;
text-align: left;
height:50px;
}
/*ページタイトル文字部分の設定*/
#TopTitle {
padding: 10px 20px;
}
/*ページタイトル文字色の設定*/
.TopTitleFont {
}
/*ページタイトルの下に来るブログの説明文書*/
#TopExplanation {
padding: 0px 20px 10px;
}

/**************************************************************************************
フッターブロック用デザイン
**************************************************************************************/
/*一番下のブロック（著作権表示が書かれる場所）の設定*/
#FooterBlock {
clear:both;
border-top:1px dotted #999;
text-align: center;
height:30px;
line-height:30px;
}

/**************************************************************************************
  プラグインブロック用デザイン
**************************************************************************************/
/*プラグイン表示箇所全体の設定*/
.PluginBlock {
width: 208px;
height:375px;
overflow:auto;
text-align: left;
float: right;
}
/*プラグイン表示箇所の背景や余白設定*/
.PluginInnerBlock {
margin:15px 13px;
}
/*プラグインのタイトル（名称）部分の設定*/
.PluginTitle {
margin-top:2em;
border:1px dotted #999;
border-width:1px 0px;
padding:2px;
font-weight:bold;
text-align:center;
color:#666;
}
/*プラグインの説明部分の設定*/
.PluginExplanation {}
/*プラグインが表示される場所の設定*/
.PluginContents {
}
/**************************************************************************************
  記事ブロック用デザイン
**************************************************************************************/
/*記事繰り返し処理全ての部分の設定*/
#EntryBlock {
width: 490px;
height:375px;
float: left;
overflow:auto;
border-right:1px dotted #999;
text-align: left;
}
/*記事表示部分の背景や余白等の設定*/
.EntryInnerBlock {
text-align: left;
margin:0px 20px;
}
/*各記事タイトル部分の設定*/
.EntryTitle {
margin:2em 0em 1em;
border:1px dotted #999;
border-width:1px 0px;
padding:2px;
font-weight:bold;
text-align:center;
color:#666;
}
/*各記事タイトル部分の文字色設定*/
.EntryTitleFont {
}

/*各記事やコメント、トラックバックなどの総合のブロック部分*/
.EntryTextBox {
}
/*記事本文が記載される部分*/
.EntryText {
margin-bottom:20px;
}
/*追記文書が記載される部分*/
.EntryPsText {
text-align:center;
}
/*記事へのリンク（コメントやトラックバック等）の背景*/
.EntryFooter {
text-align:center;
margin-bottom:40px;
}
/*記事の投稿者名が記載されている部分*/
.EntryUserName {
}
/*記事を投稿した日が記載されている部分*/
.EntryWriteDate {
margin-left: 5px;
}
/*記事のカテゴリ名が記載されている部分*/
.EntryCategory {
margin-left: 5px;
}
/*記事へのコメントリンクが記載されている部分*/
.EntryComment {
margin-left: 5px;
}
/*記事へのトラックバックリンクが記載されている部分*/
.EntryTrackback {
margin-left: 5px;
}
/*次の記事やHOMEへのリンクが表示される背景部分*/
.PagetopLinkBlock{
text-align:center;
border-bottom:1px dotted #999;
height:15px;
line-height:15px;
}

.PageLinkBlock{
clear:both;
text-align:center;
border-top:1px dotted #999;
}
/**************************************************************************************
  各コメント表示部分の設定
**************************************************************************************/
/*コメント全体の設定*/
.CommentBlock{
margin:0px 10px;
padding:10px;
}
/*この記事にコメントする　と書かれてる部分の設定*/
.CommentMenuTitle{
text-align: left;
font-weight:bold;
color:#666;
}
/*コメントのタイトル、コメント、コメント情報の全ての背景部分*/
.CommentTextBox{
border:1px dotted #999;
margin-top:1em;
}
/*コメントのタイトル部分*/
.CommentTitle{
text-align: left;
border-bottom:1px dotted #999;
padding:5px;
font-weight:bold;
}
/*コメント部分*/
.CommentText{
padding: 10px;
}
/*投稿者や投稿時間などが表示されている部分*/
.CommentFooter{
text-align:right;
padding:5px;
}
/*投稿者名の部分*/
.CommentUserName{
margin-left: 5px;
}
/*投稿者のホームページへのリンク部分*/
.CommentURL{
margin-left: 5px;
}
/*投稿された時間が記載されている部分*/
.CommentWriteDate{

font-weight:normal;
}
/*コメント編集へのリンク部分*/
.CommentEdit{
margin-left: 5px;
}
/*コメントを投稿するフォーム全体の設定*/
.CommentFormBlock{
}
/*コメントフォーム用テーブル*/
.CommentFormTable{
width:400px;
margin:auto;
}
/*コメントフォームTHタグ設定*/
.CommentFormTh{
padding:5px 5px 0px;
text-align:left;
width:50%;
}
/*コメントフォームTDタグ設定*/
.CommentFormTd{
padding-top:5px;
padding:5px;
text-align:left;
width:50%;
}
/*コメントフォーム送信ボタンのTDタグ設定*/
.CommentFormSubmit{
text-align:left;
}
/*inputタグやtextareaの設定*/
.CommentForms{
}

input,textarea{
margin-right:3px;
font:100%/150% sans-serif;
border:1px solid #ccc;
background-color:#ccc;
}

/**************************************************************************************
  トラックバック表示部分の設定
**************************************************************************************/
/*トラックバック全体の設定*/
.TrackbackBlock{
margin:0px 10px;
padding:10px;
}
/*トラックバックメニューのタイトル部分*/
.TrackbackMenuTitle{
text-align: left;
font-weight:bold;
}
/*トラックバックのタイトル、記事、リンク部分の総合設定*/
.TrackbackTextBox{
border:1px dotted #999;
margin-bottom:3em;
}
/*トラックバックタイトルの部分*/
.TrackbackTitle{
text-align: left;
font-weight:bold;
border-bottom:1px dotted #999;
padding:5px;
}
/*トラックバックの記事部分*/
.TrackbackText{
padding: 10px;
line-height:140%;
}
/*投稿されたブログ名やリンクなどを表示する部分の設定*/
.TrackbackFooter{
text-align:right;
padding:5px;
}
/*トラックバック元のブログ名部分*/
.TrackbackUserName{
margin-left: 5px;
}
/*トラックバック元へのリンク部分*/
.TrackbackFromURL{
margin-left: 5px;
}
/*トラックバックされた日付部分*/
.TrackbackWriteDate{
margin-left: 5px;
}
/*この記事のトラックバック　と書かれた部分の設定*/
.TrackbackURLTitle{
text-align: right;
}
/*トラックバックする為のURLが記載されているフォーム部分の設定*/
.TrackbackURL{
}
/**************************************************************************************
  各プラグイン共通項目用設定
**************************************************************************************/
/*各プラグイン処理内の基本デザイン*/
.Plugin_data,
.plugin_data {
text-align:left;
border-bottom:1px solid #ccc;
}
/*各プラグイン処理内基本デザインの下に記載する日付など*/
.Plugin_data_date,
.plugin_data_date {
text-align:right;
border-bottom:1px solid #ccc;
}
/**************************************************************************************
  カレンダープラグイン用デザイン
**************************************************************************************/
/*カレンダー日付移動用テーブル（前月、次月へのリンクなど）*/
.CalendarMoveTable {
padding:3px;
border-bottom:1px solid #ccc;
width:165px;
}
/*カレンダー日付移動用テーブル、<tr>タグ部分のデザイン*/
.CalendarMoveTr {
}
/*カレンダー日付移動用テーブル内、左側td部分のデザイン*/
.CalendarPrevTd {
}
/*カレンダー日付移動用テーブル内、中央td部分のデザイン*/
.CalendarNowTd {
font-weight:bold;
}
/*カレンダー日付移動用テーブル内、右側td部分のデザイン*/
.CalendarNextTd {
}
/*カレンダー表示用テーブル*/
.CalendarTable {
width:165px;
padding:3px;
}
/*-------------------------------------------------------
  カレンダーテーブル -> 曜日表示部分デザイン
-------------------------------------------------------*/
/*曜日表示部分（<tr>タグ部分）のデザイン*/
.CalendarWdayTr {

}
/*曜日表示部分、日曜日の<th>タグ部分デザイン*/
.CalendarWdaySun {
border-bottom:1px solid #ccc;
}
/*曜日表示部分、平日の<th>タグ部分デザイン*/
.CalendarWday {
border-bottom:1px solid #ccc;
}
/*曜日表示部分、土曜日の<th>タグ部分デザイン*/
.CalendarWdaySat {
border-bottom:1px solid #ccc;
}
/*-------------------------------------------------------
  カレンダーテーブル -> 日付表示部分デザイン
-------------------------------------------------------*/
/*日付表示部分（<tr>タグ部分）のデザイン*/
.CalendarTr {

}

/*日付表示部分、日曜日の<td>タグ部分デザイン*/
.CalendarTdSun {
border-bottom:1px solid #ccc;
}
/*日付表示部分、土曜日の<td>タグ部分デザイン*/
.CalendarTdSat {
border-bottom:1px solid #ccc;
}
/*日付表示部分、平日曜日の<td>タグ部分デザイン*/
.CalendarTd {
border-bottom:1px solid #ccc;
}
/*記事が存在する場所の設定*/
.CalendarTdLink {
background-color:#ccc;
}
/*記事が存在する日付の文字色の設定*/
.CalendarTdLinkFont {
}
/*-------------------------------------------------------
  コメント -> 管理者返信部分デザイン
-------------------------------------------------------*/
.CommentResBlock {
}

.CommentResBox {
	border:1px dotted #999;
	border-top:none;
	margin-bottom:3em;
}

.CommentResTitle {
	border-bottom:1px dotted #999;
	padding:5px;
	font-weight:bold;
}

.CommentResText {
	padding:10px;
}

.CommentResFooter {
	font-weight:normal;
}

Trackback : Comment : 1

この記事にコメントする

無題

2007/03/12 (Mon)

はじめまして。66さんのテンプレ物凄く好みで有難く使わせて頂いております。
この日記は、恐らく私のコメントでお気を使わせてしまったようで申し訳ありません。
重ね重ねの質問で申し訳ないのですが、友人から指摘されて気づいたことがありましたので相談したいと思った次第であります。
mac os9以前の方がどうやらblogが正確に表示されないようなのです。半分欠け状態のようで、私には改善は不可能でした。
改善方法は御座いますでしょうか？
もし宜しければどうぞ宜しくお願い致します。
では失礼致します。

MYZK URL Edit

Re:無題

2007/03/14 (Wed)

はじめまして。66です。

まさか、カウンタが正常に設置されないと思っても見なかったので、カウンタについて頂いたコメントはとても参考になりました。

macついての不具合ですが、残念ながら私にはmacで確認できる環境が無いのでどこをどう直せば良いのか分かりません。
けれども出来る限り、直せる所は直したいと思います。

お手数をかけさせてしまい申し訳ございません。
コメント有難うございました。

この記事へのトラックバック

この記事にトラックバックする：

CALENDAR

2024/04

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Name
Title
Color
Mail
URL
Message
Password