当サイトは、インターネットエクスプローラーのセキュリティを「高」、プライバシーを「すべてのCookieをブロック」にすると、サクサク表示され、クリックしても安全です。
ソホネット(宝塚/パソコン家庭教師・ホームページ作成運営代行・パソコン関連事務代行)

【FrontPage2003ダイナミックWebテンプレートでホームページ作成】023:ダイナミックWebテンプレートにCSSを適用する(2)
青チームのスタイルをこのように設定します(この上にマウスをあててください)
No. 簡単な説明 操作画像(クリック→拡大ウィンドウ表示)
279 新規作成をクリックします
280 その他のページテンプレートをクリックします
281 スタイルシートタブをクリック→標準のスタイルシートをクリックします
282 OKをクリックします
283 スタイルをクリックします
284 ユーザー定義のスタイルを選択します
285 新規作成をクリックします
286 名前セレクタに

a:hover.demo2-blue

と正確に入力します

  • 「a:hover」=リンクにマウスを当てると
  • 「demo2-blue」とクラス名をつけた部分が、今から設定するように変化します
287 【リンクにマウスを当てると、リンクの文字の色が白になる設定】

書式設定をクリック→フォントをクリックします

288 フォントタブで、色を「白」にします
289 効果で「テキストを修飾しない」をクリックします
290 OKをクリックします
291 【リンクにマウスを当てると、リンクの行の背景が青になる設定】

書式設定をクリック→枠線をクリックします

292 パターンタブで、背景色を青にします
293 OKをクリックします
294 【リンクにマウスを当てると、リンクの行の幅が100%になる設定】

書式設定をクリック→配置をクリックします

295 以下のように設定して、OKをクリックします
  • 折り返しのスタイル=なし
  • 配置のスタイル=なし
  • 幅=半角英数で「100%」と入力(%を忘れないこと!)
  • 高さ=空白のままで放置する(何も入力しないこと!)
296 【リンクにマウスを当てると、リンクの段落行の高さが150%になる設定】

書式設定をクリック→段落をクリックします

297 行間を「1.5行」にします
298 OKをクリックします

この設定は、リンク部分にマウスを当てたときだけの変化です。

残念ながら、FrontPage2003で、HTML記述(CSS記述)を使わないでするのは、これが限界です。

でも、これだけできれば十分でしょう。


行のリンク以外の部分も、マウスを当てると変化するようにするには、「display:block;」が必要です。

当サイトの左メニュー「FrontPage2003」の文字の右にスペースがありますので、そこにマウスを当ててみてください。

背景色が変わったでしょう。

これが「display:block;」を使う方法です。

当方では、「display:block;」を表に設定しています。

ところが、Office Live Betaのhtmlモジュールでは反映されないので、そちらでは「display:block;」をセルに使っています。


なお、「display:block;」をリストに設定する方法もありますが、リストに画像を利用している場合、その画像が出てきたりして不気味な感じになりますので、ご注意ください。

ナビメニュー
 
累計