コアラ Internet blog

TBをただいま受け付けていません。
このサイトで紹介している商品は、AF、DSによるメーカー直送品です。
より良い商品をより安く紹介していきます。
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) |
HTMLのお勉強(その8)
HTMLのお勉強(その7)の要領で、スクロールのバックに色を付けることも出来ます。

愛しの君へ、愛を込めて

こんな感じですか。

タグは、すべて英数半角文字です、ただし日本語は全角文字です。

<MARQUEE bgcolor="#ff0099">愛しの君へ、愛を込めて</MARQUEE>

こんな感じです。
その文字に色を付けると、こんな感じです。

<MARQUEE bgcolor="#ff0099">
<span style="font-size:medium;color:#ffff99">愛しの君へ、愛を込めて</span></MARQUEE>

文字の、これも強調に使えるかもしれません。

ただし、これも文字の色と背景の色の組み合わせを考えないと、見にくくなるので注意が必要です。

ただし、これはIE6.0で表示したものですので、IEの古いバージョンやIE以外のブラウザでの対応はわかりません。
一応本では、Netscape7のバージョンでの表示は可能とでていましたが、テストしていませんので、悪しからず。
auther : koara | HTML | - | trackbacks(0) |
HTMLのお勉強(その7)
久しぶりのHTMLです。
今日は、文字のバックに色を付けるに挑戦。

たとえばこんな感じ

愛しい君に、愛を込めて

です。

大切な人にメールでメッセージを送信できるサービス、それが走れメロスです。あらかじめ遺言メールを書いて、信頼できる友人に「メール送信コード」を託しておくと、友人が手続きをすればメールが送信先に送信するというものです。

こんな感じで使えます。

タグは、すべて英数半角文字です。ただし日本語は全角で良いです。

<span style="font-size:medium;color:#00ffff;background-color:#ff0099">愛しい君に、愛を込めて</span>

フォントサイズとカラーの後に ;background-color:カラー番号 を入れてやればいいのです。

ただ色の配色を考えないといけないみたいですけど、文字の強調に使えるかも。
auther : koara | HTML | - | trackbacks(0) |
HTMLのお勉強(その6)
 今日は、バナーの張り方をします。

↓バナーってこんなやつです。↓


 これをクリックすると、指定したURLに飛んでいくのですが。

 バナーとURLを別々に取得するものがあって、それを自分でくまないといけないのがあります。

 その方法がこれです。
 まず、バナーを選んで自分のパソコンに取り込みます。

 取り込んだバナーをアップロードして、そのアップロードした画像一覧の中からバナーを選んで、記事の投稿で「投稿」をクリックすると。

 記事投稿画面に、タグが出てきます。

 それを、コピーしてHTMLの中の入れたいところに貼り付けて入れてやります。

 それと、取得したURLをコピーして、貼り付けるのですが。

 すべて英数半角数字で入力します。

<A HREF="ここにURLを入れる">ここにバナーのタグを入れる</A>

 もしくは

<a href="ここにURLを入れる" target="_blank">ここにバナーのタグを入れる</a>


 たとえば、

<br/>
<center>
<A HREF="http://blog.with2.net/link.php?115428"><img src="images/banner.gif" width="88" height="31" alt="" class="pict" /></A>
</center>
<center>
<span style="font-size:small;color:#ff00cc"> ここをクリック
してください。</span>

 の場合はこのようになります。







ここをクリック
してください。




 もしくは、

<br/>
<center>
<a href="http://hottokenai.jp/" target="_blank">
<img src="http://hottokenai.jp/img/pobe.gif" border="0" alt="ほっとけない 世界のまずしさ"></a>
</center>

 の場合はこんな感じです。




ほっとけない 世界のまずしさ



こんな感じです。

それと誰か、スカイメッセージ見ましたか?
スカイメッセージの記事はこれ。
auther : koara | HTML | - | - |
HTMLのお勉強(その5)
今日は、表を作ってみたいと思います。
国別のアクセス数













国別アクセス数
日本36
ネットワーク組織
オーストラリア
ドイツ



一応出来たみたいですけど、どうも位置がうまくいかないような。
もうちょっと勉強ですね。
まだまだ先ですね、カスタマイズの道は遠いです。

auther : koara | HTML | - | trackbacks(0) |
HTMLのお勉強(その4)
今日は、文字をいろいろしてみます。

すべて英数半角文字で、日本語は全角です。

まず、ふりがな(ルビ)をつけてみます。

喜怒哀楽(きどあいらく)

コードは、
<ruby>喜怒哀楽<rp>(</rp><rt>きどあいらく</rt><rp>)</rp></ruby>

フルーツ¥1000¥500
超特価半額

コードは、
<s>¥1000</s>   <u>超特価半額</u>

今日は、この辺にしておきます。

