ホームページビルダー14・13・12・11 使い方解説



ページデザインによっては、背景色によっては、リンク文字が見えなくなってしまう場合があります。そんな時は個別にリンクの色を変える必要があります。
Classでリンクの装飾
同じページの中でのリンクの色やアンダーライン等は、ページの属性(body)、スタイルシート(css)で設定できますが、ページ全体に適応されます。クラスを使えば1行1行リンクの装飾を変えることが出来ます。このページでの設定はビルダーの初期設定ですのでリンク部分は下図のとおりです。
@ はビルダーの設定のままです。通常は皆様が見慣れているこのパターンをお勧めします。
A はリンクされている文字の色を、背景色が濃いので白に、既読をピンク設定しています。FONTタグでも指定できますが、ずっと白です。
@ホームページビルダーを学ぼう
Aホームページビルダーを学ぼう
Classの設定(リンクの装飾)
それでは実際にリンクの装飾をしてみましょう。まずは、どのようにリンク文字を変化させるのかを決めましょう。ここでは例で説明します。リンクの色は、未訪問のリンクも、既読リンクは、マウスがリンクに触れたときはオレンジで設定してみましょう。
例: ホームページビルダーを学ぼう
スタイルシートマネージャーを起動します。→ 追加をクリックします。
スタイルの設定でリンクAを選択します。(右)すると、下図のように左上の部分にHTMLタグ名にAと記されています。
Aの後にclassの名前(任意)
を付けます。ここでは.no1としました。
no1の前にドットを付けるのを忘れずに
変更→
Aはリンクの色ですので、設定メニューの「カラーと背景」で前景色がフォントの色なので赤を選択します。OKボタンを押して閉じます。スタイルシートマネージャーに
が現れます。これがリンク文字の色です。
次に追加を押し、同様にリンクの「未表示のリンク A:LINK」を選択します。
先と同じくclassの名前を付けます。
変更→
A:LINKは未訪問のリンク色ですので、ここでも同様文字の色を赤に選択します。
OKで閉じます。スタイルシートマネージャーに「A.no1:LINK」が追加されています。
同様にリンクの「A:VISITED(表示したリンク)」
「A:HOVER(マウスがリンクの上に来たとき)」
を設定します。
「A.no1:VISITED」とするのを忘れずに!!
スタイルシートマネージャに左図
のような設定があるかどうか確認
してください。
実際にリンクを設定しましょう
→リンクを設定してある文字の先頭にカーソルを当てます。→右クリックでメニューを出します
→下にある「スタイル」の設定を選択→クラスメニューをクリック
→設定したclass名がプルダウンメニューで現れますので、該当名を選択します。
メニューには[no1][no1:LINK][no1:VISITED]等がありますが、選択するクラス名は.no1です。
同様に別の設定をした、たとえばno2を別の箇所に設定します。
下のABのように同じセルの中にあるリンクでも別の表現が出来ます。
A ホームページビルダーを学ぼう
B ホームページビルダーを学ぼう
訪問してきてくれた方が違和感を覚えないように注意してください。
HTMLソースには長々とCSSが記述されていますので、出来れば外部からリンクを張ることをお勧めいたします。



| 各種リンクの設定 | テキストリンク | リンクの装飾 | 画像のリンク | 実用リンク | ウィンドウ操作1 | ウィンドウ操作2 |
四角形でで選択 多角形で選択

Copyright (C) 2004 Web-Creation All Rights Reserved.