*BOT OHA type.T*

type.Tテンプレサイド >> 主にブログ用テンプレ試用&作成

CALENDAR RECOMMEND ENTRY COMMENT TRACKBACK CATEGORY ARCHIVE LINK PROFILE OTHERS

スポンサーサイト

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

| - | - | - | posted by スポンサードリンク - -

テンプレート simple

 新作テンプレート「simple」をutfに公開しました。
 一応これを以って本格始動とさせていただきたく。でもきっとまったり更新。気が向いたときにと云う感じでしょう。

 画像を使わないことと、極力単色でまとめることがメインになっています。

 カラー変更などはご自由に。色制御はほとんどがCSSで行われていますので、CSSファイルの更新だけで大丈夫です。<その「ほとんど」以外というのは、inputのボタン背景色です。これだけはHTMLファイル側で設定してください。

 ソースは以下に。
 ★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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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}" />

</head>

<body>
<a name="top"></a>


<table border="0" cellspacing="0" cellpadding="0" align="center">

<tr valign="top">
<td colspan="2">

<!-- BEGIN title -->
<div class="title">
<h1 class="site_title">{blog_name}</h1>
<div class="description" align="right">{blog_description}</div>
</div>
<!-- END title -->

</td>
</tr>
<tr valign="top">
<td colspan="2" style="border-bottom: 2px solid #FFCC66;">
<!-- BEGIN calendar -->
<div class="calendar">
{calendar_horizontal}
</div>
<!-- END calendar -->
</td>
</tr>
<tr valign="top">
<!-- Center -->
<td width="450">
<!-- BEGIN sequel -->
<div class="entry_navi">
{prev_entry} | <a href="./">main</a> | {next_entry}
</div>
<!-- END sequel -->


<!-- BEGIN entry -->
<div class="entry">

<div class="entry_title"><a href="{entry_permalink}">{entry_title}</a></div>
<div class="entry_author" style="text-align:right;">{entry_date} / Posted by {user_name} </div>
{entry_description}
{entry_sequel}
<div class="entry_state" align="right">
| {category_name} | {entry_time} | {comment_num} | {trackback_num} |
</div>

{trackback_auto_discovery}

</div>

<!-- END entry -->


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

<div class="entry_title">コメント</div>

<!-- BEGIN comment -->
{comment_description}
<div class="entry_state">
| {comment_name} | {comment_time} |
</div>

<!-- END comment -->

<div class="entry_date">コメントする</div>
<div class="entry_body">
<form 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}" /><br />
<label for="email">email:</label><br>
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" /><br />
<label for="url">url:</label><br>
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" /><br />
<label for="description">comments:</label><br />
<textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:400px;"></textarea><br />
<br />
<input type="submit" value="コメント送信" style="background-color: #FFCC66;"/>
<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="entry_title">この記事のトラックバックURL</div>

<div class="entry_body">
{trackback_url}
</div>

<div class="entry_title">トラックバック</div>

<!-- BEGIN trackback -->
<div class="entry_sub">{trackback_title}</div>
{trackback_excerpt}
<div class="entry_state">
| {trackback_blog_name} | {trackback_time} |
</div>
<!-- END trackback -->

</div>
<!-- END trackback_area -->



<!-- BEGIN profile_area -->
<div class="entry">

<div class="entry_title">PROFILE</div>
<div class="entry_sub">{profile_name}</div>
{profile_description}

</div>
<!-- END profile_area -->
<div align="right" style="margin-right: 10px;" class="gotop"><a href="#top">このページの先頭へ▲</a></div>



</td>

<td width="250">
<!-- Right -->

<!-- search -->
<form method="get" action="">
<div class="search">
Search this site.
</div>
<div class="search_box">
<input id="search" name="search" size="20" style="width:140px" class="form" />
<input type="submit" value="Search" style="background-color: #FFCC66;"/>
</div>
</form>
<!-- /search/ -->



<!-- BEGIN profile -->
<div class="entry_title">
*PROFILE
</div>
{user_list}
<!-- END profile -->


<!-- BEGIN selected_entry -->
<div class="entry_title">
*SELECTED ENTRIES
</div>
{selected_entry_list}
<!-- END selected_entry -->

