上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 シンプルテンプレート、そして、一部グラフィカルテンプレートの、完全カスタマイズマニュアルです。
 HTMLのどこに何を入れると上手くカスタマイズできるかが一目で分かります。
 ブックマークボタンの追加位置や、プラグイン3の位置など、こちらで確認してください。




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" xml:lang="<%template_language>" lang="<%template_language>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<%template_charset>" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="author" content="<%author_name>" />
<meta name="description" content="<!--not_permanent_area--><%introduction><!--/not_permanent_area--><!--permanent_area--><!--topentry--><%topentry_discription><!--/topentry--><!--/permanent_area-->" />
<title><!--not_index_area--><%sub_title> | <!--/not_index_area--><%blog_name></title>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
<link rel="top" href="<%url>" title="Top" />
<link rel="index" href="<%url>?all" title="<%template_index>" />
</head>

<body>
<!--■コンテナ■-->
<div id="conteinar">

<!--■ヘッダー■-->
<div id="header">
<h1><a href="<%url>" title="<%blog_name>"><%blog_name></a></h1>
</div>
<div class="intro"><p><%introduction></p></div>


<div id="banner">
<!--☆★☆ヘッダー画像のカスタマイズHTMLの位置☆★☆--> 
</div>

 この部分は、「スタンダードホワイト」「キュートチョコレート」固有のブロックです。

<a href="<%url>">
<img src="http://ヘッダー画像のURL" alt="タイトル" />
</a>


 このように、画像タグ、トップページリンクタグを挿入すれば、オリジナルのヘッダーを挿入することができます。


<!--■カテゴリバー■-->
<div id="cate_bar">
<div class="cate_float_box">
<div class="cate_float">
<a href="<%url>" title="<%blog_name>・トップページ">HOME</a>
</div>
<!--category-->
<div class="cate_float">
<a href="<%category_link>" title="<%category_name> (<%category_count>)"><%category_name></a>
</div>
<!--/category-->
<br clear="all"/>
</div></div>

<!--■メインカラム■-->
<div id="middle">
<div id="main">
<div class="main_body">

プラグイン③を、本文の上に置きたい場合は、こちらにプラグイン③をコピー&ペーストしてください。


<!--●メインエリア●-->
<!--not_search_area-->
<!--not_titlelist_area-->
<!--●記事一覧・追記エリア●-->
<!--topentry-->
<h2 class="title_category"><a href="<%topentry_category_link>"><%topentry_category></a></h2>
<h3 class="title_entry"><a href="<%topentry_link>"><%topentry_title></a></h3>
<div class="text_body">
<%topentry_body>
この上の特殊タグが、本文挿入タグです。
 赤タグの直前、直後に「何らかのアイテム」を挿入すると…

直前であれば「エントリータイトル下、本文直上」に
直後であれば「続きを読むの直上、本文直下」に

 アイテムを挿入することができます。

<!--more_link-->
<div class="more_link">
<a href="<%topentry_link>"><%template_extend></a>
</div>
<!--/more_link-->
<!--more-->
<div id="more"><%topentry_more></div>
この上の赤字タグが、追記挿入の特殊タグです。

<div id="more"> ① <%topentry_more> ② </div>

①の場所にアイテムを挿入すると、詳細記事ページ、本文と追記文の間にアイテムを挿入できます。
②の場所であれば、詳細記事ページ、追記文最終行にアイテムを挿入できます。

②の場所は、広告、ブックマークボタンなどが、一般的に挿入される場所です。
 ちなみに、「</div>」の後にアイテムを入れてしまうと、デザインが若干崩れる場合があります。

<!--/more-->
</div><!--/text_body-->

<div class="text_footer">
<%topentry_year>.
<%topentry_month>.
<%topentry_day>  
<!--allow_comment-->
<a href="<%topentry_link>#cm">Comment. <%topentry_comment_num></a> 
<!--/allow_comment-->
<!--allow_tb-->
<a href="<%topentry_link>#tb" title="">Trackback. <%topentry_tb_num></a>
<!--/allow_tb-->
</div><!--text_footer_day-->
<!--
<rdf:Description
rdf:about="<%topentry_link>"
trackback:ping="<%url>tb.php/<%topentry_tb_no>"
dc:title="<%topentry_title>"
dc:identifier="<%topentry_link>"
dc:subject="<%topentry_category>"
dc:description="<%topentry_discription>"
dc:creator="<%author_name>"
dc:date="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00" />
</rdf:RDF>
-->

<!--/topentry-->