追記
ルビの部分ですが、ブラウザによって表示するものと、表示しないものがありました。
<ruby>はインターネットエクスプローラー(IE)でしか動かなくて、その他のブラウザは無視されます。
逆に、<rp>は(IE)では、無視されます。
両方入れていると、両方の機能が働いて、(IE)以外のブラウザでは、「喜怒哀楽(喜怒哀楽)」になります。
ということで、「 ( 」の部分を変えました。「 ) 」に変更しました。
まだまだ勉強不足でした、すみませんでした。
auther : koara | HTML | - | trackbacks(0) |
HTMLのお勉強(その3)
 やっとブログランキングのバナーが張れました。

 クリックするとランキングに飛んでいきます。

 最初バナーとランキングコードが別々だったのをやっと一緒にすることが出来ました。

 なんせHTMLがさっぱりわからなかったのですが何とか組み合わせがわかりました。

 それにサイドバーに文字を入れることも出来ました。

 これは文字に色を付ける応用でした。
 すべて英数半角文字での入力です。ただし日本語は全角で入力、タグコードはこれです。
</br>
<Center>
<span style="font-size:small;color:#ff00cc"> ここをクリック↑↓
してください。</span>
</center>

 これをテンプレートの編集でHTML編集フォームの中に入れてやればいいだけです。
 そうすればサイドバーに表示されます。

 ちなみに<br/>は、上下の間を開けるです。

<center> </center>はセンターに寄せるで、<left> </left>が左寄せ、<right> </right>が右寄せです。

文字サイズはいろいろな方法がありますが簡単な方法を
font-size:
xx-smal(最極小)  x-small(極小)  small(小)
medium(中)  large(大)  x-large(極大)  xx-large(最極大)
smaller(一回り小さく)   larger(一回り大きく)

色は名前で入れられるのは16色で、それ以外はカラー番号で入力しないといけません。
基本の16色は、color:
black, blue, aqua, navy, green, olive, lime, teal, purple, fuchsia, red, maroon, yellow, white, silver, gray,
以上16色です。

これで、記事の中などに色を付けることが出来ます。

とりあえず、今日はこのへんにしておきます。
auther : koara | HTML | - | trackbacks(0) |
HTMLのお勉強(その2)
テストしてみます。

 いままでパソコンのメモ帳にHTMLのタグを打ってブラウザに表示していましたが、ちょっとここで無謀にもこのブログで文字の色が変わるか試してみます。(やめといた方がいいかも。)

 タイトルとかはちょっと難しそうなので。(まだCSSまで進んでいないし) 
記事の中の文字が変わるかですが。ほかのテキストで色を変えてコピーして貼ると変わるらしいのですが。
 
 そのテキストがわからないので、HTMLの勉強ですから、記事の中にタグを入れる方法にしました。(もちろんワードなどからのコピーでの貼り付けは無理です。文字ははれても色は付きません。)

最初にで変えてみます。
はどうでしょうか?
え〜い、黄色はどうだ、
アクアグリーン
シルバーライムと変わっています?
 
 一応自分のパソコンでは変わっているのですが、どうでしょうか?

 な〜んだその程度と、思うかもしれませんが、初心者にとっては驚異のできごとです。
 
 確かに基礎の基礎ですけど、サイドバーなどやタイトルもゆくゆくは変えていきたいと思いますが、何せまだこの程度なので、ゆっくりと勉強して進めていこうと思っています。

auther : koara | HTML | - | trackbacks(0) |
HTMLのお勉強始め
 ワードやエクセルが出来てもHTMLはさっぱりなしょんぼり、超初心者
ですが、みんなのカスタマイズを見る見ていたら、自分もやってみたい(かなり無謀な)工具と思い、ここは基本からの方がいいと、先日HTMLの本(めがね丸さんのブログのお勧めに出ていた本です)を買って読んでいたのですが、ここはやはり実践で憶えた方がと思いもう2冊買ってみたのですが。

(そのうちの1冊は、Java Scriptの本ですが、これは、HTMLをもう少し進めてからの方がいいみたいでした。)

 ただこのブログで試す勇気がまだ無いので、もう少し進めてから挑戦ですかね。 
 
 でも自分でHTMLのタグを打ってブラウザに表示して文字がでたときは感動しました。(つい嬉しいうれしくて記事にしてしまいました。)
 
 ホームページ制作ソフトなどを購入できるほど予算がないので、Windowsに標準装備のメモ帳からしていますが、なかなかに進めていくと面白いです。
 なんだと思うようなことが、初心者にはなるほどと感動です。

 まだ文字や背景に色を付けたり罫線を付けたりですけど、なかなかに楽しんでいます。(まだまだ最初の基礎の基礎ですけど)

 目指せカスタマイズでマイペースで頑張ってみたいと思います。(その前に英単語の復習をしないといけないかな)

ちなみに買った2冊の本は、下に載せておきましたので参考までに。
お勧め度は、まだ途中なので何ともいえません。 まずは参考までに。

HTML&スタイルシートレッスンブック
HTML&スタイルシートレッスンブック
エビスコム

JavaScript&CGIレッスンブック
JavaScript&CGIレッスンブック
エビスコム


auther : koara | HTML | - | - |