カスタマイズ

変更したい項目を埋めて生成ボタンを押すとHTMLスタイルシートが生成されるので、
テンプレート設定の各項目にコピペで貼り付ければカスタマイズ完了です。

SNSの設定
HTMLの設定

スタイルシートの設定
プラグイン
生成
<!--permanent_area--> <link rel="stylesheet" type="text/css" charset="utf-8" href="http://blog-imgs-56-origin.fc2.com/f/c/2/fc2ist/theme-poto-timeline.css" /> <script type="text/javascript" charset="utf-8" src="http://blog-imgs-56.fc2.com/f/c/2/fc2ist/jquery_masonry.js"></script> <script type="text/javascript" charset="utf-8" src="http://blog-imgs-56-origin.fc2.com/f/c/2/fc2ist/theme-poto-timeline.js"></script> <!--/permanent_area--> <link rel="stylesheet" type="text/css" charset="utf-8" href="http://blog-imgs-56.fc2.com/f/c/2/fc2ist/theme-poto-lettering.css" /> <script type="text/javascript" charset="utf-8" src="http://blog-imgs-56.fc2.com/f/c/2/fc2ist/theme-poto-lettering.js"></script> /* Title Image --------------------------------------------------*/ #header h1 a { display: block; font: 0/0 a; color: transparent; text-shadow: none; border: 0; background: transparent url({{:url}}) no-repeat 0 0; width: {{:width}}px; height: {{:height}}px; } /* Layout --------------------------------------------------*/ #main { float: right; } #sidebar { float: left; } /* Layout --------------------------------------------------*/ #header h1, #header h2 { width: 450px; } #header .navbar { width: 620px; } #header .navbar .navbar-inner { background-image: url(http://blog-imgs-56.fc2.com/f/c/2/fc2ist/poto-menu-mini.gif); } #wrapper { width: 610px; } #main { float: none; width: auto; } #sidebar { float: none; width: auto; } #sidebar > section { width: 300px; } #sidebar > .first { float: left; } #sidebar > .second { float: right; } #sidebar:before, #sidebar:after { display: table; content: ""; line-height: 0; } #sidebar:after { clear: both; } #footer .wrapper { width: 610px; } /*! * * User Style Sheet * */ /* Scaffolding --------------------------------------------------*/ body { color: {{:color}}; background-color: {{:backgroundColor}}; {{:backgroundImage}} } a { color: {{:linkColor}}; } a:hover { color: {{:linkColorHover}}; } /* Timeline --------------------------------------------------*/ #cm .reaction .timeline::before, #tb .reaction .timeline::before { background-color: #eee; } #cm .reaction .timeline article, #tb .reaction .timeline article { background-color: #fff; border-color: #eee; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } #cm .reaction .timeline article::after, #tb .reaction .timeline article::after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAALCAYAAAA9St7UAAABVUlEQVRIS2P8DwTv379nEBISYmQgDFihSriANDMQ/wXib1Cx34S1Y6ig2Lx37979FxQUZGAEeQRkPBGeYRWxdhV1jiut5OITSWRlY+P+/evX12+f3szfu6i7/c3R3a+BxpDiGYrNg3kC5H64Rwh4Bmypb2bbQS99WRUHJUEGES42hjfffjEcuPeeYdvFx3c2T6+yJ8EzFJuH7AkMj+DxDGv4zF19oVZ6OcE64hjpY+2Vlwyrj12asjLdrYjIWCFo3tojl6ctz3QtwGYeuiewegSHZ/gTl5972uWnzQ2KCXQAipmyTVe/zo80kgbKfSQir5BtHjZP4PQIFs8Ipa298nZmkDZON6avu8owK1hHGKjgHREeIcs8XJ4Y3jGCo/RijZy+e0KwjW4WvfIIvjxHMI/gKYIpLmXQkhvF5uEstYZFPUKEJ2ABSnFNjB4zUD7ZLQVYzAAAz8SE74GVNXMAAAAASUVORK5CYII=); } <!--index_area--> <section id="index-carousel" class="carousel slide fade"> <div class="carousel-inner"> <!--topentry--> <div class="item" data-target="<%topentry_no>"> <a href="<%topentry_link>" rel="bookmark" title="<%topentry_title>"><img class="img-eyecatch" alt="<%topentry_title>" /></a> <div class="carousel-caption"> <h4><a href="<%topentry_link>" rel="bookmark"><%topentry_title></a></h4> <p><%topentry_discription></p> </div> </div> <!--/topentry--> </div> <a class="carousel-control left" href="#index-carousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#index-carousel" data-slide="next">&rsaquo;</a> </section> <!--/index_area--> <!DOCTYPE html> <html lang="<%template_language>"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="viewport" content="width=device-width" /> <!--not_permanent_area--><meta name="description" content="<%introduction>" /><!--/not_permanent_area--> <!--permanent_area--><meta name="description" content="<%topentry_discription>" /><!--/permanent_area--> <meta name="author" content="<%author_name>" /> <title><%sub_title><!--tag_area--> | <!--/tag_area--><!--search_area--> | <!--/search_area--><!--category_area--> | <!--/category_area--><!--date_area--> | <!--/date_area--><!--permanent_area--> | <!--/permanent_area--><!--titlelist_area-->Archives | <!--/titlelist_area--><!--edit_area--> | <!--/edit_area--><%blog_name></title> <link rel="stylesheet" type="text/css" charset="utf-8" href="http://blog-imgs-56-origin.fc2.com/f/c/2/fc2ist/theme-poto-min.css" /> <link rel="stylesheet" type="text/css" charset="utf-8" href="<%css_link>" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" /> <link rel="archives" href="/archives.html" title="All Archives" /> <!--preventry--><link rel="prev" href="<%preventry_url>" title="<%preventry_title>" /><!--/preventry--> <!--nextentry--><link rel="next" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry--> <!--prevpage--><link rel="prev" href="<%prevpage_url>" title="Previous Page" /><!--/prevpage--> <!--nextpage--><link rel="next" href="<%nextpage_url>" title="Next Page" /><!--/nextentry--> <!--permanent_area--><link rel="canonical" href="<%url><%topentry_rlink>" /><!--/permanent_area--> <!--[if lt IE 9]> <script type="text/javascript" charset="utf-8" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://blog-imgs-56.fc2.com/f/c/2/fc2ist/bootstrap.js"></script> <script type="text/javascript" charset="utf-8" src="http://blog-imgs-56-origin.fc2.com/f/c/2/fc2ist/jquery_fc2_min.js"></script> <script type="text/javascript" charset="utf-8" src="http://blog-imgs-56-origin.fc2.com/f/c/2/fc2ist/theme-poto-min.js"></script> {{:plugin.timeline}} {{:plugin.lettering}} {{:head_bottom}} </head> <body class="type-<!--permanent_area-->permanent<!--/permanent_area--><!--titlelist_area-->titlelist<!--/titlelist_area--><!--date_area-->date<!--/date_area--><!--category_area-->category<!--/category_area--><!--search_area-->search<!--/search_area--><!--tag_area-->tag<!--/tag_area--><!--edit_area-->edit<!--/edit_area-->"> {{:body_top}} <div id="wrapper"> <header id="header"> <hgroup> <h1><a href="<%url>"><%blog_name></a></h1> <h2><%introduction></h2> </hgroup> <nav class="navbar navbar-static-top"> <div class="navbar-inner"> <ul class="nav"> <li<!--index_area--> class="active"<!--/index_area-->><a href="/">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Latest Entries <b class="caret"></b> </a> <ul class="dropdown-menu"> <!--recent--> <li> <a href="<%recent_link>" title="<%recent_title>"><%recent_title><span class="badge badge-inverse"><%recent_month>-<%recent_day></span></a> </li> <!--/recent--> </ul> </li> <li class="dropdown<!--category_area--> active<!--/category_area-->"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Categories <b class="caret"></b> </a> <ul class="dropdown-menu"> <!--category--> <!--category_sub_begin--><ul class="dropdown-menu"><!--/category_sub_begin--> <!--category_nosub--> <li> <!--/category_nosub--> <!--category_parent--> <li class="dropdown-submenu"> <!--/category_parent--> <!--category_sub_hasnext--> <li> <!--/category_sub_hasnext--> <!--category_sub_end--> <li> <!--/category_sub_end--> <a href="<%category_link>" title="<%category_name>"><%category_name><span class="badge badge-inverse"><%category_count></span></a> <!--category_nosub--> </li> <!--/category_nosub--> <!--category_sub_hasnext--> </li> <!--/category_sub_hasnext--> <!--category_sub_end--> </li> </ul> </li> <!--/category_sub_end--> <!--/category--> </ul> </li> <li class="dropdown<!--date_area--> active<!--/date_area-->"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Archives <b class="caret"></b> </a> <ul class="dropdown-menu"> <!--archive--> <li><a href="<%archive_link>" title="<%archive_year>.<%archive_month>"><%archive_year>.<%archive_month><span class="badge badge-inverse"><%archive_count></span></a></li> <!--/archive--> </ul> </li> </ul> </div> </nav> <div class="twitter"><a href="http://twitter.com/{{:sns.twitter}}" title="Follow me">Follow me</a></div> </header><!-- /#header --> <div id="content"> <div id="main"> <!--date_area--> <h1><%sub_title></h1> <!--/date_area--> <!--category_area--> <h1><%sub_title></h1> <!--/category_area--> <!--search_area--> <h1><%sub_title></h1> <!--/search_area--> <!--tag_area--> <h1><%sub_title></h1> <!--/tag_area--> <!--titlelist_area--> <h1>Archives</h1> <!--/titlelist_area--> {{:plugin.carousel}} <section id="articles"> <!--not_titlelist_area--> <!--topentry--> <article class="post" id="e<%topentry_no>"> <header> <!--permanent_area--><h1><%topentry_title></h1><!--/permanent_area--> <!--not_permanent_area--><h2><a href="<%topentry_link>" rel="bookmark" title="<%topentry_title>"><%topentry_title></a></h2><!--/not_permanent_area--> <ul class="meta"> <li class="date"> <time datetime="<%topentry_year>-<%topentry_month>-<%topentry_day>T<%topentry_hour>:<%topentry_minute>:<%topentry_second>+09:00"><%topentry_year>-<%topentry_month>-<%topentry_day></time> </li> <li class="category"> <a href="<%topentry_category_link>"><%topentry_category></a> </li> <!--topentry_tag--> <li class="tag"> <ul> <!--tag_list--> <li><a href="/?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a></li> <!--/tag_list--> </ul> </li> <!--/topentry_tag--> <!--community--> <li class="community"> <%template_theme>: <a href="<%topentry_thread_link>" title="<%template_genre>:<%topentry_community_janrename>"><%topentry_thread_title></a> </li> <!--/community--> </ul> </header> <div class="body" data-eno="<%topentry_no>" data-title="<%topentry_title>"> {{:post_top}} <%topentry_body> <aside> <!--more_link--><div class="continue"><a href="<%topentry_link>#more" title="<%topentry_title>"><%template_extend></a></div><!--/more_link--> </aside> <!--more--> <div id="more"> {{:post_middle}} <%topentry_more> </div> <!--/more--> {{:post_bottom}} </div> <!--not_permanent_area--> <footer> <ul class="reaction"> <!--allow_comment--><li><a href="<%topentry_link>#cm" data-num="<%topentry_comment_num>"><%template_comment></a></li><!--/allow_comment--> <!--allow_tb--><li><a href="<%topentry_link>#tb" data-num="<%topentry_tb_num>"><%template_trackback></a></li><!--/allow_tb--> <li class="pagetop"><a href="#header"><%template_go_top></a></li> </ul> </footer> <!--/not_permanent_area--> <!--comment_area--> <aside id="cm"> <section class="reaction"> <h2 title="<%template_comment>">Comments</h2> <div class="articles"> <!--comment--> <article id="comment<%comment_no>"> <header> <h3><%comment_url+name><span class="title"><%comment_title></span></h3> </header> <div class="body"> <%comment_body> </div> <footer> <time datetime="<%comment_year>-<%comment_month>-<%comment_day>-<%comment_hour>-<%comment_minute>-<%comment_second>"> <%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> </time> <!--comment_edit--><span class="edit"><a href="<%comment_edit_link>" title="<%template_edit_comment>"><%template_edit></a></span><!--/comment_edit--> </footer> </article> <!--/comment--> </div> </section> <section class="action"> <div class="wrapper"> <h2 title="<%template_post_comment>">Post a comment</h2> <div class="alert alert-error hide"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error!</strong> <p><%edit_message></p> </div> <form action="./" method="post"> <p class="form-inline"> <input id="cm-name" type="text" tabindex="1" name="comment[name]" value="<%cookie_name>" placeholder="<%template_name>" /><label for="cm-name">: <%template_name></label> </p> <p class="form-inline"> <input id="cm-subject" type="text" tabindex="2" name="comment[title]" value="" placeholder="<%template_title>" /><label for="cm-subject">: <%template_title></label> </p> <p class="form-inline"> <input id="cm-email" type="email" tabindex="3" name="comment[mail]" value="<%cookie_mail>" placeholder="<%template_address>" /><label for="cm-email">: <%template_address></label> </p> <p class="form-inline"> <input id="cm-url" type="url" tabindex="4" name="comment[url]" id="" value="<%cookie_url>" placeholder="URL" /><label for="cm-url">: URL</label> </p> <p> <textarea name="comment[body]" tabindex="5" placeholder="<%template_body>" required></textarea> </p> <p class="form-inline"> <input id="cm-pw" type="password" tabindex="6" name="comment[pass]" placeholder="<%template_password>" /><label for="cm-pw">: <%template_password></label> </p> <!--accept_secret_comment--> <p class="form-inline"> <input type="checkbox" id="himitu" name="comment[himitu]" value="1" /><label for="himitu"><%template_private_check></label> </p> <!--/accept_secret_comment--> <p> <input type="hidden" name="mode" value="regist" /> <input type="hidden" name="comment[no]" value="<%pno>" /> <button type="submit" class="btn btn-primary" tabindex="7"><%template_send></button> </p> </form> </div> </section> </aside> <!--/comment_area--> <!--trackback_area--> <aside id="tb"> <section class="reaction"> <h2 title="<%template_trackback>">Trackbacks</h2> <div class="articles"> <!--trackback--> <article id="tb<%tb_no>"> <header> <h3><a href="<%tb_url>" rel="nofollow"><%tb_title> - <%tb_blog_name></a></h3> </header> <div class="body"> <%tb_excerpt> </div> <footer> <time datetime="<%tb_year>-<%tb_month>-<%tb_day>T<%tb_hour>:<%tb_minute>:<%tb_second>"><%tb_year>.<%tb_month>.<%tb_day> <%tb_hour>:<%tb_minute></time> </footer> </article> <!--/trackback--> </div> </section> <section class="action"> <div class="wrapper"> <h2 title="<%template_trackback> URL">Trackback URL</h2> <p> <input type="url" value="<%trackback_url>" /> </p> </div> </section> </aside> <!--/trackback_area--> </article> <!--/topentry--> <!--/not_titlelist_area--> <!--edit_area--> <article class="post"> <aside id="cm"> <section class="action"> <div class="wrapper"> <h2 title="<%template_edit_comment>">Edit a comment</h2> <div class="alert alert-error hide"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Error!</strong> <p><%edit_message></p> </div> <form action="./" method="post"> <p class="form-inline"> <input id="cm-name" type="text" tabindex="1" name="edit[name]" value="<%edit_name>" placeholder="<%template_name>" /><label for="cm-name">: <%template_name></label> </p> <p class="form-inline"> <input id="cm-subject" type="text" tabindex="2" name="edit[title]" value="<%edit_title>" placeholder="<%template_title>" /><label for="cm-subject">: <%template_title></label> </p> <p class="form-inline"> <input id="cm-email" type="email" tabindex="3" name="edit[mail]" value="<%edit_mail>" placeholder="<%template_address>" /><label for="cm-email">: <%template_address></label> </p> <p class="form-inline"> <input id="cm-url" type="url" tabindex="4" name="edit[url]" id="" value="<%edit_url>" placeholder="URL" /><label for="cm-url">: URL</label> </p> <p> <textarea name="edit[body]" tabindex="5" placeholder="<%template_body>" required><%edit_body></textarea> </p> <p class="form-inline"> <input id="cm-pw" type="password" tabindex="6" name="edit[pass]" placeholder="<%template_password>" /><label for="cm-pw">: <%template_password></label> </p> <p class="form-inline"> <input type="checkbox" id="himitu" name="edit[himitu]" value="1" /><label for="himitu"><%template_private_check></label> </p> <p> <input type="hidden" name="mode" value="edit" /> <input type="hidden" name="mode2" value="edited" /> <input type="hidden" name="edit[rno]" value="<%eno>" /> <button type="submit" class="btn btn-primary" tabindex="7"><%template_send></button> <input class="btn btn-danger" type="submit" name="edit[delete]" value="<%template_delete>" /> </p> </form> </div> </section> </aside> </article> <!--/edit_area--> <!--titlelist_area--> <!--titlelist--> <article class="post" id="e<%titlelist_eno>"> <header> <h2><a href="<%titlelist_url>" rel="bookmark" title="<%titlelist_title>"><%titlelist_title></a></h2> <ul class="meta"> <li class="date"> <time datetime="<%titlelist_year>-<%titlelist_month>-<%titlelist_day>T<%titlelist_hour>:<%titlelist_minute>:<%titlelist_second>+09:00"><%titlelist_year>-<%titlelist_month>-<%titlelist_day></time> </li> <li class="category"> <a href="<%titlelist_category_url>"><%titlelist_category></a> </li> </ul> </header> <div class="body"> <%titlelist_body>... <div class="continue"><a href="<%titlelist_link>" title="<%titlelist_title>"><%template_extend></a></div> </div> <footer> <ul class="reaction"> <!--allow_comment--><li><a href="<%titlelist_link>#cm" data-num="<%titlelist_comment_num>"><%template_comment></a></li><!--/allow_comment--> <!--allow_tb--><li><a href="<%titlelist_link>#tb" data-num="<%titlelist_tb_num>"><%template_trackback></a></li><!--/allow_tb--> <li class="pagetop"><a href="#header"><%template_go_top></a></li> </ul> </footer> </article> <!--/titlelist--> <!--/titlelist_area--> </section> <!--not_permanent_area--><nav id="pager" class="pagination" data-total="<%total_pages>" data-current="<%current_page_num>"></nav><!--/not_permanent_area--> <!--permanent_area--> <nav id="pager"> <ol class="pager"> <!--preventry--><li class="previous"><a href="<%preventry_url>" title="<%preventry_title>"><%template_preventry></a></li><!--/preventry--> <!--nextentry--><li class="next"><a href="<%nextentry_url>" title="<%nextentry_title>"><%template_nextentry></a></li><!--/nextentry--> </ol> </nav> <!--/permanent_area--> </div><!-- /#main --> <div id="sidebar"> <!--plugin--> <section class="first"> <!--plugin_first--> <div class="plugin <%plugin_first_tag>"> <h3 class="<%plugin_first_talign>"><%plugin_first_title></h3> <div class="<%plugin_first_align>"> <!--plugin_first_description--><div class="<%plugin_first_ialign>"><%plugin_first_description></div><!--/plugin_first_description--> <%plugin_first_content> <!--plugin_first_description2--><div class="<%plugin_first_ialign>"><%plugin_first_description2></div><!--/plugin_first_description2--> </div> </div> <!--/plugin_first--> </section> <section class="second"> <!--plugin_second--> <div class="plugin <%plugin_second_tag>"> <h3 class="<%plugin_second_talign>"><%plugin_second_title></h3> <div class="<%plugin_second_align>"> <!--plugin_second_description--><div class="<%plugin_second_ialign>"><%plugin_second_description></div><!--/plugin_second_description--> <%plugin_second_content> <!--plugin_second_description2--><div class="<%plugin_second_ialign>"><%plugin_second_description2></div><!--/plugin_second_description2--> </div> </div> <!--/plugin_second--> </section> <!--/plugin--> </div><!-- /#sidebar --> </div><!-- /#content --> </div> <footer id="footer"> <div class="wrapper"> <div class="pagetop"><a href="#header" title="<%template_go_top>"><%template_go_top></a></div> <section class="plugin row-fluid"> <!--plugin--> <!--plugin_third--> <div class="plugin <%plugin_third_tag> span4"> <h3 class="<%plugin_third_talign>"><%plugin_third_title></h3> <div class="<%plugin_third_align>"> <!--plugin_third_description--><div class="<%plugin_third_ialign>"><%plugin_third_description></div><!--/plugin_third_description--> <%plugin_third_content> <!--plugin_third_description2--><div class="<%plugin_third_ialign>"><%plugin_third_description2></div><!--/plugin_third_description2--> </div> </div> <!--/plugin_third--> <!--/plugin--> </section> <section id="copyright"> <p class="fc2_ad"><%ad> <%ad2></p> <p class="copyright">&copy; <%blog_name>. All Rights Reserved. Designed by <a href="http://fc2ist.blog.fc2.com/">FC2.blog.hack();</a></p> </section> </div> </footer><!-- #footer --> {{:body_bottom}} </body> </html>