<!--●プラグイン3(トップページ専用)●-->
<!--index_area-->
<!--plugin-->
<div class="text_body">
<!--plugin_third-->
<div class="plg3_title" style="text-align:<%plugin_third_talign>">
<%plugin_third_title>
</div>
<!--plugin_third_description-->
<div class="plg3_header" style="text-align:<%plugin_third_ialign>">
<%plugin_third_description>
</div>
<!--/plugin_third_description-->
<div class="plg3_body" style="text-align:<%plugin_third_align>">
<%plugin_third_content>
</div>
<!--plugin_third_description2-->
<div class="plg3_footer" style="text-align:<%plugin_third_ialign>">
<%plugin_third_description2>
</div>
<!--/plugin_third_description2-->
<!--/plugin_third-->
</div>
<!--/plugin-->
<!--/index_area-->

<!--/not_titlelist_area-->
<!--/not_search_area-->

この上の水色の部分がプラグイン③の1セットです。
 プラグイン③を移動するときは、最後の2行、

<!--/not_titlelist_area-->
<!--/not_search_area-->


を、移動させないように注意してください。
 これを移動させてしまうと、エラーが出てブログが表示されなくなるので注意。


<!--●全記事表示●-->
<!--titlelist_area-->
<div class="title_category">title list</div>
<div class="all">
<!--titlelist-->
<div class="all_list">
<%titlelist_year>/<%titlelist_month>/<%titlelist_day> :
<a href="<%titlelist_category_url>" title="<%template_view_category>"><%titlelist_category></a> :
<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>
</div>
<!--/titlelist-->
</div>
<!--/titlelist_area-->
<!--●サーチエリア●-->
<!--search_area-->
<div class="title_category">search</div>
<div class="title_entry">search : <%sub_title></div>
<div class="search">
<div class="search_body">
<!--topentry-->
<div class="search_list">
<a href="<%topentry_link>"><%topentry_title></a>
<div class="search_dis">
<%topentry_discription>
</div>
</div>
<!--/topentry-->
</div>
</div>
<!--/search_area-->
</div><!--/main_body-->

<div class="pg_top">
<a href="#">Page Top</a>
</div>

<div id="comment_area">
<!--●コメントエリア●-->
<!--comment_area-->
<div class="cmtb_title">Comment</div>
<div id="cm">
<!--comment-->
<h4 id="comment<%comment_no>" class="sub_title"><%comment_title></h4>
<div class="sub_body"><%comment_body></div>
<div class="sub_footer">
<%comment_year>-<%comment_month>-<%comment_day>
<%comment_mail+name> <%comment_url+str>
<a href="<%comment_edit_link>" title="<%template_edit_comment>"><%template_edit></a>
</div>
<!--/comment-->
</div>
<!--/comment_area-->
<!--●トラックバックエリア●-->
<!--trackback_area-->
<div class="cmtb_title">Trackback</div>
<div id="tb">
<!--trackback-->
<h4 id="trackback<%tb_no>" class="sub_title"><a href="<%tb_url>" title="<%tb_title>"><%tb_title></a></h4>
<div class="sub_body"><%tb_excerpt></div>
<div class="sub_footer">
<%tb_year>-<%tb_month>-<%tb_day>
<%tb_blog_name>
</div>
<!--/trackback-->
</div>
<!--/trackback_area-->
<!--●コメントフォーム&トラバURL●-->
<!--trackback_area-->
<div class="cmtb_title">Trackback URL</div>
<div class="tb_url">
<input onfocus="this.select()" value="<%trackback_url>" readonly="readOnly" /><br />
<a href="javascript:window.location.replace('http://blog.fc2.com/?url='+window.location.href);" title=""><%template_trackback_this></a>
</div>
<!--/trackback_area-->

<!--comment_area-->
<div class="cmtb_title">Comment form</div>
<div class="cm_form">
<form action="./" method="post" name="comment_form" id="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<div class="cm_form_top">
<label for="name"><%template_title></label><br />
<input id="subject" name="comment[title]" type="text" size="30" value="No title" onblur="if(this.value == '') this.value='No title';" onfocus="if(this.value == 'No title') this.value='';" /><br />
<label>Font & Icon</label><br />
<script type="text/javascript" src="<%template_comment_js>"></script><br />
<label for="comment"><%template_body></label><br />
<textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea>
</div>
<div class="cm_form_middle">
<label for="name"><%template_name></label><br />
<input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" /><br />
<label for="mail"><%template_address></label><br />
<input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /><br />
<label for="url">URL</label><br />
<input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" />
</div>
<div class="cm_form_bottom">
<label for="pass"><%template_password></label><br />
<input id="pass" type="password" name="comment[pass]" size="20" /><br />
<label for="himitu"><%template_private></label><br />
<input id="himitu" type="checkbox" name="comment[himitu]" /><%template_private_check>
<p class="form_btn"><input type="submit" value="<%template_send>" /></p>
</div>
</form>
</div>
<!--/comment_area-->

