In Cider 共有テンプレート

In Cider

しがないお題屋やってます。
たまにしがないブログデザイン屋に転職してます
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-11-24 (Sun)
Category :

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

Template : Monochrome

Date : 2007-07-25 (Wed)
Category : 共有テンプレート

Name : Monochrome
Last Update : 2006/09/27
Type : PC用テンプレート
Column : 2

無理やり感漂うテンプレート。
IE以外のブラウザで表示させるときに苦労した覚えが。
ひっそりとコメントフォームが気に入っています。

Trackback : Comment : 0

Template : lemonade

Date : 2007-07-25 (Wed)
Category : 共有テンプレート

Name : lemonade
Last Update : 2006/06/12
Type : PC専用テンプレート
Column : 2

一番最初に作ったテンプレート。
画像は全て自作。特徴は特になし。
爽やか系目指して作ってはみたもののいまいち爽やかさに欠けている。

Trackback : Comment : 0

border-style:dotted;

Date : 2007-05-02 (Wed)
Category : 共有テンプレート

Lumpの拍手にてコメントくださった方へ

CSSの記述をするテキストエリア内にある

/*全ての要素に関する設定*/
*{
margin:0px; padding:0px;
background:transparent;
font-size:100%;
font-family:Verdana,Osaka,sans-serif;
line-height:170%;}

という記述の上の下線部を消してください。
次に、上の下線部の記述を削除したままだとテーブルでの文字サイズ、全体のフォントと行間が気になるのでbody{}のfont-size:65%;の代わりに font:65%/170% Verdana,Osaka,sans-serif;を入れ、table{} の中に font:100%/170% Verdana,Osaka,sans-serif; を入れてください。
ただこれは私が好むやり方ですので、記述方法は好きにしてください。
また、気にならなければやらなくても結構です。

蛇足ですが、この*{}で囲まれているものは全ての要素に影響しますので、例えば、<font color="色" size="数字">文字列</font>という形で装飾しようとしても出来ません。(ただし<font style="color:色;font-size:サイズ;">文字列</font>この形なら大丈夫だった気がします)。

Trackback : Comment : 5

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

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

CALENDAR

2024/11

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