表示されている記事

スポンサーサイト

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


テンプレートを作ってみる【42】

640x480
続きを読む >>

テンプレートを作ってみる【41】

サイドバーがキツキツなので余白の設定をしました
&.sideContent{
background-color:#ffffff;
margin:0 0 20px 0;
padding:10px;
}

テンプレートを作ってみる【40】

幅640pxの写真をブログに載せるとブログとしてカスタマイズを始めたので記事・サイドバー背景色を黒色(#000000)に設定しました

テンプレートを作ってみる【39】

同じカテゴリーの記事・コメント・トラックバックのリンク色を設定しました
.relatedentry a {color:#000000;text-decoration:none;}
.relatedentry a:link {color:#000000;text-decoration:none;}
.relatedentry a:visited {color:#000000;text-decoration:none;}
.relatedentry a:hover {color:#ff6600;text-decoration:underline;}
.relatedentry a:active {color:#000000;text-decoration:none;}
.commentarea a {color:#000000;text-decoration:none;}
.commentarea a:link {color:#000000;text-decoration:none;}
.commentarea a:visited {color:#000000;text-decoration:none;}
.commentarea a:hover {color:#ff6600;text-decoration:underline;}
.commentarea a:active {color:#000000;text-decoration:none;}
.trackbackarea input {width:250px;}
.trackbackarea a {color:#000000;text-decoration:none;}
.trackbackarea a:link {color:#000000;text-decoration:none;}
.trackbackarea a:visited {color:#000000;text-decoration:none;}
.trackbackarea a:hover {color:#ff6600;text-decoration:underline;}
.trackbackarea a:active {color:#000000;text-decoration:none;}

テンプレートを作ってみる【37】

ページのトップへ戻るボタンを設定してみました<head>~</head>に下記のjsを設置しました
<script type="text/javascript" src="./template/more/js/scroll.js" /></script>
ボタンを設置する位置に下記を追記します
<a href="javascript:scrollTop(0,0)" onclick="slowdownScroll();return false;" onkeypress="slowdownScroll();return false;" title="このページのトップへ">▲</a>
今回はページャーの右側に設置しましたそのために前記事から少しHTMLとCSSを書き換えました
<!-- BEGIN page -->
<div id="pager">
<div class="paGer">{full_pager_link}</div>
<div class="pageTop"><a href="javascript:scrollTop(0,0)" onclick="slowdownScroll();return false;" onkeypress="slowdownScroll();return false;" title="このページのトップへ">▲</a></div>
</div>
<!-- END page -->
#pager {
width:640px;
height:12px;/*高さを設定*/
margin:0 auto 20px;
padding:10px;
background-color:#ffffff;
}
#pager span.current{
background-color:#ffffff;
padding:4px 7px;
color:#000000;
font-weight:bold;
}
#pager span a{
background-color:#ffffff;
color:#000000;
padding:4px 7px;
text-decoration:none;
}
#pager span a:hover,#pager span a:active {
background-color:#ffffff;
color:#ff6600;
text-decoration:none;
}
.paGer {float:left;}
.pageTop {float:right;}
.pageTop a {color:#000000;text-decoration:none;}
.pageTop a:link {color:#000000;text-decoration:none;}
.pageTop a:visited {color:#000000;text-decoration:none;}
.pageTop a:hover {color:#ff6600;text-decoration:underline;}
.pageTop a:active {color:#000000;text-decoration:none;}

テンプレートを作ってみる【36】

記事の情報部分(<a href="">~</a>)を設定してみました
<ul class="entrystate">
<li><!-- BEGIN last_year_entry_list -->
<a href="./?eid="{last_year_entry_list_id}">{last_year_entry_list_title}</a>
<!-- END last_year_entry_list --></li>
<li>{entry_year}.{entry_month}.{entry_day} {entry_eng_week_short}</li>
<li>{entry_time_only}</li>
<li>{category_name}</li>
<li>{comment_num}</li>
<li>{trackback_num}</li>
<li><a href="{entry_permalink}">permalink</a></li>
</ul>
ul.entrystate li a {color:#000000;text-decoration:none;}
ul.entrystate li a:link {color:#000000;text-decoration:none;}
ul.entrystate li a:visited {color:#000000;text-decoration:none;}
ul.entrystate li a:hover {color:#ff6600;text-decoration:underline;}
ul.entrystate li a:active {color:#000000;text-decoration:none;}

テンプレートを作ってみる【35】

ページ送り独自タグで出力されるHTMLの確認
  • 独自タグ:{full_pager_link}
<!-- BEGIN page -->
{full_pager_link}
<!-- END page -->
この独自タグが出力するHTML
最初のページ
<span class="current">1</span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=1">2</a></span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=2">3</a></span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=3">4</a></span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=4">5</a></span>
<span class="pager_last"><a href="http://jugemtemplate.jugem.jp/?page=5">&gt;|</a></span>
<span class="pager_next"><a href="http://jugemtemplate.jugem.jp/?page=1">next&gt;&gt;</a></span>
2ページ目
<span class="pager_prev"><a href="http://jugemtemplate.jugem.jp/?page=0">&lt;&lt;back</a></span>
<span class="pager_first"><a href="http://jugemtemplate.jugem.jp/?page=0">|&lt;</a></span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=0">1</a></span>
<span class="current">2</span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=2">3</a></span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=3">4</a></span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=4">5</a></span>
<span class=""><a href="http://jugemtemplate.jugem.jp/?page=5">6</a></span>
<span class="pager_last"><a href="http://jugemtemplate.jugem.jp/?page=5">&gt;|</a></span>
<span class="pager_next"><a href="http://jugemtemplate.jugem.jp/?page=2">next&gt;&gt;</a></span>
細かくカスタマイズする場合は<!-- BEGIN pager -->~<!-- END pager --> で囲む

テンプレートを作ってみる【34】

トラックバックを設定してみました
<!-- BEGIN trackback_area -->
<div class="trackbackarea">
<div>トラックバックURL</div>
<input type="text" value="{trackback_url}" />
<!-- BEGIN trackback -->
<div>{trackback_title}</div>
<div>{trackback_blog_name}</div>
<div>{trackback_excerpt}</div>
<div>{trackback_year}/{trackback_month}/{trackback_day}&nbsp;{trackback_eng_week}&nbsp;{trackback_hour_24}:{trackback_minute}</div>
<!-- END trackback -->
</div>
<!-- END trackback_area -->
.trackbackarea {
width:640px;
margin:0 auto 20px;
padding:10px;
background-color:#ffffff;
}
.trackbackarea input {width:250px;}

テンプレートを作ってみる【33】

コメント部分を設定してみました
<!-- BEGIN comment_area -->
<div class="commentarea">
<div class="commenTitle">コメント</div>
<!-- BEGIN comment -->
<div class="commenBlock">
<div class="commentName">{comment_id}:{comment_name_only}さんからのコメント</div>
<div class="commentDescription">{comment_description}</div>
<div class="commentTime">{comment_year}/{comment_month}/{comment_day}&nbsp;{comment_eng_week}&nbsp;{comment_hour_24}:{comment_minute}</div>
</div>
<!-- END comment -->
<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
<input type="hidden" name="entry_id" value="{entry_id}" class="input" />
<label for="name">name:</label><br />
<input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" class="input" /><br />
<label for="email">email:</label><br />
<input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" class="input" /><br />
<label for="url">url:</label><br />
<input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" class="input" /><br />
<label for="description">comments:</label><br />
<textarea tabindex="4" id="description" name="description" rows="5"></textarea><br />
<input tabindex="5" type="submit" value="コメント送信" onclick="javascript:setval();" />&nbsp;&nbsp;<input type="checkbox" name="set_cookie" value="1" id="set_cookie">&nbsp;<label for="set_cookie">入力情報を登録しますか?</label>
</form>
</div>
<!-- END comment_area -->
.commenTitle {margin:0px 0px 10px 0px;}
.commenBlock {margin:0px 0px 10px 0px;}
.commentName {}
.commentDescription {}
.commentTime {}
.commentarea .input {width:250px;}
.commentarea textarea {width:640px;margin:0 0 10px 0;resize: vertical;overflow: auto;height: 100px;}

テンプレートを作ってみる【32】

関連のある記事(同じカテゴリー)を設定してみました
<!-- BEGIN related_entry -->
<div class="relatedentry">
<div class="relatedentryTitle">同じカテゴリーの記事</div>
{related_entry_list}
</div>
<!-- END related_entry -->
.relatedentry ul {margin:0px 20px 0px 20px; padding:0px 0px 0px 0px;}
.relatedentry ul li {list-style-type:disc;}
.relatedentryTitle {margin:0px 0px 10px 0px;}
続きを読む >>