<< thanx link main BBS >>
スポンサーサイト

一定期間更新がないため広告を表示しています

- cm:0 tb:0
オリジナル
2bit用のテンプレート作ってみました。
恥ずかしながら絵も描いてみました。
近々変更される可能性大ですが。

という訳で新作テンプレートの案は
いくつかあるのですが、
制作が追いつきません…
そういえば何週間か前に
UTFのランキングを占領しているのを発見しました。
<a href="http://img-cdn.jg.jugem.jp/76a/71011/20060521_170908.gif" target="_blank"><img src="http://img-cdn.jg.jugem.jp/76a/71011/20060521_170908.gif" width="120" height="100" alt="あらま" class="pict" /></a>
皆さまのおかげです、ありがとうございます。
キレイ系も作ってみようかな…

テンプレートのソースを載せておきます。
長いですがスミマセン…
トップ画像は1色にして2bitの文字を消してみました。
不具合があったらご報告ください;
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
<link rel="alternate" type="application/atom+xml" href="{site_atom}" />
<script type="text/javascript" src=".template/js/cookie.js"></script>
</head>
<body onload="javascript:initval();">
<div id="header"><a href="http://2bit.jugem.jp/"><img src="http://img-cdn.jg.jugem.jp/76a/71011/20060523_172040.gif" alt="2bit"></a></div>
<div id="wrapper">
<div id="content">
<!-- BEGIN entry -->
<div class="entry">
<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
<div class="entry_date">{entry_date} {entry_time}</div>
<div class="entry_body">{entry_description}</div>
<a name="sequel"></a><div class="entry_more">{entry_sequel}</div>
<div class="entry_state">{category_name} <img src="http://img-cdn.jg.jugem.jp/76a/71011/20060521_170874.gif" align="middle"> <span class="comments_link">{comment_num}</span> <img src="http://img-cdn.jg.jugem.jp/76a/71011/20060521_170874.gif" align="middle"> <span class="trackbacks_link">{trackback_num}</span></div>
{trackback_auto_discovery}
</div>
<!-- END entry -->
<script type="text/javascript">
<!--
// comments、trackbacksのリンク文字をカスタマイズ
function editComTBLink() {
// commentsの代替文字または画像タグ
var comments = 'cm';

// trackbacksの代替文字または画像タグ
var trackbacks = 'tb';

// {comment_num}、{trackback_num}を囲むタグ名
var tagName = 'span';
// {comment_num}を囲むタグのclass属性の値
var commentsLinkClass = 'comments_link';
// {trackback_num}を囲むタグのclass属性の値
var trackbacksLinkClass = 'trackbacks_link';

// *************** 設定ここまで ***************
var obj = document.getElementsByTagName(tagName);
var cn = '';
comments = '>' + comments + '(';
trackbacks = '>' + trackbacks + '(';
for (var i = 0; i < obj.length; i++) {
cn = obj[i].className;
if (cn == commentsLinkClass) {
obj[i].innerHTML = (obj[i].innerHTML).split('>comments(').join(comments);
} else if (cn == trackbacksLinkClass) {
obj[i].innerHTML = (obj[i].innerHTML).split('>trackbacks(').join(trackbacks);
}
}
}
editComTBLink();
//-->
</script>

<!-- BEGIN comment_area -->
<a name="comments"></a>
<div class="entry">

<div class="entry_title">comment</div>

<!-- BEGIN comment -->
<div class="entry_body">
{comment_description}
</div>
<div class="entry_state">
{comment_name} <img src="http://img-cdn.jg.jugem.jp/76a/71011/20060521_170874.gif" align="middle"> {comment_time}
</div>

<!-- END comment -->

<div class="entry_date">send comment</div>
<div class="entry_body">
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" />
<label for="name">name:</label><br/>
<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" />
<label for="email">email:</label><br>
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" />
<label for="url">url:</label><br>
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" />
<label for="description">comments:</label>
<textarea tabindex="4" id="description" name="description" rows="5" cols="30" style="width:250px;"></textarea>

<input tabindex="5" type="submit" value="submit" onclick="javascript:setval();" />
<input type="checkbox" name="set_cookie" value="1" id="set_cookie">
<label for="set_cookie">Cookie</label>
</form>
</div>

</div>

<!-- END comment_area -->

<!-- BEGIN trackback_area -->
<a name="trackback"></a>
<div class="entry">
<div class="trackback-title">trackback url</div>
<div class="entry_body">{trackback_url}</div>
<div class="trackback-title">trackback</div>
<!-- BEGIN trackback -->
<div class="entry_title">{trackback_title}</div>
<div class="entry_body">{trackback_excerpt}</div>
<div class="entry_state">{trackback_blog_name} <img src="http://img-cdn.jg.jugem.jp/76a/71011/20060521_170874.gif" align="middle"> {trackback_time}</div>
<!-- END trackback -->
</div>
<!-- END trackback_area -->

