MASHの「ホームページのススメ (Windows版)」

・マメに丁寧にHPをメンテしたい人の参考書＝＝＝＞ MASHのお友達　かもかあさんの　かるがもすとうりい　
評価ポイント：とにかく、TOPページも含めて、その季節やイベント毎に変化していくHP。しかも、温かみのあるコンテンツばかり。JavaApplet素材を上手に利用したTOPはステキです。
・世の中のお役に立つHPを作りたい人の参考書＝＝＝＞ 猫の里親探し待合室　
評価ポイント： その名の通り、ネコちゃんの里親探し掲示板サイトです。 MASHもこちらのHPのおかげで拾った子猫たちの里親さんに出会えました。目的が明確なHPの一例です。デザイン・センスもジャストフィットです。
　 　

ホームページを今すぐ作ってみよう！「テキスト・エディター編（その3）」

どうしても、お金を掛けずに自分でホームページ(以降 HPと呼ぶ）を作ってみたい人は、テキスト・エディターを使ってトライしてみよう。テキスト・エディターっていうのは、テキストが書けるソフトなどを指す。（フリーウエアも一杯ある）例としては、Windowsにオマケで付いている「メモ帳」などである。
前回（第２回）までに説明してきたテクニックを習得すれば、自力でのHP立ち上げは、サイフと相談することなく実現できたでしょう。とにかく、何度も　いろいろなパターンを試してみて、カベに突き当たったら、HTML作成に関するHPを歩き回ってみて下さい。「あきらめ」は禁物です。答えは、目の前にあると思えば楽勝なこともあります。

いよいよ、ちょっと「らしい」テクである「クリッカブル・マップ(Clickable Map)」について遊んでみましょう。これは、読んで字の如く・・・クリック可能な地図・・・つまり・・・画像内に任意に配置できるクリックできるリンク・ボタンの配置のことです。「好きな画像をHPへ貼ってみたけど、それだけだと今ひとつだし、メニューのテキストをゴチャゴチャ書くのもイヤ。遊び心のあるものにしたい。」というちょっと贅沢な悩みのある人向きかと思います。ただし・・・乱用すると嫌われる（笑）恐れもあるので、ワンポイント利用される方がベターでしょう。

まずは、下のスクリプト（<html>から</html>まで）をメモ帳を使って、HTML書類として保存しましょう。（ここでは、click.htmlで保存しました。）
保存方法の詳細は、第1回セミナーをご参照下さい。
さて、出来上がったHPは、このように見えます。 ジュゴンの写真内をマウスを動かしてみましょう。カーソルが「手」マークに変わるところでクリック！
2箇所あるはずですし、クリックの瞬間に、四角形か円形の輪郭が出て、リンク先のHPへジャンプするはずです。
「だけど、隠しスイッチだし、見に来た人はどうやって判るの？」という当然の疑問がわきます。ここからが、あなたのアイデアの見せ所です。
たとえば、ジュゴンの写真のボタンのあたりに、イタズラ書きのように「トップへ戻るぜ！」などと Windowsオマケの「ペイント」などで
書き足しておいて場所と機能を認識してもらったり、「どこかに秘密の入り口が・・・」などとテキストをHPへ掲示して、第２回で使った
ALTタグで、ボタンタグ内にalt="ここからProfileへジャンプ！」など書けば、ちょっとだけ腕が上がったような喜びを味わえるかもしれません。

注）事前に拡張子が見える設定になっていないと付けたつもりの拡張子がファイル名の一部として誤認される。だから、エクスプローラー →メニュー「表示」→ フォルダーオプション→タブ「表示」→「登録されているファイルの拡張子は表示しない」にチェック(v)が入っていたら、外すこと。

<html>

<head>

<title>Visual Training1</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

</head>

<body>
<!--
次のタグは、PART1&2でも説明したフォルダー"jpgfile"内にある"dugon.jpg"という画像ファイルを"try"という
MAP名で使用することを宣言する。むろん、MAP名も画像もあなたの好きなものに代えて結構。
でも、"#"は省いてはダメ。
-->
<img src="jpgfile/dugon.jpg" usemap="#try">

<map name="try">


<!--
次のタグは、前述のMAP上のどこへ・どんな形のクリック用リンク・ボタンを位置決めするかを
定義するものです。
ボタン形状：画像全て＝"default" 四角形＝"rect" 円＝"circle" 多角形＝"poly"
座標の指定方法：画像全ての場合＝当然、指定なし　四角形＝x1,y1,x2,y2（四角形の対角線上２角）
円＝x,y,r(円の中心x/y, 半径）　多角形＝x1,y1,・・・・・xn,yn(n角形の各角)
ここでは、四角形、円の２種類のボタンを使います。そして、四角のボタンを押すと・・・MASHのTOP PAGEへ、
また、円形ボタンを押すと・・・MASHのProfile PAGEへジャンプします。この部分もあなたの好きなHPへ
リンクするように設定してみて下さい。それと、ボタン同士が重ならないように、 更に、必ず、MAPタグ　</map>をお忘れなく。


-->
<area shape="rect" coords="30,30,200,200" href="http://www3.plala.or.jp/mash/">

<area shape="circle" coords="300,300,100" href="http://www3.plala.or.jp/mash/profile.html">

</map>
</body>
</html>
次回は、サウンドやFLASHについてお話したいと思います。あせらずに行きましょう！少しずつやっていけば、忘れないし飽きにくい・・・というか・・　MASHは、不精者（爆）
有名・強力壁紙関連サイトへのリンク MASH厳選 素材リンク集

次回 「テキスト・エディター編（その4）」 をお楽しみに！

MASHのHPへ