応用編
表示例の下にソース（HTML）を入れてあります。
利用したい場合はこのソースをコピーしてご自分のホームページ（ウィジット/HTML）へ貼り付けます。
流れる文字
ウィジットへ以下の様に書くことで文字が流れます。
<MARQUEE direction="right">東・北日本篇と西日本編に分かれています</MARQUEE>
<MARQUEE direction="left">東・北日本篇と西日本編に分かれています</MARQUEE>
マウスオーバーイベント（マウスを重ねると変化します）
フォントの字体を動的に変えたい
<DIV onmouseover="this.style.fontStyle='italic'"
onmouseout="this.style.fontStyle='normal'">
ここを通過すると、文字列が斜体に変化します。</DIV>
文字列の背景色を変えたい
<SPAN onmouseover="this.style.background='pink';"
onmouseout="this.style.background='white';">
この上を通過すると、背景色がピンクに変わります。
</SPAN>
フォントのサイズを動的に変えたい
<DIV style="font-size:16px"
onmouseover="this.style.fontSize='20px'"
onmouseout="this.style.fontSize='16px'">
ここを通過すると、文字サイズが変化するよ。</DIV>
| マウスを乗せると赤くなるよ！！ |
カーソルが重なるとセルの背景色が変化する
<table border="1">
<td bgcolor="#FFFFFF"
onmouseover="this.style.backgroundColor='#FF0000'"
onmouseout="this.style.backgroundColor='#FFFFFF'">
マウスを乗せると赤くなるよ！！
</td></table>
<ul style="float:left;widht:120px;margin:0 10px 0 0;padding-left:20px;">
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('A')" onMouseOut="VitaOut()">ビタミンA</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('B1')" onMouseOut="VitaOut()">ビタミンB1</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('B2')" onMouseOut="VitaOut()">ビタミンB2</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('C')" onMouseOut="VitaOut()">ビタミンC</a>
<li><a href="JavaScript:void(0)" onMouseOver="VitaOn('D')" onMouseOut="VitaOut()">ビタミンD</a> </ul>
<div id="VitaArea">ビタミンの基礎知識</div>
<div style="clear:left;">項目にマウスを重ねてください。説明が表示されます。</div>
<script>
function VitaOn(data) {
if ( data == 'A' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"ビタミンAは、お肌や粘膜（喉や内蔵）の状態を健康に保つのに欠かせない栄養素です。また網膜に多く含まれており、視力を正常に保つ働きがあります。不足すると目の疲れや視力の低下につながります。";
}
if ( data == 'B1' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"糖質を分解する酵素の働きを助け、エネルギーに換える役割を果たします。ですからビタミンB１が不足すると糖質のエネルギー代謝が悪くなり、疲れやすく、動悸や手足のむくみなどが出てきやすくなります。";
}
if ( data == 'B2' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"ビタミンB２は脂質や糖質の分解を助ける補酵素としての働きと、肌や爪、髪の成長を促進する働きがあります。";
}
if ( data == 'C' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"ビタミンC（アスコルビン酸）の主な役割は、細胞をつなぐコラーゲンの生成や白血球の働きを助けることです。";
}
if ( data == 'D' ) {
var objid=document.getElementById('VitaArea');
objid.innerHTML=
"ビタミンDはカルシウムやリンの吸収を助けます。発育期の子供や妊婦、授乳期の女性は特に成人の3倍の量が必要です。また骨や歯の弱くなる老齢期の人も積極的に摂取しましょう。";
}
}
function VitaOut() {
var objid=document.getElementById('VitaArea');
objid.innerHTML= "ビタミンの基礎知識";
}
</script>
水平線のいろいろ
水平線
太さを5にしています
長さを80%にしています
長さを200にして右揃えにしています
影を消しています
組み合わせています
<H2>水平線</H2>
</br>
<P>太さを5にしています</P>
<HR size="5">
</br>
<P>長さを80%にしています</P>
<HR width="80%">
</br>
<P>長さを200にして右揃えにしています</P>
<HR width="200" align="right">
</br>
<P>影を消しています</P>
<HR noshade="noshade">
</br>
<P>組み合わせています</P>
<hr size="5" width="80%" align="center" noshade="noshade" />
赤い水平線(太さ5ピクセル、赤でべた塗り)
<hr style="background-color:red;border:5px solid red;" />
色はカラーコードで指定します。このページの下にカラーコード参照のリンクがあります。
枠のいろいろ
<div style="border:1px solid #F00;padding:10px;border-radius:10px;">赤い角が丸い枠へ文字を入れる方法です。</div>
<div style="border: 1px dashed #0000FF; padding: 10px;">青い点線の中に文字を入れています。</div>
<div style="border:5px dashed #F00;padding:10px;border-radius:10px;background:#FFA6A6;">かなり目立ちますね。赤い点線の中を赤く塗ったものです。</div>
<fieldset style="border: 5px double #000000; padding: 10px;background:#FFFFFF;">
<legend>ヒント</legend>
※文字を枠に囲んで枠の左上へ文字を入れる事が出来ます。
</fieldset>
参考サイトのURL
Jimdoについての解説サイト
【コピペ枠わく】jimdoで枠を使う方法
http://copipe-de-waku.jimdo.com/
ブラウザを使って自分で画像加工するなら（初心者向け簡単加工）
ブラウザを使って自分で画像加工するなら（高度な加工が出来ます）
高性能な画像処理アプリGIMP
ロゴ作成ソフトの紹介サイト
http://crowdworks.jp/public/jobs/category/26/articles/3375
ＮＨＫクリエイティブ・ライブラリー 動画コンテンツの無料配布
http://www.nhk.or.jp/creative/
音楽素材の無料配布
アクセス解析の無料サービス
XMedia Recode ビデオエンコード変換ソフト（無料）配布
カラーコード 色を指定するためのコードと名前
http://blog.double-h.com/archives/51833142.html
http://www.netyasun.com/home/color.html
カラーコードの使い方
http://html-color-codes.info/japanese/