<!-- BEGIN profile_area -->
<div class="entry">
<div class="entry_title">profile</div>
<div class="entry_date">{profile_name}</div>
<div class="entry_more">{profile_description}</div>
</div>
<!-- END profile_area -->

</div>
<div id="sideleft">

<div class="side">
<!-- BEGIN title -->
<div class="site_title"></div>
<div class="description"></div>
<!-- END title -->
</div>

<div class="side">
<!-- BEGIN calendar -->
<div class="linktitle" align="center">
{calendar}
</div>
<!-- END calendar -->
</div>

<div class="side">
<!-- BEGIN freespace3 -->
<div class="linktitle">{freespace_title3}</div>
<div class="linktext">{freespace_contents3}</div>
<!-- END freespace3 -->
</div>

<div class="side">
<!-- BEGIN latest_entry -->
<div class="linktitle">entries</div>
<div class="linktext">
{latest_entry_list}
</div>
<!-- END latest_entry -->
</div>

<div class="side">
<!-- BEGIN category -->
<div class="linktitle">categories</div>
<div class="linktext">
{category_list}
</div>
<!-- END category -->
</div>

<div class="side">
<!-- BEGIN recent_comment -->
<div class="linktitle">comment</div>
<div class="linktext">
<div id="commentlist">{recent_comment_list}</div>
</div>
<!-- END recent_comment -->
</div>

<div class="side">
<!-- BEGIN recent_trackback -->
<div class="linktitle">trackback</div>
<div class="linktext">
<div id="tblist">{recent_trackback_list}</div>
</div>
<!-- END recent_trackback -->
</div>

<div class="side">
<!-- BEGIN archives -->
<div class="linktitle">logs</div>
<div class="linktext">
{archives_list}
</div>
<!-- END archives -->
</div>

<div class="side">
<!-- BEGIN link -->
<div class="linktitle">bookmark</div>
<div class="linktext">
{link_list}
</div>
<!-- END link -->
</div>

<div class="side">
<!-- BEGIN freespace2 -->
<div class="linktitle">{freespace_title2}</div>
<div class="linktext">{freespace_contents2}</div>
<!-- END freespace2 -->
</div>

<div class="side">
<!-- BEGIN freespace4 -->
<div class="linktitle">{freespace_title4}</div>
<div class="linktext">{freespace_contents4}</div>
<!-- END freespace4 -->
</div>

<div class="side">
<!-- BEGIN freespace5 -->
<div class="linktitle">{freespace_title5}</div>
<div class="linktext">{freespace_contents5}</div>
<!-- END freespace5 -->
</div>

<div class="side">
<!-- BEGIN profile -->
<div class="linktitle">profile</div>
<div class="linktext">
{user_list}

<!-- powered -->
<div class="linktext">
<ul>
<li><a href="./admin/">admin</a></li>
<li><a href="./?mode=rss">RSS1.0</a></li>
<li><a href="./?mode=atom">Atom0.3</a></li>
<li><a href="http://jugem.jp/" target="_blank">jugem</a></li>
</ul>
</div>

{ad}
<!-- /powered/ -->
</div>
<!-- END profile -->
</div>
</div>
</div>

<div id="footer">
<!-- BEGIN page -->
<div align="center">{prev_page_link} : {page_now}/{page_num} : {next_page_link}</div>
<!-- END page -->
{copyright}
</div>
<script type="text/javascript">
<!--
function GetElements(tagName, className) {
var ret = [];
var obj = this.document.getElementsByTagName(tagName);
for (var i = 0; i < obj.length; i++)
if (obj[i].className == className) ret[ret.length] = obj[i];
return ret;
}
// reference from NYAN-NYAN-HANTEN (C) ALIMIKA SATOMI http://www.remus.dti.ne.jp/~a-satomi/
// -->
</script>
<script type="text/javascript">
<!--
ChangeMore();
function ChangeMore() {
var outText = '>>>>'; /* 「続きを読む>>」から置き換える文句 */
var viewMode = window.location.search;
if ( viewMode.indexOf("?eid=") > -1 || viewMode.indexOf("?mode=comment") > -1 ) return;
var objMore = GetElements('div','entry_more');
for (i=0;i<objMore.length;i++) {
var linkMore = objMore[i].getElementsByTagName('a');
for (j=0;j<linkMore.length;j++) {
if ( linkMore[j].getAttribute('href').indexOf('#sequel') > -1 ) linkMore[j].firstChild.nodeValue = outText;
}
}
}
// -->
</script>
<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/¥((¥d¥d¥/¥d¥d)¥)/);
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/¥[(.+)¥](.+)/) ) {
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>¥n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>¥n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '├ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '└ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '¥n'; /* 各枝の末尾 */
gTreeOption['top'] = '¥n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
// -->
</script>
</body>
</html>

css

/******** レイアウト ********/
#wrapper{
width:600px;
background: #ffffff;
}
#content{
width:390px;
float:right;
}
#sideleft{
width:200px;
float:left;
}

#header{
width: 600px;
margin-top: 20px;}