<!-- BEGIN amazon -->
<div class="entry_title">
*RECOMMEND
</div>

{amazon_item}
<!-- END amazon -->


<!-- BEGIN recent_comment -->
<div class="entry_title">
*RECENT COMMENTS
</div>
{recent_comment_list}
<!-- END recent_comment -->

<!-- BEGIN recent_trackback -->
<div class="entry_title">
*RECENT TRACKBACK
</div>
{recent_trackback_list}
<!-- END recent_trackback -->

<!-- BEGIN category -->
<div class="entry_title">
*CATEGORIES
</div>
{category_list}
<!-- END category -->

<!-- BEGIN archives -->
<div class="entry_title">
*ARCHIVES
</div>
{archives_list}

<!-- END archives -->

<!-- BEGIN link -->
<div class="entry_title">
*LINKS
</div>
{link_list}
<!-- END link -->

<!-- powered -->
<div class="entry_title">
*POWERED
</div>
<ul>
<li><a href="./admin/">管理者ページ</a></li>
<li><a href="{site_rss}">RSS1.0</a></li>
<li><a href="{site_atom}">Atom0.3</a></li>
</ul>
<a href="http://jugem.jp/?banner_id=temp" target="_blank"><img src="../template/banner/powered_19a.gif" width="128" height="22" alt="みんなのブログポータル JUGEM" border="0" /></a>

<!-- /powered/ -->
<br />
<br />
<!-- ad 取り外し不可 -->
{ad}

</td>
</tr>


<tr>
<td colspan="2" align="center">
<!-- foot -->
<div class="copyright">
{copyright}
<br />
EDIT::<a href="http://ordin.heavy.jp/" target="_blank">*BOT OHA type.T*</a>
<br />

</div>
</td>
</tr>
</table>

</body>
</html>


 ★CSSファイル
body {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
margin: 0px 0px 0px 0px;
background: #FFFFFF
color: #555555;
}

body,td,th{
color: #555555;
font-size: 10pt;
line-height: 170%;
}

