授業用ファイルのコピー
授業で使用するソフト
●ホームページビルダー（Ｖｅｒ１０以上）
みなさんのパソコンに教材をコピーしてください。
ホームページ講座 受講者教材データ
ＵＳＢメモリーで、フォルダーごとデスクトップかＣドライブへ。
次のソフトは教材データに入っています。
既にパソコンに入っていない場合はイン
ストールしてください。ＶＩＸフォルダーの中のＶＩＸ２２１．Ｌｚｈを解凍。
●Ｖｉｘ 画像のリサイズ、名前変更など
第２章
ホームページビルダーの使い方
７月７日
⑤ホームページの構成、市販のｗｅｂ作成ソフト紹介
⑥専用ソフト（ホームページビルダー）でのＨＰ作成
文章を入れる、文字の色、フォント、大きさ、修飾
⑦画像のリサイズ、ＧＩＦアニメ、透明化
画像の挿入、BGMの挿入、動画の挿入、表の挿入
⑧リンクを入れる、パスワードつきリンク、ＰＤＦ作成
背景、フレーム、その他
内容はかなりあり、時間的にデモだけにするところもありますが、同窓
会ホームページに教材を載せておきますので、あとで実習してください。
トップページ ページ ページ ページ ページ ページ ページ ページ ページ ページ 外部ページ
ホームページの構成
外部ページ リンク リンク リンク リンク第７回地域活動発表会 大津支部 レイ大同窓会トップページ
ページ遷移図とは
地域活動発表会 大津支部会報エジターによりタグを駆使してホームページを制作するプロが
いますが、一般的にはホームページの新規作成、維持管理には
専用のホームページツールソフトを使います。
専用ソフトを使えば、複雑なタグを覚える必要も無く、スマート
なホームページを制作、維持管理できます。
ホームページ作成ソフト
Dreamweaver ダヴィンチ・カート ホームページ制作王 ホームページ・ビルダー ホームページZERO ID for WebLiFE
Adobe IPC JUNGLE ジャストシステム ソースネクスト デジタルステージ
主な市販のウェブサイト作成ソフト １万円～３万円ぐらい
企業、プロ向けとしては、
Dreamweaver
個人、初心者向けは圧倒的に
ホームページ・ビルダーが使われる
ホームページ作成ソフトの最新バージョン
画面の上で右クリック （ソースの表示）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<!--2011/12/14 07:56:24--> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="GENERATOR" content="ソースネクスト ホームページZERO"> <title>20111114 - 2011-11-24</title>
<link rel="stylesheet" href="02_white_a0_0010.css" type="text/css" media="all"> </head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML>
<HEAD>
<META name="keywords" content="レイ大草津、レイカディア大学草津校、滋賀県レイカ ディア大学、レイ大">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css">
<META name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.10.0 for Windows">
<TITLE>レイカディア大学草津校</TITLE> </HEAD>
各支部のホームページを作ってください。
支部のトップページだけはパターンを統一した方がいいかも。
専用ソフト（ホームページビルダー）での作成
①ホームページビルダーとは
②文章を入れる、文字の色、フォント、大きさ、修飾
③画像のリサイズ、ＧＩＦアニメ、透明化
④画像の挿入、BGMの挿入、動画の挿入、表の挿入
⑤リンクを入れる、パスワードつきリンク、ＰＤＦ作成
⑥背景、フレーム
時間があれば
見やすいホームページの作り方などを説明
内容が多いですが、一応、ひととおりの
機能が分かるよう、説明します。
本日のメイン
ホームページビルダーとは
ＨＴＭＬ生成ソフトですから、出来上がる物（ＨＴＭＬ）は同じでも、
バージョンによって使い方が大きく違います。
バージョン１～バージョン１９（最新）と種類があります。
みなさん、それぞれ、違うバージョンですと、細かい操作の説
明は意味がありません。各機能のボタンはどこかではなく、機能
単位に何ができるかの説明をします。個別の操作はご自身の
持っているソフトのバージョンで自習してください。
Ｖ８以降はほぼ、基本機能はそろっていると言われています。
ホームページビルダーの最新バージョン
ホームページビルダーを使ってみよう
ネットでも多くの場所でホームページ
ビルダーの使い方が学習できます。
ホームページビルダーの使い方を動画で解説
それでは、ホームページビルダーを使ってみましょう。
多くのテクニックや機能がありますが、一通りできるようになっ
たあとで、個別に自分の感性で手直ししていってください。
詳しくは、自習していただくことにして、基本的な機能だけの説
明とします。
ホームページビルダーを起動します。
「どこでも配置モード」 「標準モード」 「テンプレートを使って作成」 とありますが、
「標準モード」を選択して下さい。
「標準モード」
普段からこのモードを使うようにしましょう。
「どこでも配置モード」
スタイルシート
文字や画像をポンポン好きな所に配置できたりと自由度が高いですが、ページ
が固定されるので、ブラウザや設定によっては、ページがはみ出したり、表示さ
れない部分があり困る事が多いので、お薦めできません。
後で標準モードなどにしたいと思った場合などには、新しく作成し直した方が良
いくらい苦労します。
絶対、このモードで作らないでください。
「テンプレートを使って作成」
テンプレートというのは雛形とも呼ばれ、すでに色んな設定や形が出来上がっ
ているものです。
バージョンによってはフレーム設定ページの作成もあります
教材の中からtest.htmlホームページビルダーで開い
てください。（ファイル、開く、test.html）
上バーの「ページ編集」をクリック
ホームページを作ってみよう！
上バーの「プレビュー」をクリック
ホームページを作ってみよう！
上バーの「ページ編集」をクリック
ホームページを作ってみよう！
一部分だけマウスで選択して太字にする
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
<META http-equiv="Content-Style-Type"
content="text/css">
<META name="GENERATOR" content="JustSystems
Homepage Builder Version 15.0.12.0 for Windows">
<TITLE>例題</TITLE>
</HEAD>
<BODY><B>ホームページを作ってみよう！</B></BODY>
</HTML>
上バーの「ＨＴＭＬソース」をクリック
青い部分はホームページビルダーが自動的に生成した部分なの
で無視してください。
新規に標準モードで作成
「ページ編集」で文字を入れてみます。レイカディア大学同窓会 ＸＸＸＸ支部のページ
「改行」
文字の装飾
文字を大きく、色をつける、太字にする、フォントを変える、位置
ぞろえなど
一部の文字列だけも可能です。
背景の設定、ページタイトルの設定（ページの属性）
「ＨＴＭＬソース」、
「ページ／ソース」、
「プレビュー」で確認してください。
教材の中の
同窓会支部ページフォルダーの中の
各自支部トップページ
xxxxxxx.htm
をホームページビルダーで開いてく
ださい。
支部会員数
（平成２７年度５月末）xxxx人
を修正してください。
支部名
会員数
大
津
239
守山・野洲
168
草津・栗東
159
甲賀・湖南
121
近江 八幡
184
中
部
136
湖
東
194
湖
北
314
高
島
47
合
計
1562
第３章でサーバー更新の説明をしますので、その後、自支部
のページを更新してください。
ホームページに載せる画像について
画像のリサイズ
デジカメで撮影した写真は容量が非常に大きく、ホームページに
入れると、サーバー容量に大きく影響します。また、閲覧する場合
も回線速度によってはなかなか表示が終わらないことになります。
（
重いサイト
という）
そこで、ホームページに載せる前に写真をリサイズします。
リサイズした写真は当然解像度（画質）は落ちます。
リサイズして写真を小さく
４０００＊３０００（５ＭＢ）
Ｖｉｘによるリサイズの実演
教材の中の大津祭の写真を
横７００
にリサイズしてください。
①総合変換＞出力＞現在のフォルダにチェック＞ＯＫ ②フォーマット＞画質を１００に＞ＯＫ ③リサイズ＞リサイズを行うにチェック 横幅指定700、平均化、シャープネス＞ＯＫ ① ② ③画像を挿入します。
挿入したい場所にカーソルを置いて、「画像ファイルの挿入」
別のウィンドウからドラッグペーストでも可能です。
画像の四隅で大きくしたり小さくしたりで調整します。
バージョンによっては画像の上でサイズを変更したり、編集な
どができます。
素材集からいろいろな画像を挿入してみましょう。
ホームページビルダーの素材＞images＞photo
画像の透明化
①ホームページビルダーで教材の中のgakusyuu.htmを開く。
背景模様だけの画面。
②教材の中から画像「laca-kousyou.jpg」を取り込む。
白枠の画像です。これを白い色を透明化します。
③画像の上で右クリックして「画像の編集」
④gif形式で保存をチェック。透明化をクリック。
⑤スポイトアイコンを画像の白いところへ持っていきクリック。
⑥ＯＫで透明化が完了。
⑦保存するときは 「laca-kousyou.gif」として保存されます。
画像ファイルの形式が
ｊｐｇ
から
ｇｉｆ
になります。
画像の透明化
画像のロールオーバー効果の挿入
画像の上にマウスが乗った時、写真が変化します。
教材の中から「ロールオーバー１.jpg」を取り込みます。 写真の上で右クリックして、「画像のロールオーバー効果の挿入」をクリックします。 「ファイル名を指定する」で参照「ロールオーバー２.jpg」を選ぶ。ＯＫ。 プレビューで写真の上にマウスを置いてみてください。画像のロールオーバー効果の挿入
画像の上にマウスが乗った時、写真が大きくなります。
教材の中から「ロールオーバー３.jpg」を取り込みます。 写真の上で右クリックして、「画像のロールオーバー効果の挿入」をクリックします。 「ファイル名を指定する」で参照「ロールオーバー４.jpg」を選ぶ。 右クリック「属性の変更」「その他」「マウスポインタが上に・・・」のチェックを外して「ＯＫ」 プレビューで写真の上にマウスを置いてみてください。ロールオーバー効果の例
ＢＧＭの挿入
ページの中でサウンドを鳴らします。
ページ編集の状態で、教材の中から、
「
レイカディア讃歌.wav
」をドラッグ＆ペーストします。
プレビューで確認してください。
<BODY>のうしろに入ります。
<BODY><EMBED src="file:レイカディア讃歌.wav"
autostart="true" hidden="true" loop="true">
教材の中にいろいろな音楽データがありますので、いろいろ
試してください。
動画の挿入
動画は、
AVI , Motion JPEG , AVCHD , MPEG , MP4 , MOVなど、
カメラメーカーなどによって方式が違います。（デジカメ、
ビデオカメラも同様）
動画の編集（一部カット、合成など）はネットで多くのフ
リーソフトが公開されています。
動画の挿入（wmv形式の場合）
いったん全て消してから、ページ編集の状態で、教材の中の動画
ファイル
dousoukaisoukai2015.wmv
をドラッグ＆ペーストします。
動画の挿入（wmv形式の場合）
再生、停止、早送りなど
動画の挿入（ｙｏｕｔｕｂｅを利用）
動画をホームページに載せる場合、ｗｍｖ、ｆｌｖなどいろいろの形
式がありますが、閲覧再生するパソコンによっては特別のソフトを
あらかじめインストールしてある必要があるときがあります。
ｙｏｕｔｕｂｅ（無料）であれば、どんなパソコンでも、スマホでも再生
が可能です。ネット上の動画はほとんどｙｏｕｔｕｂｅです。
そこで、動画はｙｏｕｔｕｂｅでアップすることをお勧めします。
ｙｏｕｔｕｂｅでは、次の形式ならアップできます。これ以外の場合
は変換ソフトにより、下記のどれかの形式に変換してください。
MOV、MPEG4、AVI、WMV、MPEGPS、FLV 、3GPP、WebM
動画の挿入（ｙｏｕｔｕｂｅを利用）
ｙｏｕｔｕｂｅの利用は無料です。
Ｇｏｕｇｌｅでアカウントを作成。
動画の挿入（ｙｏｕｔｕｂｅを利用）
実際に短い動画をｙｏｕｔｕｂｅにアップしてみましょう。
動画の挿入（ｙｏｕｔｕｂｅを利用）
動画の挿入（ｙｏｕｔｕｂｅを利用）
動画の挿入（ｙｏｕｔｕｂｅを利用）
動画の挿入（ｙｏｕｔｕｂｅを利用）
動画の挿入（ｙｏｕｔｕｂｅを利用）
動画の挿入（ｙｏｕｔｕｂｅを利用）
?rel=0をうしろに挿入
<iframe width="480" height="270"
src="https://www.youtube.com/embed/vOzrbHxTAj8?rel=0" frameborder="0" allowfullscreen></iframe>
表を入れる
表示がはみ出したくない場合
のテキスト枠にも使います。
リンクを入れる
教材の中から、lacadia-sanka.htmを開いてください。 ボタンをクリックすると、別のページへリンクします。 「歌」はリンク設定済みです。 「演奏」を選択して「リンクの挿入」をクリック 「参照」からlacadia-sanka-ensou.htmを開く ターゲットは「新しいウィンドウ」 ＯＫ 「プレビュー」して演奏をクリックしてください。 ターゲットは 「新しいウィンドウ」 「親ウィンドウ」 「同一ウィンドウ」 「全画面」 があります。リンクの書式
<FONT size="6" face="HGP創英角ﾎﾟｯﾌﾟ体"><B>レイカディア賛歌 </B></FONT><BR>
<BR> <BR>
<B>＜＜＜ <A href="lacadia-sanka-uta.htm" target="_self">歌</A> ＞＞＞<BR>
<BR> <BR>
＜＜＜ <A href="lacadia-sanka-ensou.htm" target="_self">演奏</A> ＞＞＞
</B><BR> <BR>
ＢＯＤＹタグ
<ＨＴＭＬ> <ＨＥＡＤ> <ＴＩＴＬＥ>文書のタイトル</ＴＩＴＬＥ> </ＨＥＡＤ> <ＢＯＤＹ ＢＧＣＯＬＯＲ=“#ffffff” ＴＥＸＴ=“#000000” ＬＩＮＫ=“#0000ff” ＶＬＩＮＫ=“#ff00ff” ＡＬＩＮＫ=“#ff0000” ＢＡＣＫＧＲＯＵＮＤ="laca-wall.gif" > 文書の本体 </ＢＯＤＹ> </ＨＴＭＬ> ＴＥＸＴ=“色”････････････ ･･ 文書中の文字の色を指定する ＬＩＮＫ=“色”･････････････ ･･ まだ見ていないページへのリンク箇所の色を指定する ＶＬＩＮＫ=“色”････････････ ･･すでに見たページへのリンク箇所の色を指定する ＡＬＩＮＫ=“色”････････････ ･･リンクをクリックした時のリンク箇所の色を指定する ＢＧＣＯＬＯＲ=“色”･････････ 文書の背景色を指定する ＢＡＣＫＧＲＯＵＮＤ="画像"･･文書の壁紙を指定するlaca-wall.gif
既読の色
ツールのひとつを使ってみる
ＷＥＢアニメーター 動く画像（gifファイルを作ります）
ツール＞ｗｅｂアニメーターの起動
アニメーションウィザード＞複数の画像ファイルを使用してアニメーションを作成
画像の追加
教材の中の「総会」フォルダーの中の
dousoukaisoukai2015-001.jpg～ dousoukaisoukai2015-001.jpgを選択
次へ＞次へ
無限をクリック＞次へ
表示時間を1500にして次へ
完了
ファイル＞
適当な名前をつけて保存（拡張子はgif）
そのファイルをホームページに貼り付けてプレビューしてください。
フレーム 表示エリアが複数ある構造
メニュー
ステージ
更新履歴 トップ
フレーム
<html lang="ja">
<head>
<title>レイカディア大学同窓会</title>
</head>
<frameset rows="
57
,
*
">
<frame name="top" src="lacadia-dousoukai-top.htm"
scrolling="NO">
<frameset cols="
160,760
,
*
">
<frame name="left" src="lacadia-dousoukai-left.htm"
scrolling="NO">
<frame name="stage" src="lacadia-dousoukai-stage.htm">
<frame name="right" src="lacadia-dousoukai-coment.htm">
<noframes>
<body></body>
</noframes>
</frameset>
<noframes><p>このページを表示するには、フレームをサポートしてい
るブラウザーが必要です。</p></noframes>
</frameset>
</html>
フレーム 表示エリアが複数ある構造
57
160
フレームの設定
ホームページビルダーの機能でフレームのページは
簡単にできます。
ただ、最初に一度作ればいいわけですから、時間的
に実習は省略します。
一般に公開されているページを取り込んでアレンジ
するなどしてください。
ホームページビルダーで標準モードで新規作成
受講者教材データーから校章（flag-1.gif）を取り込みます。
挿入
→図か、別ウィンドウからコピーペースト
画像が大きいので、角をつまんで適当な大きさに小さくします。
校章の下に「レイカディア大学校章」と書いてください。
（文字サイズ、フォント変更、太字、色など、いろいろ変更してください。）
図も文字もセンタリングします。
ページ編集モードで中央ぞろえ
「タイトルをレイカディア大学校章のページ」とします。
HTMLソースモードで<TITLE></TITLE>に入れるか、ページ編集モードの
「ページの属性」
背景を入れます。
挿入＞背景 受講者教材データーから
laca-wall.gif
を選びます。
校章画像の右側に鳥のGIFアニメ（
isohiyo3.gif）を下に入れます。
挿入
→図か、別ウィンドウからドラッグ
校章画像をマウスＯＮでセピアにします。
画像の上で右クリック、画像のロールオーバー効果の挿入
次へ、効果の選択、セピア＞ＯＫ＞次へ＞次へ＞完了
プレビューで確認してください。
ホームページビルダーで標準モードで新規作成
受講者教材データのホームページビルダーの素材の中にいろ
いろ見本がありますので自由にお使いください。
パスワード付きリンクの挿入
<a href="laca-page-pw-error.htm" onclick="return
_HpbPwdWnd(this,'$vvrDy#¥'+%)|x~@ANB~!,%)>
+}|s-C{&%FEDK');" target="_blank">同窓会草津栗
東支部会員への連絡（パスワード必要）</a>
ＰＤＦ作成
ＷＯＲＤ、ＥＸＣＥＬなどの文書をホームページに貼ると、ＷＯＲＤ、ＥＸＣＥＬの
入っていないパソコンでは読むことができません。
そこで、これらの文書をＰＤＦファイル化して載せておきます。ＰＤＦならどのパ
ソコンにもあり（無ければ無料でダウンロード）、画像ファイルながら、高精度で
扱えます。
http://www.cube-soft.jp/cubepdf/
フリーソフト（ｃｕｂｅｐｄｆなど）でＰ
ＤＦ化ができますが、最近のｏｆｆｉｃ
ｅソフトでは、文書保存時にＰＤＦ
を選定すれば可能です。
デモ
• 教材の中から
「草津栗東27-1号p1.docx」をｗｏｒｄで開き、
ｐｄｆで保管する。
（kusatsuritto-27-1.pdf）
• ホームページにリンクを作る。
<FONT face=“HGP創英角ﾎﾟｯﾌﾟ体”><B>滋賀県レイカディア大学同窓会</B></FONT>
特殊フォントがパソコンに入っていない場合は文字は標準（ＭＳゴ
ジックなど）になります。
ｈｔｍｌの検証サービス
http://cetus.sakura.ne.jp/htmllint/htmllint.html
ネットでｈｔｍｌを無料でチェック、採点してくれます。
地域活動発表会のメニューをチェックする。
以上でホームページ作成の概要は終わります。
ホームページは自分のパソコン上にありますが、
これを一般閲覧のため、レイ大同窓会サーバー
へ載せる必要があります。
サーバー更新
については、第３章（７月２１日）に
説明します。
１．ホームページの内容を決める。
一番大切なのは、「内容」つまり「中身」です。どんなにきれいなデ
ザインでも、内容が面白くなければ、誰も来てくれません。
２．ホームページの構成を決める。
内容を決めたら、その内容をどう分類分けするのか、ページの位
置関係をどうするのかなどを決めます。
３．ホームページのデータを置く場所を確保する。
WWW サーバーは、皆さんがお使いのインターネット接続プロバイ
ダーや各種の業者から選びます。
４．ホームページを作るためのソフトウェアを用意する。
特別なソフトウェアは必要ありません。しかし、効率良く作業する
には、ホームページ作りに特化したソフトウェアが便利です。
ホームページ作りの手順
５．ホームページに使う素材を用意する。
文字だけのHTML では、文字情報しか表現できません。イラ
ストや写真などがある方が、楽しいホームページになります。
６．HTML で編集をする。
内容や構成、データを置く場所、ソフトウェアを用意したら、あ
とは、HTML を使って実際にホームページを作っていきます。
７．ホームページのデータを転送する。
データが完成したら、あとはそのデータを WWW サーバーに転
送し、ブラウザーで問題なく表示されましたら、完成です。
素材については、インターネットで多く無料で公開されています.半角カナ文字や機種依存文字を使っていて、きちんと読めない 半角カナは、文字化けの原因になりますし、機種依存文字は、その文字を表示できない 環境の方には、意味を理解することができません。 タイトルがきちんと指定されていない 各ページにタイトル <title> 部分がきちんと指定されていないと、ブックマーク したときに ブックマーク を見ても、どれがこの前行ったページだったかなんてことがわかりません。 リンク切れがたくさんある ホームページの最大の特徴は、リンクをたどって次から次へと興味のあるページを見て いくことですが、リンク切れがあると幻滅。公開する前に、リンクチェックをしましょう。 リンクがどこかわからない テキストリンクの色と、本文の色が同じだったりして、リンク箇所がどこかわからないな んてことがないようにしましょう。テキストリンクの色は青色が標準です。 文字サイズが小さい 文字サイズが小さくて、文章が読めないなんてことがないようにしましょう。
<font size=“1”> や <font size=“2”> などの指定をすると、文字サイズが小さすぎて、読 みにくい場合が多いようです。<font size="3"> 以上を指定するようにしましょう。
ページがやたらと長い 1 ページがやたらと長いと、スクロールするのがとても面倒です。適当な長さで切って、 ページを分けましょう。 色使いが悪い 背景色と文字色の色の違いがわからなくて読みにくかったり、コントラストのきつい色や 蛍光色を多用したりせず、無難な色使い、白の背景に黒の文字などにしましょう。 画像がやたらと大きい 画像がやたらと大きくて、画像が表示されるのに時間がかかってしまうと、訪問された方 は、その画像のデータダウンロードが終了する前に、他のページへ行ってしまいます。 まったく更新されていない せっかく皆さんが訪問されても、内容が更新されていなかったら、がっかりです。こまめ に内容を更新して、どんどんと楽しくしてきましょう。
＜趣味系＞ 個人で作るホームページの多くは、これに該当します。 写真が趣味だから、自分が撮った写真を見てもらいたい。 食べ歩きが趣味だから、美味しい店を紹介したい。 映画を見ることが好きだから、映画評論をしたい。 ゴルフが趣味だから、ゴルフ仲間を集めたい。 浜崎あゆみが好きだから、ホームページをあゆでいっぱいにしたい。 ＜講座系＞ 勉強系サイトです。多いのはプログラミング講座です。パソコンで見ているわけですから、 コンピュータ関係が多いのは当然ですね。 趣味が高じてという意味からすると、趣味系にも分類できます。 ホームページ作成講座 パソコン教室 料理教室 私のダイエット法 競馬必勝法
あなたも個人のページを作りませんか
タグが何を意味するのかのメモを記述する <!-- ～ -->
テキストを <!-- と --> で囲むことにより、その部分をコメント部分として、ブラウザーに表 示することなく、HTML ファイルにテキストを記述しておくことができます。
検索エンジンに与える情報を記述する
<meta name="keywords" content="キーワードとなる文字列"> <meta name="description" content="ホームページの紹介文">
上記の記述を <head> 内に追加しておくことで、ロボット (自動巡回) 型の検索エンジン が参照してくれます。
時間が経つと他のページへ移動する
<meta http-equiv="refresh" content="更新する時間(秒);URL=リンク先の URL"> 上記を <head> 内に追加しておくことで、一定時間後にページが切り替わります。 リンク先の概要を表示する
<a href="リンク先 URL" title="リンク先の概要紹介文">
上記のように title="" を <a href> 内に追加しておくことで、マウスが重なった際に、リンク 先の概要紹介文が表示されます。
