fc2ブログ

ブックマークとしてのJavaScript+CSS応用案 

bkm1.jpg
JavaScriptによる複数ページ切り替えのサンプル。
  1. 動作はこんな感じです(前置きなしに消える可能性があります)
  2. CSSソースは青文字、スクリプトソースは赤文字です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<!-- Created by Kana[http://210x297.blog12.fc2.com/] -->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body {
    height:100%;
    font:85%/1.6 Tahoma,Verdana,Osaka,sans-serif;
    letter-spacing:0.1em;
    color:#555555;
    background-color:#ffffff;
}

/* ↓ 左メニューのリンク切り替え部分です */
.tabheader {
    width:170px;
    margin-top: 165px;
    margin-left: 8px;
    position:absolute;
    top:0;
    left:0;
    clear:both;
    }
    
.tabheader table {
  border-collapse: collapse; /* for IE */
  border-spacing: 0; /* for N6 */
}

.tabheader table tr td {margin:0;padding:0;border-width:0}

/* ↓ 左メニュー 矢印グレー部分 */
.tabheader .close {
background-image: url(http://blog-imgs-38.fc2.com/2/1/0/210x297/m.jpg);
background-repeat:no-repeat;
background-position:0% 45%;
margin: 10px 0px 10px 15px;
padding:0px 0px 0px 35px;
white-space: nowrap;
}

/* ↓ 左メニュー 矢印ブルー部分 */
.tabheader .open {
background-image: url(http://blog-imgs-38.fc2.com/2/1/0/210x297/r.jpg);
background-repeat:no-repeat;
background-position:0% 45%;
margin: 10px 0px 10px 15px;
padding:0px 0px 0px 35px;
white-space: nowrap;
}


.tabheader a {
    text-decoration:none;
}
    .tabheader a:link,
    .tabheader a:visited {
        color:#7A7A7A;
    }
    .tabheader a:hover,
    .tabheader a:active {
        color:#00ffff;
    }

/* ↓ ドット枠のサイトリンクの部分です */
.tabbody {
  border-color: #F0F0E8;
  border-style: dotted;
  margin: 15px 0 0 180px;
  border-width: 5px;
  padding: 1em;
}

    .tabbody a:link,
    .tabbody a:visited {
        color:#00ced1;
    }
    .tabbody a:hover,
    .tabbody a:active {
        color:#00ffff;
    }

/* ↓ サイト説明の部分です */
textarea,
select{
    padding:0.2em;
    border:1px solid #ccc;
    background-color:transparent;
    margin: 0px 0px 0px 15px;
}

/* ブクマ (modori/clear: left; とリンク)(!modoriは消すとレイアウト崩れるので、そのまま使用してください!) */
ul#bkm{display:block;padding:0px;margin:0px;}
ul#bkm li{width:160px;font-size : 12px; line-height:120%;list-style:none; float:left; padding-left:35px; margin:5px 0 5px 0; height:50px;}
ul#bkm li#linktxt a {font-size:12px;}

        ul.modori {
            margin:0.2em 0 -1em 0;
            text-align:right;
        }
        ul.modori,
        ul.modori li {
            clear: left;
            list-style-type:none;
        }
</style>
<script language="JavaScript">
<!--

/* ↓ サイト説明の呼び出し */
function disp(msg){
    document.form1.field1.value = msg;
}

/* ↓ バナーの切り替え */
image = new Array();

image[0] = new Image();
image[0].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/b_noba.gif"; /*[ no banner ]直リン禁止バナー*/

image[1] = new Image();
image[1].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/a.jpg";
image[2] = new Image();
image[2].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/b.jpg";
image[3] = new Image();
image[3].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/c.jpg";


function Img_2(n){
if(document.images){
document.link.src=image[n-1].src;}}

/* ↓ ドット枠のページ切り替え */
// bpref = tab body prefix, hpref = tab header prefix
function seltab(bpref, hpref, id_max, selected) {
  if (! document.getElementById) return;
  for (i = 0; i <= id_max; i++) {
    if (! document.getElementById(bpref + i)) continue;
    if (i == selected) {
      document.getElementById(bpref + i).style.visibility = "visible";
      document.getElementById(bpref + i).style.position = "";
      document.getElementById(hpref + i).className = "open";
    } else {
      document.getElementById(bpref + i).style.visibility = "hidden";
      document.getElementById(bpref + i).style.position = "absolute";
      document.getElementById(hpref + i).className = "close";
    }
  }
}

// -->
</script>

<title>sampleBOOKMARK</title>

</head>
<body bgcolor="white" onload="seltab('box', 'head', 10, 1)">
<!-- ↑最初に読み込んだときに 1 番のタブを選択するようにしています -->

<div id="PAGETOP" style="width:95%">

<div id="HEADER">
<h1>BOOKMARK</h1>
 <table> <tr> <td>
 <ul><img src="http://blog-imgs-38.fc2.com/2/1/0/210x297/b_noba.gif" width="200" border="0" height="40" name="link"></td>
 <td><form action="#" name="form1"><textarea name="field1" id="TEXTAREA" rows="1" cols="50">リンク先にカーソルを合わせると、説明が表示されます</textarea></form></ul>
 </td></tr></table>

<!-- タブの見出しです -->
<div class="tabheader">


 <div id="head1">
 <a href="javascript:seltab('box', 'head', 10, 1)">ALL</a>
 </div>

 <div id="head2">
 <a href="javascript:seltab('box', 'head', 10, 2)">JAPANESEonly</a>
 </div>

 <div id="head3">
 <a href="javascript:seltab('box', 'head', 10, 3)">ENGLISHonly</a>
 </div>

 <div id="head4">
 <a href="javascript:seltab('box', 'head', 10, 4)">ABOUT LINK</a>
 </div>


<!-- tabheader -->
</div>
<!-- HEADER -->
</div>

<!-- タブの中味です -->
<div class="tabbody">

<div id="box1">
<p>
  <ul id="bkm">
    <li><a href="http://www.google.co.jp/" target="_blank" onMouseOver="Img_2(2);disp('Google先生');" onmouseout="Img_2(1)">
    [ Google.co.jp ]<br>(日本)</a></li>
    
    <li><a href="http://www.google.com/" target="_blank" onMouseOver="Img_2(3);disp('Google先生英語版')" onmouseout="Img_2(1)">
    [ Google.com ]<br>(英語版)</a></li>
    
    <li><a href="http://gigazine.net/index.php?/news/comments/20070909_google_job_interview/" target="_blank" onMouseOver="Img_2(4);disp('Googleの面接試験、一体どのような質問をされるのか?')" onmouseout="Img_2(1)">
    [ GIGAZINE ]</a></li>

</ul>
 <ul class="modori">
   <a href="#PAGETOP">▲</a>
 </ul>
</p>
</div>


<div id="box2">
<p>
<p>
  <ul id="bkm">
    <li><a href="http://www.google.co.jp/" target="_blank" onMouseOver="Img_2(2);disp('Google先生');" onmouseout="Img_2(1)">
    [ Google.co.jp ]<br>(日本)</a></li>
    
    <li>
    [ Google.com ]<br>(英語版)</li>
    
    <li><a href="http://gigazine.net/index.php?/news/comments/20070909_google_job_interview/" target="_blank" onMouseOver="Img_2(4);disp('Googleの面接試験、一体どのような質問をされるのか?')" onmouseout="Img_2(1)">
    [ GIGAZINE ]</a></li>
</ul>
 <ul class="modori">
   <a href="#PAGETOP">▲</a>
 </ul>
</p>
</div>


<div id="box3">
 <p>
  <ul id="bkm">
    <li>
    [ Google.co.jp ]<br>(日本)</li>
    
    <li><a href="http://www.google.com/" target="_blank" onMouseOver="Img_2(3);disp('Google先生英語版')" onmouseout="Img_2(1)">
    [ Google.com ]<br>(英語版)</li>
    
    <li>
    [ GIGAZINE ]</a></li></ul>
 <ul class="modori">
   <a href="#PAGETOP">▲</a>
 </ul>

 </p>
</div>

<div id="box4">
 <p>
 関連リンクです。
 </p>
 <ul>
 <li><a href="http://nais.to/~yto/tools/css_tabs/
 ">CSS と JavaScript でタブ切り替え</a></li>

 </ul>
</div>



</div><!-- tabbody -->

<p>
 <ul class="modori">
  Created by  <a href="http://210x297.blog12.fc2.com/">Kana</a>.
 </ul>
</p>

</div><!-- PAGETOP -->
</body>
</html>

CSSもかなり入ってるんですが、メインはページ切り替えだったのでカテゴリJavaScriptで。
お気に召したら自由に持ち帰って編集してください。
サンプル右下の宣言が邪魔でしたらはずしてもらってもかまいません*
使用いただける際は、拍手を頂けると嬉しいです。


 引用:CSS と JavaScript でタブ切り替え
スポンサーサイト



XD temp#2 

tmp2 
---------------------------------------------------------------------------
XD temp#2 html
---------------------------------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!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="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title><%blog_name><!--not_index_area--> - <%sub_title><!--/not_index_area--></title>
<script type="text/javascript">
function shwpage() {
var lc=""+self.frames.location;
if (lc.indexOf('page-')>0){
page=(lc.split('page-')[1]).split('.')[0];
document.write('PAGE '+page); }
else {if (lc.indexOf('page=')>0){
page=(lc.split('page=')[1]).split('&')[0];
document.write('PAGE '+page);}
else {if (lc.indexOf('/category')>0){
page=(lc.split('-')[1]).split('.')[0];
document.write('PAGE '+page);}
} }
}
function edit(N) {
var p="<%url>".split('.'); var id=(p[0].split('//')[1]);
var eurl= 'http://'+p[1]+'.fc2.com/'+id+'/admin.php?mode=editentry&no=';
location.href=eurl+N;}
function mkElk(N) {document.write('<span onclick="edit('+N+')">*</span>');}

function adjust() {if(window.opera){
document.getElementById("Side").style.position="absolute";
document.getElementById("Side").style.height="auto";
document.getElementById("sbtm").style.positon="static";
for (i=1;i<9;i++) {
document.getElementById("s"+i).style.margin="0 0 9px 10px"}
} }
</script>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" title="default" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
<!--date_area-->
<style type="text/css">.p<!--archive-->
,.p<%archive_year><%archive_month>
<!--/archive--> {display:inline}</style>
<!--/date_area-->
</head>

<body>
<div id="Main">
<h1 id="top"><a href="./" title="<!--index_area-->Reload<!--/index_area--><!--not_index_area-->Return to Primary PAGE<!--/not_index_area--> "><%blog_name></a></h1>

<div id="Entry">
<!--topentry-->
<h2 id="e<%topentry_no>"><a href="<%topentry_link>" title=" Permanent Link "><%topentry_title></a></h2>
<p id="note">
<!--index_area--><%introduction><!--/index_area-->
<!--date_area--><%now_year>年<%now_month>月の記事一覧<!--/date_area-->
<!--category_area-->テーマ [<%sub_title> ] の記事一覧<!--/category_area-->
<!--permanent_area-->Permanent LINK<!--/permanent_area-->
<!--search_area-->[<%sub_title> ] の検索結果<!--/search_area-->
<!--edit_area-->投稿コメントの編集<!--/edit_area-->
</p>
<p class="entry_spec">
<!--more_link-->
<a href="<%topentry_link>#more" title="read on" class="b">More ? </a>
&nbsp; &nbsp;
<!--/more_link-->
<a href="./blog-date-<%topentry_year><%topentry_month>.html" title="Contained Archive" ><%topentry_year>/<%topentry_month>/<%topentry_day></a> &nbsp;
<a href="<%topentry_category_link>" title="Contained Category"><%topentry_category></a> &nbsp;
<a href="<%server_url><%blog_id>/admin.php?mode=editentry&no=" title=" EDIT ">*</a> &nbsp;
<!--allow_tb--><a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->#Tb" title=" Trackback ">TB-<%topentry_tb_num></a> &nbsp;<!--/allow_tb-->
<!--allow_comment-->
<a href="<!--not_permanent_area--><%topentry_link><!--/not_permanent_area-->
#Com" title=" Comment ">C-<%topentry_comment_num></a>
<!--/allow_comment-->
</p>
<div class="entry_unit">
<%topentry_body>
<!--more--><br id="more" /><%topentry_more><!--/more-->

</div><!--/topentry-->


<!--comment_area--><div class="ctb" id="Com">
<h3><span>Comment</span></h3>
<!--comment-->
<h4 id="c<%comment_no>">
<%comment_title> <%comment_mail+name>&nbsp;<span>
<a href="<%comment_url>#top" class="n<%comment_url>">URL<span><%comment_no></span></a>&nbsp;
<%comment_year>/<%comment_month>/<%comment_day> &nbsp;
[ <a href="<%comment_edit_link>#top">Edit</a> ]</span>
</h4>
<p><%comment_body></p>
<!--/comment-->

<form method="post" action="./" id="comment_form" name="comment_form">
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="name">Name <input id="name" type="text" name="comment[name]" size="8" value="<%cookie_name>" /></label>
<label for="subject">Title <input id="subject" type="text" name="comment[title]" size="20" value="" /></label>
<label for="mail">Mail <input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /></label>
<label for="url">URL <input id="url" type="text" name="comment[url]" size="40" value="<%cookie_url>" /></label>
<textarea id="comment" cols="70" rows="6" name="comment[body]" >Comment</textarea><br />
P.W.<input id="pass" type="text" name="comment[pass]" size="4" value="" /> &nbsp; Secret
<input id="himitu" type="checkbox" name="comment[himitu]" /> &nbsp; <script type="text/javascript" src="http://blog1.fc2.com/load.js"></script> _fcksavedurl=""http://blog1.fc2.com/load.js"></script>"
<p><input type="submit" value="send" /></p>
</form>
</div><!--/comment_area-->

<!--edit_area--><div class="ctb">
<h2><a href="<%server_url><%blog_id>/admin.php?mode=editentry&no=/admin.php?mode=view_message&no=<%eno>">EDIT Comment</a></h2>
<form method="post" action="./" id="comment_form" name="comment_form">
<input type="hidden" name="mode" value="edit" />
<input type="hidden" name="mode2" value="edited" />
<input type="hidden" name="edit[rno]" value="<%eno>" />

<label for="name">Name <input id="name" type="text" name="edit[name]" size="10" value="<%edit_name>" /></label>
<label for="subject">Title <input id="subject" type="text" name="edit[title]" size="20" value="<%edit_title>" /></label>
<label for="mail">Mail <input id="mail" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /></label>
<label for="url">URL <input id="url" type="text" name="edit[url]" size="40" value="<%edit_url>" /></label>
<textarea id="comment" cols="70" rows="9" name="edit[body]"><%edit_body></textarea><br />
<input id="pass" type="text" name="edit[pass]" size="4" value="PW" />
Secret<input id="himitu" type="checkbox" name="edit[himitu]" />
<script type="text/javascript" src="http://blog1.fc2.com/load.js"></script>
<p><input type="submit" value="change" />
<input type="submit" name="edit[delete]" value="delete" />
</p></form>
</div><!--/edit_area-->

<!--trackback_area--><div class="ctb" id="Tb">
<h3><span>Trackback</span></h3>
<p title="TB-URL"><%trackback_url></p>
<!--trackback-->
<h4 id="t<%tb_no>">
<a href="<%tb_url>" title="From : <%tb_blog_name>">
<%tb_title></a> <%tb_day>/<%tb_month>/<%tb_year>
</h4>
<blockquote cite="<%tb_url>"><%tb_excerpt></blockquote>
<!--/trackback-->
</div><!--/trackback_area-->

<p id="btm"><%ad> <%ad2></p>
</div>
<!-- ■ End of Main ■ --></div>



<div id="Side">
<div class="m" id="s1"><h3><strong>INDEX</strong></h3>
<!--not_permanent_area--><!--topentry-->
<a href="#e<%topentry_no>" title=" <%topentry_category> ">
<%topentry_title> &nbsp;
<span><%topentry_month>/<%topentry_day></span>
</a><br>
<!--/topentry-->
<!--/not_permanent_area-->
<!--comment_area--><p>
■■ comment ■■<br /><!--comment-->
<a href="#c<%comment_no>" title="<%comment_title>">
<%comment_month>/<%comment_day> <b><%comment_name></b></a><br />
<!--/comment--><!--/comment_area--></p>
<!--trackback_area--><p>
■■ trackback ■■<br /><!--trackback-->
<a href="#tk<%tb_no>" title="<%tb_blog_name>">
<%tb_month>/<%tb_day> <b><%tb_title></b></a><br />
<!--/trackback--><!--/trackback_area--></p>
<!--edit_area--><p>コメント<%eno>編集中</p>
<!--/edit_area-->
<form id="search_form" name="search_form" method="get" action="./">
<input id="search_text" type="text" name="q" size="20" value="" /><br /><input type="submit" value="SEARCH single word only" />
</form>
</div>

<div class="m" id="s2"><h3><strong>Recent Comments</strong></h3>
<!--rcomment-->
<a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_title>"><%rcomment_month>/<%rcomment_day> &nbsp;<%rcomment_name><span>&gt;&gt;<%rcomment_etitle></span></a><br />
<!--/rcomment-->
<p class="bi"><a href="#s1">Back to INDEX</a></p>
</div>

<div class="m" id="s3"><h3><strong>Recent Trackbacks</strong></h3>
<!--rtrackback-->
<a href="<%rtrackback_link>#t<%rtrackback_no>" title="<%rtrackback_title>"><span><%rtrackback_etitle> &nbsp; &nbsp; </span><%rtrackback_month>/<%rtrackback_day> &nbsp;<%rtrackback_blog_name></a><br />
<!--/rtrackback-->
<p class="bi"><a href="#s1">Back to INDEX</a></p>
</div>

<div class="m" id="s4"><h3><strong>Categories</strong></h3>
<!--category-->
<a href="<%category_link>"><%category_name>
<span> &nbsp; ( <%category_count> )</span>
</a><br /><!--/category-->
<p class="bi"><a href="#s1">Back to INDEX</a></p>
</div>

<div class="m" id="s5"><h3><strong>Archives</strong></h3>
<!--archive-->
<a href="<%archive_link>"><%archive_year>年 <%archive_month>月
<span> &nbsp; &nbsp;( <%archive_count> )</span></a><br />
<!--/archive-->
<p class="bi"><a href="#s1">Back to INDEX</a></p>
</div>

<div class="m" id="s6"><h3><strong>LINK</strong></h3>
<!--link--><a href="<%link_url>" title="<%link_url>" target="_blank"><%link_name></a><br /><!--/link-->
<a href="<%url>?xml" title="RSS">RSS Feed (RSS 1.0)</a>
<p class="bi"><a href="#s1">Back to INDEX</a></p>
</div>

<div class="m" id="s7"><h3><strong>Admin:Author</strong></h3>
<!--myimage--><p class="tc">
<img src="<%image>" title="Author: <%author_name>" alt="<%author_name>" /></p>
<!--/myimage-->
<%introduction2>
<p class="bi"><a href="#s1">Back to INDEX</a></p>
</div>

<div id="s8"><h3><strong>Plugin</strong></h3>
<div class="plg"><!--plugin--><!--plugin_third-->
<h5 align="<%plugin_third_talign>" title="<%plugin_third_description>">
<%plugin_third_title></h5><%plugin_third_content>
<p align="<%plugin_third_ialign>"><%plugin_third_description2></p>
<!--/plugin_third--><!--/plugin--></div>
<p class="bi"><a href="#s1">Back to INDEX</a></p>
</div>
.<p id="sbtm">D'sCo Free Source</p>
</div>


<div id="Menu">
<table width="100%" summary="menu"><tr><td class="l">
<!--index_area-->Top Page<!--/index_area-->
<!--date_area-->ARCHIVE<!--/date_area-->
<!--category_area-->CATEGORY <%cno> &nbsp;<!--/category_area-->
<!--permanent_area-->ENTRY <%pno><!--/permanent_area-->
<!--search_area-->SEARCH &nbsp;<!--/search_area-->
<!--edit_area-->EDIT<!--/edit_area-->
<script type="text/javascript">shwpage()</script>

</td><td class="r">

<a href="#s4">CATEGORY</a>&nbsp;
<a href="#s5">ARCHIVE</a>&nbsp;
<a href="#s6">LINK</a>&nbsp;
<a href="#s7">PROFILE</a>
<!--plugin--><a href="#s8">OPTION</a><!--/plugin-->
</td></tr></table>
</div>

<div id="Foot">
<table width="100%" summary="foot"><tr><td>.</td>
<td class="r w">
<!--date_area-->
<a href="<%prev_month_link>" title="前の月" class="n p<%prev_year><%prev_month>"><%prev_year>年<%prev_month>月 ≪</a> <!--/date_area-->
<!--nextpage-->
<a href="<%nextpage_url>" title="Former Page">prev ≪</a>
<!--/nextpage-->
<!--nextentry-->
<a href="<%nextentry_url>" title="Former Article"> <%nextentry_title> ≪</a>
<!--/nextentry-->
</td><td class="c">
<a href="#btm" title=" Page Bottom">▼</a>&nbsp
<a href="#top" title=" Page Top ">▲</a>
</td><td class="r w">
<!--preventry-->
<a href="<%preventry_url>" title="Next Article" >≫ <%preventry_title></a>
<!--/preventry-->
<!--prevpage-->
<a href="<%prevpage_url>" title="Next Page">≫ next</a>
<!--/prevpage-->
<!--date_area-->
<a href="<%next_month_link>" title="次の月" class="n p<%next_year><%next_month>">≫<%next_year>年<%next_month>月</a>
<!--/date_area-->

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

<script type="text/javascript">adjust()</script>
</body></html>

---------------------------------------------------------------------------
XD temp#2 css
---------------------------------------------------------------------------


@charset "euc-jp";
/* ===============================
TemplateName:3_yellow
http://210x297.blog12.fc2.com/
 ================================= */

html,body {width:100%; height:100%;}
html{_overflow:hidden;}

body {margin:0; padding:0; width:100%; height:100%;overflow:auto;}
body {font:83%/1.6 Tahoma,'メイリオ','Meiryo','MS Pゴシック','MS PGothic',Osaka,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
    background-color: #fff;
    background-image: url();
    background-attachment: fixed;
        _overflow:hidden; }

a {text-decoration:none}
a:link,a:visited {color:#9cbb1c;text-decoration:none;}
a:active {color:#fac559; text-decoration:none;}
a:hover {color:#fac559;}
a img {border-style:none;background-color:transparent;}
#Main h1 {font-size:240%;font-family:verdana,"MS Pゴシック";
margin:0px 200px 6px 30px; padding-top:50px;}
h2 {font-size:14px;
    margin: 15px 10px 0 12px;
    padding: 5px 0 5px 11px;
    border-left: 5px solid #fac559;
    border-bottom:#fac559 1px solid;}
#Main h1 a,#Main h2 a {color:#666;}
h2 a {color:#888;line-height:80%; }
#Main h1 a:hover,#Main h2 a:hover {color:#999;}
h3 {font-size:110%; font-family:"Arial Bold"; margin:0 0 16px; line-height:1em;
background:url("http://blog-imgs-24.fc2.com/p/c/a/pcafe/h3bar.gif") no-repeat left center;}
h3 span {margin:0 28px; padding:0 6px; background:#e9e9e9;}
h4 {font-size:12px;}
h4 span {font-weight:normal;}
blockquote {margin:9px 16px; padding:9px 16px; color:#779; background:#fff; border:#fac559 1px solid; font-family:"Arial";}
input,textarea,select,button,submit{
    line-height:110%; background:#FFF;
    font-family: "HGゴシックM", Osaka, "MS Pゴシック", "trebuchet MS", trebuchet, "verdana", arial, sans-serif; border:#fac559 1px solid;}
input { line-height:15px; color:#777; border-color:#888; margin:0 0 1px 4px;}
textarea {font-size:12px; color:#666; border:#fac559 1px solid;}
form p {display:inline;}
form label {display:block; margin:1px; text-align:right;}


#Main { margin:0; width:100%; background:#fff url(" ") right top no-repeat fixed;}
#Main { _height:100%; _overflow:auto;}
#Main table {font-size:12px;}
#note { margin:8px 230px -10px 30px; }
#Entry {margin:0 230px 24px 20px; text-align:left;}
.entry_unit {margin:0 12px;}
.more {margin-left:80px;}
.more a {color:#9cbb1c; font-weight:bolder;}
.more a:hover {color:#f0f;}
.entry_spec {color:#888;line-height:80%; margin:0 10px 20px 0;
             padding:8px 0 3px 30px; }
.entry_spec a {color:#888;}
.entry_spec a:hover {color:# ;}
.entry_spec a span {display:none;}
.ctb {margin:40px 6px 40px 0;}
#Com h4 {margin:0 9px;}
#Com p {margin:0 10px 22px 40px;}
#Com a span {display:none;}
#comment_form {margin:20px 30px 20px 0; text-align:right;}
#comment_form textarea {width:400px;}
#Tb p {margin:0 9px 0 0; text-align:right;}
#btm {margin:80px 0 0; padding:10px 0 24px; color:#888; font-size:12px;; font-family:verdana;
background:url(" ") repeat-x left top;}



#Side {width:230px; height:100%; margin:0px; position:fixed; top:0; right:0; padding:0; text-align:left; overflow:hidden; background:#fff; font-size:12px;border-left: 1px solid #fac559;}
#Side {_width:215px; _position:absolute; _right:18px;}
#Side h3 {margin:0 5px 10px 0px;padding:40px 0 0; color:#888; font-family:verdana;  _font-size:90%; text-align:center;background:#fff;}
#Side h3 strong{ padding:0 7px; font-family: verdana; color:#888;}
#s1,#s2,#s3,#s4,#s5,#s6,#s7,#s8 {width:200px; margin:0 0 1000px 12px; font-size:12px;line-height:130%; overflow:hidden;}
.m form {margin:24px 0 0;text-align:center;}
.m form input {width:190px;}
.m a{display:block; height:1.2em; width:200px;font-style:normal;}
.m a:hover {color:#fac559;}
.m br {display:none;}
.m a span,.list br { }
.m a:hover span {display:inline; color:#fac559;}
.plg {width:200px;height:420px; overflow:auto; overflow-x:hidden;}
.plg h5 { margin:0; padding:0; font-size:12px;}
.plg ul{width:200px;padding:0; overflow:hidden;}
.plg a {width:200px;overflow:hidden;}
.plg li {width:200px;height:1.2em;}
.plg p { }
.bi {}
.bi a {width:200px; padding:4px 0; color:#9cbb1c; background:#e9e9e9; text-align:center; font-weight:bold;}
.bi a:hover {color:#fff; background:gray;}
.n { }
#sbtm { width:200px; position:fixed; bottom:30px; right:0px; text-align:center; }
#sbtm {_position:absolute; }


#Menu,#Foot { width:100%; margin:0; position:fixed; left:0; background:#fac559 ;}
#Menu { top:0; padding:1px 26px 1px 0; text-align:right; ;line-height:12px; overflow:hidden; border-bottom:#fac559 1px solid;}
#Menu {_position:absolute;padding-right:10px;}
#Foot {    margin-bottom:-2px; padding:0; bottom:0; overflow:hidden; border-top:#fac559 1px solid;line-height:100%;}
#Foot {_position:absolute;}
#Menu a,#Foot a {font-size:12px; font-weight:bolder; font-size:12px; padding:0 3px; color:#fff;}
#Menu a:hover,#Foot a:hover { color:#9cbb1c;}
.l { padding:0 10px; text-align:left;}
.r {padding:0 10px; text-align:right;}
.c {width:60px;text-align:center;}
.w {width:250px;}
.cp {font-size:10px; text-align:right;}
.slist {display:block; margin:6px 0 5px; padding:9px; color:#fac559; background:#fff; border:#fac559 1px solid; font-family:"Arial";}



.red     {color:red}
.green    {color:green}
.blue    {color:blue}
.black    {color:black}
.gray    {color:gray}
.silver    {color:silver}
.white    {color:white}
.navy    {color:navy}
.teal    {color:teal}
.purple    {color:purple}
.fuchsia{color:fuchsia}
.olive    {color:olive}
.lime    {color:lime}
.yellow    {color:yellow}
.aqua    {color:aqua}
.maroon    {color:maroon}


.bgf00     {background:red}
.bg080    {background:green}
.bg00f    {background:blue}
.bg000    {background:black}
.bg888    {background:gray}
.bgccc    {background:silver}
.bgfff    {background:white}
.bg008    {background:navy}
.bg088    {background:teal}
.bg808    {background:purple}
.bgf0f    {background:fuchsia}
.bg880    {background:olive}
.bg0f0    {background:lime}
.bgff0    {background:yellow}
.bg0ff    {background:aqua}
.bg800    {background:maroon}


.bocf00    {border-color:red}
.boc080    {border-color:green}
.boc00f    {border-color:blue}
.boc000    {border-color:black}
.boc888    {border-color:gray}
.bocccc    {border-color:silver}
.bocfff    {border-color:white}
.boc008    {border-color:navy}
.boc088    {border-color:teal}
.boc808    {border-color:purple}
.bocf0f    {border-color:fuchsia}
.boc880    {border-color:olive}
.boc0f0    {border-color:lime}
.bocff0    {border-color:yellow}
.boc0ff    {border-color:aqua}
.boc800    {border-color:maroon}


.fs8    {font-size:8px}
.fs10    {font-size:10px}
.fs12    {font-size:12px}
.fs14    {font-size:14px}
.fs16    {font-size:16px}
.fs18    {font-size:18px}
.fs20    {font-size:20px}

.bow1    {border-width:1px}
.bow2    {border-width:2px}
.bow3    {border-width:3px}
.bow4    {border-width:4px}
.bow5    {border-width:5px}
.bow7    {border-width:7px}
.bow9    {border-width:9px}

.b {font-weight:bolder}
.i {font-style:italic}
.u {text-decoration:underline}
.o {text-decoration:overline}
.d {text-decoration:line-through}
.blink{text-decoration:blink}

.tl {text-align:left}
.tc {text-align:center}
.tr {text-align:right}
.block{display:block}

.tm1 {padding:0 10px}
.tm2 {padding:0 20px}
.tm3 {padding:0 30px}
.tm4 {padding:0 40px}
.tm6 {padding:0 60px}

.tm8 {padding:0 80px}
 

XD temp#1 

新規キャンバス
----------------------------------------------------------------------------
XD temp#1 html
----------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=euc-jp">
    <meta http-equiv="content-style-type" content="text/css">
    <meta http-equiv="content-script-type" content="text/javascript">
    <meta name="description" content="<%introduction>">
    <meta name="author" content="<%author_name>">
    <link href="<%css_link>" rel="stylesheet" type="text/css">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml">

    <title><%blog_name> <%sub_title></title>
<script type="text/javascript">
<!--
function disp(msg){
    document.form1.field1.value = msg;
}
// -->
</script>

</head>

<BODY onLoad="window.defaultStatus='<%introduction>'">
<a name="PageTop"></a>
<div id="bbb">
    <!-- ALLボディ ▼▽▼ -->
    <div id="allbody">

        <!-- 左ボディ ▼▽▼ -->
        <div id="leftbody">

                <!--plugin-->
                <!--plugin_third-->
                <h3 style="text-align:<%plugin_third_talign>"><%plugin_third_title></h3>
                <div id="side_item"></div>
                <div style="text-align:<%plugin_third_ialign>"><%plugin_third_description></div>
                <div style="text-align:<%plugin_third_align>"><%plugin_third_content></div>
                <div style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></div>
                <!--/plugin_third-->
                <!--/plugin-->

            <!--topentry-->
            <h2 class="pagetitle" id="<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a> <script>NEWdesc(<%topentry_year>,<%topentry_month>,<%topentry_day>)</script></h2>
            <div class="entry_date2">
                <%topentry_year>/<%topentry_month>/<%topentry_day> - <%topentry_hour>
            </div>
            <div class="entry_body"><%topentry_body>
                <!-- 追記 ▼▽▼ -->
                <!--more_link-->
                <div class="entry_more">
                    <a href="#" onclick="i=this.parentNode.lastChild;i.style.display=['none',''][(i.flag=!i.flag)+0];return false" onkeypress="this.onclick" title="追記を開閉する">▼ Read more</a>
                    <div id="more_<%topentry_no>" style="display: none;">
                        <div class="entry_more2"><%topentry_more></div>
                </div></div>
                <!--/more_link-->
                <!--more-->
                <a name="more" id="more"></a><div class="entry_more2"><%topentry_more></div>
                <!--/more-->
                <!-- 追記 ▲△▲ -->
            </div>

            <!-- 投稿情報 ▼▽▼ -->
            <div class="entry_date">
                Category:<a href="<%topentry_category_link>"><%topentry_category></a>
                 |  <a href="#PageTop">PageTop▲</a>
            </div>
            <!-- 投稿情報 ▲△▲ -->

            <!--
            <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                     xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
                     xmlns:dc="http://purl.org/dc/elements/1.1/">
            <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-->
            <!-- エントリー ▲△▲ -->

            <!-- 前&次 ▼▽▼ -->
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="entry_table">
                <tr>
                <td>
                <div class="entry_state2">
                    <!--prevpage-->
                    ≪<a href="<%prevpage_url>">BACK</a>
                    <!--/prevpage-->
                    | <a href="<%url>">HOME</a> |
                    <!--nextpage-->
                    <a href="<%nextpage_url>">NEXT</a>≫
                    <!--/nextpage-->
                </div>
                <div class="entry_state3">
            Copyright &copy; <%blog_name> All Rights reserved. Design of base by <a href="http://lmn.o0o0.jp/">n [ラムネ]</a>. Created by <a href="http://210x297.blog12.fc2.com/">Kana</a>.<br>
             <%ad> <%ad2>
                </div>
                </td>
                </tr>
            </table>
            <!-- 前&次 ▲△▲ -->

        </div>
        <!-- 左ボディ ▲△▲ -->


        <!-- 右ボディ1 ▼▽▼ -->
        <div id="side">     
            <div id="side_d">
                <h1 class="maintitle"><a href="./" title="<!--index_area-->Reload<!--/index_area--><!--not_index_area-->Return to Primary PAGE<!--/not_index_area--> "><%blog_name></a></h1>
                <h6 class="maintitle"><%introduction></h6>
                <!--plugin-->
                <!--plugin_first-->
                <h3 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h3>
                <div style="text-align:<%plugin_first_ialign>"><%plugin_first_description></div>
                <div style="text-align:<%plugin_first_align>"><%plugin_first_content></div>
                <div style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></div>
                <!--/plugin_first-->
                <!--plugin_second-->
                <h3 style="text-align:<%plugin_second_talign>"><%plugin_second_title></h3>
                <div style="text-align:<%plugin_second_ialign>"><%plugin_second_description></div>
                <div style="text-align:<%plugin_second_align>"><%plugin_second_content></div>
                <div style="text-align:<%plugin_second_ialign>"><%plugin_second_description2></div>
                <!--/plugin_second-->
                <!--/plugin-->
            </div>
        </div>
        <!-- 右ボディ1 ▲△▲ -->

    </div>
    <!-- ALLボディ ▲△▲ -->
</div>
</body>
</html>

----------------------------------------------------------------------------
XD temp#1 css
----------------------------------------------------------------------------
@charset "EUC-JP";

/* ★★★初期設定の隙間をリセットしてます★★  */
* {
margin:0;
padding:0;
}

/* 基本構造 */
html {
    height:100%;}

/* ★★★背景壁紙の設定です★★  */
body {
    height:100%;
    font:82%/1.6 Tahoma,Verdana,Osaka,sans-serif;
    letter-spacing:0.1em;
    color:#555555;
    background-color:#ffffff;

}

/* ★★★記事★★  */
#bbb{
}

/* ★★★リンクの文字色、訪問後リンクの文字色設定です★★★  */
a:link,a:visited {
text-decoration:none;
color:#9cbb1c;
}

/* ★★★選択中リンクの文字色、クリック中リンクの文字色設定です★★★  */
a:hover,a:active {
color:#fac559;
}
ul {list-style-type: none;  margin:0px;  padding:0px;}


HTML {
height:100%;
}

/* ================ ■ボディ■ ================ */
/* ★★★タイトル、記事、サイドメニューをひっくるめたメイン部分です★★★  */
#allbody {
width:956px;
border:0px;

}
/* ================ ■ヘッダー■ ================ */
h1 {/*★★ ブログタイトル リンク設定 ★★ */
    line-height:105%;
    font-size:90px;
    text-align:right;
    font-family : Impact, Arial, ",l,r ,ofSfVfbfN", Osaka, monospace;

}

#side_d h1{/*★★ ブログタイトル隙間 ★★ */
    width:100px;
    margin-top: 12px;
    margin-left: -5px;
    clear:both;

}

#side_d h1 a {/*★★ ブログタイトルリンクカラー ★★ */
    color:#555;
}
#side_d h1 a:hover,a:active {/*★★ ブログタイトルリンクカラー on ★★ */
    color:#999;
}

h6 {
    padding-top:8px;
    margin-left:-9px;
    padding-bottom:20px;
    line-height:0px;
    font-size:10px;
    text-align:left;
}

/* ================ ■ボディ 右の記事部分■ ================ */
#leftbody {
width:700px;
float:right;
margin:0;
padding-top:20px;
padding-left:20px;
border-left:1px solid #fac559;
}
#leftbody h2 a:link,#leftbody h2 a:visited {
color:#555;
}
#leftbody h2,#leftbody h3 ,h3.subtitle ,h3.pagetitle{/*★★ 記事タイトル ★★ */
font-size: 12px;
border-left: 5px solid #fac559;
margin: 10px 0px 0px 25px;
padding: 3px 0px 3px 10px;
}
.entry_body {/*★★ 記事本文 ★★ */
line-height:20px;
margin:15px;
padding:0px 0px 0px 10px;/*★★ 隙間(内側) ★★ */


}
.entry_body a {
margin-right:3px;
margin-left:5px;
}
.entry_body a:hover,.entry_body a:active {

}

.entry_date2{/*★★ 日付 ★★ */
font-family: "Century Gothic";
font-size: 12px;
line-height:120%;
color: #777;
border-left: 5px solid #E9E9E9;
margin: 0px 0px 0px 25px;
padding: 0px 0px 0px 10px;

}
.entry_date2 a:link,.entry_date2 a:visited {
color:#9a9a9a;
}
.entry_date2 a:hover,.entry_date2 a:active {
color:#ccc;
}

.entry_date {
color:#999;
font-size:9px;
text-align:right;
line-height:15px;
margin:5px;
padding:5px 10px 0;

}
.entry_state2 {
text-align:center;
margin:15px 0;
padding:1px 0;
}

.entry_state3 {
font-size:9px;
text-align:center;
margin:15px 0;
padding:1px 0;
}
.entryarea{
margin:2px 5px;
}

.entry_more{
margin:10px;
margin-left:10px;
}
.entry_more2{
margin-top:10px;
margin-left:10px;
}



/* ================ ■サイドメニュー■ ================ */
#side {
font:85%/1.6 Tahoma,'メイリオ','Meiryo','MS Pゴシック','MS PGothic',Osaka,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
float:left;
width:200px;/*★★ 幅 ★★ */
margin:auto;/*★★ 隙間(外側) ★★ */
padding:0px 15px 0px 15px;/*★★ 隙間(内側) ★★ */
}

#side_d {
padding-top:3px;
padding-left:5px;
margin:0;
}

/* ★★★サイドメニュー リンクの文字色、訪問後リンクの文字色設定です★★★  */
#side_d a:link,a:visited  {
text-decoration:none;
color:#9cbb1c;
}

/* ★★★選択中リンクの文字色、クリック中リンクの文字色設定です★★★  */
#side_d a:hover,a:active {
color:#fac559;
}


#side_d h3 {/*★★ サイド タイトル部分 ★★ */
font:12px/1.2 Tahoma,'メイリオ','Meiryo','MS Pゴシック','MS PGothic',Osaka,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
color:#fac559;
line-height:10px;
margin-top:15px;
margin-bottom:8px;
margin-left:-7px;
}



#side_d ul {
}

#side_d li {
}

#side_d li a{
}

#side_d li a:hover ,#side_d li a:active{

}



/* ================ ■引用■ ================ */
blockquote {
margin:15px 0;
padding:5px 5px 5px 15px;
color:#fff;
background-color:#555;
border: 1px solid #000;
}

blockquote p {
margin:5px 0;
padding:0;
}

/* ================ ■指定■ ================ */
a img,#side img {
border:none;
}

textarea {
    border:1px solid #555555;
    background-color:transparent;

}

fc2テンプレートって 

なんか…同じユーザーが投稿してても、
重複デザインものはずっぱり削除するみたいですね。
あいやー。
同じデザインで、色違いとかコメ・トラバ付きとか色々試してみたんですが、
全部消されておりました。

あと、既に共有申請したものに関して不親切だなーと思ったのが以下の件。
あとからタグ修正が施せないんですね。修正ボタンがあるのに無効化?されてるのです。
なので、削除してから修正済みテンプレを再投稿してたのですが、即削除されててあんららら~と。
(どうりで似たようなデザインはいつまでも認証されんはずだ。)
うう、実質一度投稿したテンプレはタグを改めてても
同じユーザーでも再投稿できんとは、なんつー鬼畜設定…。

もうちょっと共有テンプレルールを勉強しまっす。

レス 

ササさん>>
うふふ、嬉しかったのでレスさせてくださいね。

もー上を見上げればわたしもさっぱりですよ!
わたしは専ら二番煎じ専門なんですけど、それでも十分勉強させていただいてます。

ササさんこそ短期間にあの丸投げしたタグ理解したとか、
どんだけPC向かってたんですか…!
私、拗ね期間を1ヶ月ほどインターバルしてやっと理解できましたもんね!w
まじでお疲れ様です…!

>炎狐のソース分析関連!
ねっあれ知っちゃうとタグ作るには炎孤以外のブラウザは不便さ感じますよね!
あとマウスジェスチャーもできるので、もうIEには戻れないです…
IEは確認専用で絶対入れてますけど!くやしいけど!

…ここにレスしてよろしかったでしょうか?w
| HOME | NEXT
Copyright © XD All Rights reserved. Design of base by n [ラムネ]. Created by Kana.

XD

★ CALENDAR ARCHIVES

★ INFOMATION

kana

BLOG:online operation record
ME:kana(♀/20代)

★ LATEST ENTRIES

★ CATEGORY

★ LINK

★ my store