<!--●コメントエディットエリア●-->
<!--edit_area-->
<div class="cmtb_title">Comment form Edit</div>
<div class="cm_form">
<form action="./" method="post" name="comment_form" id="comment_form">
<input type="hidden" name="mode" value="edit" />
<input type="hidden" name="mode2" value="edited" />
<input type="hidden" name="edit[rno]" value="<%eno>" />
<div class="cm_form_top">
<label for="name"><%template_title></label><br />
<input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /><br />
<label>Font & Icon</label><br />
<script type="text/javascript" src="<%template_comment_js>"></script><br />
<label for="comment"><%template_body></label><br />
<textarea id="comment" cols="50" rows="5" name="edit[body]"><%edit_body></textarea><br />
</div>
<div class="cm_form_middle">
<label for="name"><%template_name></label><br />
<input id="edit[name]" type="text" name="edit[name]" size="30" value="<%edit_name>" /><br />
<label for="mail"><%template_address></label><br />
<input id="mail" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /><br />
<label for="url">URL</label><br />
<input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /><br />
</div>
<div class="cm_form_bottom">
<label for="pass"><%template_password></label><br />
<input id="pass" type="password" name="edit[pass]" size="20" /><br />
<label for="himitu"><%template_private></label><br />
<input id="himitu" type="checkbox" name="edit[himitu]" /><%template_private_check>
<p class="form_btn"><input type="submit" value="<%template_send>" /><input type="submit" name="edit[delete]" value="<%template_delete>" /></p>
</div>
</form>
</div>
<!--/edit_area-->
</div><!--/comment-->
<!--●ページナビ●-->
<div class="page_navi">
<!--not_permanent_area-->
<!--prevpage-->
<a href="<%prevpage_url>">« <%template_prevpage></a> 
<!--/prevpage-->
<a href="<%url>"><%template_home></a>
<!--nextpage--> 
<a href="<%nextpage_url>"><%template_nextpage> »</a>
<!--/nextpage-->
<!--/not_permanent_area-->
<!--permanent_area-->
<!--preventry-->
<a href="<%preventry_url>">« <%preventry_title></a> 
<!--/preventry-->
<a href="<%url>"><%template_home></a>
<!--nextentry--> 
<a href="<%nextentry_url>"><%nextentry_title> »</a>
<!--/nextentry-->
<!--/permanent_area-->
</div><!--/page_navi-->
</div><!--/main-->

<!--●サイドカラム●-->
<div id="side">
<div align="center">
<!--●○●○●○●↓300pxブログパーツ最上部↓●○●○●○●-->


<!--●○●○●○●↑300pxブログパーツ最上部↑●○●○●○●-->
</div>

<!--plugin-->
<!--plugin_first-->
<div class="side_body">
<div class="plg_title" style="text-align:<%plugin_first_talign>">
<%plugin_first_title>
</div>
<!--plugin_first_description-->
<div class="plg_header" style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</div>
<!--/plugin_first_description-->
<div class="plg_body" style="text-align:<%plugin_first_align>">
<%plugin_first_content>
</div>
<!--plugin_first_description2-->
<div class="plg_footer" style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</div>
<!--/plugin_first_description2-->
</div>
<!--/plugin_first-->
<!--/plugin-->

<!--plugin-->
<!--plugin_second-->
<div class="side_body">
<div class="plg_title" style="text-align:<%plugin_second_talign>">
<%plugin_second_title>
</div>
<!--plugin_second_description-->
<div class="plg_header" style="text-align:<%plugin_second_ialign>">
<%plugin_second_description>
</div>
<!--/plugin_second_description-->
<div class="plg_body" style="text-align:<%plugin_second_align>">
<%plugin_second_content>
</div>
<!--plugin_second_description2-->
<div class="plg_footer" style="text-align:<%plugin_second_ialign>">
<%plugin_second_description2>
</div>
<!--/plugin_second_description2-->
</div>
<!--/plugin_second-->
<!--/plugin-->
<div align="center" style="margin-top:10px;">
<!--●○●○●○●↓300pxブログパーツ最下部↓●○●○●○●-->


<!--●○●○●○●↑300pxブログパーツ最下部↑●○●○●○●-->
</div>

</div><!--/side-->
</div><!--/middle-->

<!--●ブロッククリア●-->
<br clear="all"/>
<div class="pg_top">
<a href="#">Page Top</a>
</div>

<!--■フッター■-->
<div id="footer">
<address>Copyright © <a href="<%url>"><%blog_name></a> All Rights Reserved.</address>
</div>

</div>

<!--FCアド-->
<div id="fc2ad">
<div class="fc2ad_inner">Powered by <a href="http://blog.fc2.com/" title="FC2 BLOG">FC2 Blog</a> |
<%ad> <%ad2> |
Template Design by <a href="http://designlabolatory.blog16.fc2.com/">スタンダード・デザインラボ</a></div>
</div>


</body>
</html>

このエントリーをはてなブックマークに追加
Sun.12.26.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。