#footer{
width: 600px;
background: #ffffff;}

/******** 設定 ********/
body{
background: #150f4a;
color: #707870;
text-align: center;
font: 9px "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
margin: 0px;}

a:link{color: #150f4a; text-decoration: none;}
a:visited{color: #2d20a1; text-decoration: none;}
a:hover{color: #195d7a; text-decoration: none;}

img{border: 0px;}

/********* エントリー ********/
.entry_navi{
margin: 10px 0px 10px 0px;
text-align: center;
}

.entry {
width: 390px;
margin: 0px;
margin-top: 5px;
background: #ffffff;
border: #bbb 1px solid;
border-right-color: #fff;
}

.entry_date {
font-size: 9px;
margin: 5px 0px 5px 0px;
padding-bottom: 3px;
text-align: right;
}

.entry_title {
margin: 0px;
text-align: left;
border-bottom: 1px dashed #cccccc;
padding: 3px;
padding-left: 15px;
background: url(http://img-cdn.jg.jugem.jp/76a/71011/20060521_170874.gif) no-repeat 3px center;
}

.entry_body {
line-height: 170%;
margin: 5px 0px 10px 15px;
text-align: left;
}

.entry_more {
line-height: 170%;
margin: 5px 0px 20px 25px;
text-align: left;
border-bottom:1px dashd #dddddd;
}

.entry_state {
text-align: right;
padding-top: 3px;
border-top: 1px dashed #cccccc;
}

blockquote {
margin: 20px 10px 20px 10px;
padding: 10px;
border-left: 3px solid #CCCCCC;
}

.comment-title {
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #CCCCCC;
text-align: left;}

.trackback-title {
margin: 10px 0px 10px 0px;
padding-bottom: 3px;
border-bottom: 1px dotted #CCCCCC;
text-align: left;
}

.pict {
border-width: 3px;
border-style: solid;
border-color: #fff;
margin: 2px;}

input,textarea{
border: 0px;
filter:progid:DXImageTransform.Microsoft.Gradient
(startcolorstr='#ffffff',endcolorstr='#d9d6f7',gradienttype='1')
}


/********* サイドバー ********/
li{list-style-image: url(http://img-cdn.jg.jugem.jp/76a/71011/20060520_170507.gif);}

.list{list-style: none;
list-style-position: outside;}

.calendar_month {
padding: 3px 0px 10px 0px;
}
.calendar_month a, .calendar_month a:link, .calendar_month a:visited, .calendar_month a:active {
text-decoration:none;}

.side{background: #ffffff;
border:#bbb 1px solid;
border-left-color: #fff;
margin-top: 5px;
padding: 2px;}

.linktitle {
}
.linktext {
margin: 3px;
text-align:left;
}

.site_title{text-align: right;}
message cm:4 tb:0
スポンサーサイト
- cm:0 tb:0
comment
2bitさま、こんばんは。

「わぁ・・かわいい〜♪」
と2bitさま用のテンプレートを見て
ひとりで言っちゃいました。

とってもかわいいです!
使わせて頂きたいと思うほどです。

絵も色も雰囲気も素敵です^^

2bitさまの新作を本当に楽しみにしています。
まき 2006/05/22 12:15 AM
>>まきさん
あ!まさについさっきでした!
とても嬉しいコメントありがとうございます…
照れます…(ノ´∀`*)てれてれ。
絵はひそかに「2bit」の文字になっています。
気づいていただけたでしょうか?
今新しいテンプレート作成中ですので
また覗いてみてくださいね。
2bit 2006/05/22 12:20 AM
こんばんは。以前のテンプレートもステキでしたが、今回のテンプレートは、シンプルでとっても読みやすくて、落ち着きます…v 余白の広さ、題名やコメント欄の位置、小さな可愛らしいアイコンなど、理想のテンプレートです!できれば、テンプレート公開していただきたいなぁ…、と願ってます。
 絵の動物たちがとてもかわいくて、顔がほころんでしまいますv
 新しいテンプレートも楽しみにしています。
雨好き 2006/05/23 1:14 AM
>>雨好きさん
どうもこんにちは。
テンプレートの感想とっても嬉しいです*
ありがとうございます。
気に入っていただけたようで
作者冥利に尽きますです…
トップのイラストが2bit用なので
そのままお使いいただくのは
ちょっとあれかもしれませんが、
ちょっと手を加えてソースを本文に追加しておきます。
コメントありがとうございました(・ω・)
2bit 2006/05/23 7:23 PM




trackback url
http://2bit.jugem.jp/trackback/23
trackback
     12
3456789
10111213141516
17181920212223
24252627282930
<< September 2017 >>
counter
entries
categories
comment
template
森の時間の記事に
森の時間(横長バージョン)
春のイラスト追加しました。

昭和の赤 sample
紅茶の色 sample
淡い小径 sample
あなたへ sample
レシート sample
サークル sample
森の時間 sample
海の飛沫 sample
シロップ. sample
サンクス sample

出張 2bit
profile