コアラ Internet blog

TBをただいま受け付けていません。
このサイトで紹介している商品は、AF、DSによるメーカー直送品です。
より良い商品をより安く紹介していきます。
<< HTMLのお勉強(その8) | main | ブログペットリング仮登録 >>

HTMLのお勉強(その9)
このHTML関係の記事は、個人的なメモ代わりに使用していますので、参考にされる場合は、自己責任で使用してください。

すべての記事の中にバナーなどの表示をさせる場合は、ブルーの   表示部分を挿入する。

記事のTOPに戻すのが普通、すぐに表示するようになっているのを、スクロールして戻るようにするタグです。

記事の下にこのように表示しているのを

HTML | 00:15 | comments(0) | trackbacks(0) |ここにTOPと表示させる

以下のように表示させて、TOPをクリックすると、スクロールして上に動く動作をさせます。

| HTML | 00:15 | comments(0) | trackbacks(0) |TOP↑

タグは、英数半角で、日本語は全角でする。
一番最初の部分にJavascriptを入れます。
このピンクの部分が   Javascriptです。


<!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}" />
<script language="JavaScript">
<!--TOPスクロールをスムーズにする-->
<!--

function slowdownScroll() {
if(navigator.appName == "Microsoft Internet Explorer" && document.compatMode == "CSS1Compat") {
sctop = document.body.parentNode.scrollTop;
}
else if(window.pageYOffset){
sctop = window.pageYOffset;
} else {
sctop = document.body.scrollTop;
}

if(sctop){
scup = Math.ceil(sctop*.2);
scrollBy(0,-scup);
if (sctop-scup) setTimeout("slowdownScroll()",20);
}
}
//-->
</script>
</head>


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

省略

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

<div class="entry_date">{entry_date}</div>
<div class="entry_title">{entry_title}</div>
<div class="entry_author" style="text-align:right;">author : {user_name} </div>
<div class="entry_body">
{entry_description}
</div>
<div class="entry_more">
{entry_sequel}
<div class="entry_author">
<A HREF="http://blog.with2.net/link.php?115428"><img src="images/banner_03.gif" width="80" height="15" alt="" class="pict" /></A>
<span style="font-size:small;color:#ff0099"> ついでに、ここをクリックしてみください。</span>
</div>

<div class="entry_state">
| {category_name} | {entry_time} | {comment_num} | {trackback_num} |<a href="JavaScript:scrollTo(0,0)" onclick="slowdownScroll();return false;">TOP↑</a>

となります。

こんな感じですかね、Javascriptはもう少し勉強しないといけませんが、Javascriptが出来ると面白いことがいろいろ出来そうです。

まだまだ頑張らないといけないみたいです。
カスタマイズの道は険しいですね。

auther : koara | HTML | - | trackbacks(0) |
この記事のトラックバックURL
http://koara.blog.bai.ne.jp/trackback/15784
トラックバック