a:link {color:#FF9966; text-decoration:none;}
a:visited {color:#FF9966; text-decoration:none;}
a:active {color:#FFCC66; text-decoration:underline;}
a:hover {color:#FFCC66; text-decoration:underline;}

input, textarea {
border: 1px solid #FFCC66;
}


h1{
margin: 10px 0px 10px 20px;
border-bottom: 3px solid #FFCC66;
background-color: #FFCC66;
color: #FFFFFF;
}

ul{
list-style-type: square;
}

blockquote {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
padding: 10px;
border: 1px dotted #FFCC66;
}

.pict {
border-width: 1px;
border-style: solid;
border-color: #FFCC66;
}

.site_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-weight: bolder;
color: #FFFFFF;
margin: 10px 0px 10px 20px;
}

.site_title a,
.site_title a:link,
.site_title a:visited,
.site_title a:active,
.site_title a:hover {
color:#FFFFFF;
text-decoration:none;
}


.title{
background-color: #FFCC66;
color: #FFFFFF;
font-weight: bolder;
padding-top: 10px;
}

.description {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 15px;
font-weight: bolder;
color: #FFFFFF;
margin-right: 50px;
}

.entry_navi{
font-size:10px;
text-align:center;
}

.entry {
background: #FFFFFF;
margin: 0px 10px 20px 10px;
padding: 20px;
}

.entry_title{
background-color: #FFCC66;
color: #FFFFFF;
font-weight: bold;

}
.entry_sub{
border-bottom: 3px solid #FFCC66;
}

.entry_title,
.entry_title a,
.entry_title a:link,
.entry_title a:visited,
.entry_title a:active,
.entry_title a:hover{
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-weight: bolder;
color: #FFFFFF;
margin: 15px 0px 15px 0px;
padding-left: 5px;
text-decoration:none;
}

.entry_author {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
font-weight: normal;
margin: 15px 0px 15px 0px;
}

.entry_state {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
margin: 20px 0px 25px 0px;
}






/* FOOTER---------------------*/
.copyright,
.copyright a,
.copyright a:link,
.copyright a:visited,
.copyright a:active,
.copyright a:hover {
color:#FFFFFF;
text-decoration:none;
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
background: #FFCC66;
margin: 0px 0px 0px 20px;
text-align: center;
}
.gotop{
font-size: 10px;
}

/* CALENDAR-------- */
.calendar {
font-family: "Verdana";
font-size: 10px;
color: #BBBBBB;

line-height: 140%;

background: #FFFFFF;
margin: 10px 10px 2px 10px;
padding: 10px 10px 3px 10px;
}

/* SEARCH-------- */
.search {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 11px;
color: #666666;
line-height: 170%;
margin: 20px 0px 5px 20px;
}


.search_box {
margin: 0px 0px 5px 20px;
}
| 更新履歴 | comments(13) | trackbacks(0) | posted by 佐倉透 - -

スポンサーサイト

| - | - | - | posted by スポンサードリンク - -

Comment









佐倉さんのテンプレートを利用させていただいて、多少改良しようかと思って始めました。
Searchの上に画像などを入れたら、画像がカレンダーの下の下線とくっついてしまいました。
どこかにマージンをいれればいいのかと思うのですが、初めてのカスタマイズでわかりません。
それと、記事やサイドバーの文字色などは個別に変えたいのですが・・・・
教えていただけませんか?
posted by 薫 | 2006/01/02 9:19 PM |
 ご利用ありがとうございます。
 一番手っ取り早い方法はHTML部分<body>の下辺りにテーブルの定義部分があるんですが、

<table border="0" cellspacing="0" cellpadding="0" align="center">

なっているのを、

<table border="0" cellspacing="0" cellpadding="3" align="center">

のようにcellpaddingの値を大きくすると、テーブルのセルの間を開けるようになるので、全体的に線から離すことが出来るはずです。

サイドバーの色はCSSのentry_titleというクラス指定で一括で指定しています。なので、もし変える場合は、CSS部分で使用していないクラス名を適当につけるか、html部分のdivタグそれぞれに、個別でスタイルを指定する必要があります。
両方の方法を下に書いておきます。

>>プロフィールだけ変えてみます。
★CSSで指定する場合
1,CSS編集部分でクラス名をつくり、背景色、文字色、文字の大きさなんかを指定します。
今回は他のメニューと同じ文字の大きさと太さで、背景を(解りやすく)赤、文字色を白にしようと思います。(赤背景に白字は本当は目に痛いのでお勧めしませんが)
 クラス名は半角英数で。今回はprofとしてみます。
 とすると、CSS部分に以下のタグを加えます。
/* ここから */
.prof{
background-color: #FF0000;
color: #FFFFFF;
font-weight: bold;
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
margin: 15px 0px 15px 0px;
padding-left: 5px;
text-decoration:none;
}
/* ここまで */
これでCSSにクラスを作ることが出来ました。

2,HTML編集部分でprofile部分を引っ張ります。具体的に必要なのはこの部分↓
<!-- BEGIN profile -->
<div class="entry_title">
*PROFILE
</div>
{user_list}
<!-- END profile -->
 ここのclass="entry_title"に注目します。先ほどCSSでクラスを作りました。そのクラス名をentry_titleの代わりに入れます。そうするとこうなります↓
<!-- BEGIN profile -->
<div class="prof">
*PROFILE
</div>
{user_list}
<!-- END profile -->
これで出来上がりです。
背景を変えていくためには、別の名前のクラスを沢山作らなければなりません。
posted by 透 | 2006/01/03 8:47 PM |
続きですー。
★HTMLに個別で指定する。
 一つ一つ変えるならこっちの方が楽かもしれません。
 HTMLのやっぱり↓に注目します。
<!-- BEGIN profile -->
<div class="entry_title">
*PROFILE
</div>
{user_list}
<!-- END profile -->
で。
<div class="entry_title">
を書き換えます。具体的にはこのように↓

<div style="background-color: #FF0000; color: #FFFFFF; font-weight: bold; font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅"; margin: 15px 0px 15px 0px; padding-left: 5px; text-decoration:none;">

これをそれぞれのメニュータイトル部分でやればオッケーです。
posted by 透 | 2006/01/03 8:49 PM |
あーっと、もしかして、記事やサイドバーの文字色というのは、本文そのものなのでしょうか。タイトル部分でなく。
本文そのものだとまたちょっと方法が異なりますので、上の説明で違う場合は「ちがーう」とでもレスしてください。すみません。
posted by 透 | 2006/01/03 11:49 PM |
ていねいなレスで教えていただいてありがとうございます。
カスタマイズするのはまったくの初心者なんで、
週末にチャレンジしてみようと思います。
cellpaddingの件は恐らく解決済みですね。
色に関しては今のままでもいい気がするのですが、
サイドバーのRECENT COMMENTS の下の文字

テンプレート simple
⇒ 透 (01/03)

というような部分の文字の大きさをもう少し小さくして、
行間隔もせばめたいのです。
イメージとしては今使っているcoverのサイドバーの
文字の大きさと行間隔です。
ごちゃごちゃいってすいません。
posted by 薫 | 2006/01/06 12:39 AM |
了解です。
それでしたら、CSSとHTMLそれぞれでクラスを作って対応できます。
まず色換えと同じようにCSSクラスを作ります。文字を小さく、行間を狭くする設定をおきます。

具体的にはこんな感じに↓
/* そのままコピーするならここから */
.menu{
font-size: 8pt;
line-height: 100%;
}
/* ここまで */

font-sizeの数値が文字の大きさ、line-heightが行の高さ(行間)になりますので、好みの値に設定してみてください。今、文字がpt、高さが%で設定されていますが、他の単位も使えます。
単位については↓のサイトを参照すると良いかもです。
http://www.tohoho-web.com/css/reference.htm#font-size (フォントサイズについて)
http://www.tohoho-web.com/css/reference.htm#line-height (行の高さについて)

続いてちょっと大変ですが、HTMLでせっせとdivを指定します。
HTML部分<!-- Right -->以下のうち、
{user_list}
{selected_entry_list}
{amazon_item}
{recent_comment_list}
{recent_trackback_list}
{category_list}
{archives_list}
{link_list}
これらを<div class="menu"></div>で挟みます。こんな感じに。
<div class="menu">{user_list}</div>
これを上の一つ一つで行えばオッケーです。
posted by 透 | 2006/01/06 1:38 AM |
いろいろありがとうございました。
悪戦苦闘しましたが、なんとかできました。
続きを読む の位置が改行されるのと、されないのがあるのは
何か理由があるんでしょうか?
いくつか変えたところがありますが、
シンプルでとても気に入ってます。
色使いは少ないほうがいいみたいで、まだ研究中ですが
とりあえず公開しました。
posted by | 2006/01/09 5:21 PM |
すみません。それは単にタグが入っていないだけです。
本文部分の最後を改行してから、「続きを読む」の部分を記入すれば改行されます。

テンプレで自動改行する場合は
 <!-- BEGIN entry --> 〜 <!-- END entry -->
の中にある
{entry_sequel}
を、
<div>{entry_sequel}</div>
に置換すれば大丈夫だと思います。本文で段落タグ<p></p>を使っていない場合は
<p>{entry_sequel}</p>
でも大丈夫です。
posted by 透 | 2006/01/09 7:35 PM |
早速、治してすっきりしました
初心者におつきあいくださりありがとうございました。
posted by 薫 | 2006/01/09 11:41 PM |
コメント&ご利用ありがとうございました(*- -)(*_ _)
これからもがんばりますです。
posted by 透 | 2006/01/10 6:04 PM |

シンプルで、やわらかいオレンジの色合いも好きなので
このテンプレをお借りしました+
ありがとうございました!!
posted by okuyuki | 2007/05/05 11:12 PM |
連投すいません;

勝手ながら透さんのことを、ブログ内で取り上げさせていただきました。
ご不快になられたなら速攻で削除しますので、どうかお許し下さい(^_^;)

ではでは、乱文連投すいませんでした!!
posted by okuyuki | 2007/05/05 11:22 PM |
ご利用報告ありがとうございます。透です。
レスが遅くなり申し訳ありません。
取り上げていただいたこともありがとうございますv
是非是非可愛がってやってくださいませ<(_ _)>
posted by 透 | 2007/05/11 10:37 PM |

Trackback

この記事のトラックバックURL: http://ordin.jugem.jp/trackback/4
<< NEW | TOP | OLD>>