www.wanichan.com

Web > Expression > Tips > スタイルシート

ハイパーリンク文字列の下線を消すには

スタイルシート
 
最終更新日時:2012/11/12 13:56:41
  • このエントリーをはてなブックマークに追加
Expression Webでハイパーリンク文字列の下線(アンダーライン)を消すには、スタイルシートを使用します。すべてのWebページのハイパーリンク文字列の下線を消す場合、外部スタイルシート(CSSファイル)を用意してWebページにリンクすると効率的です。

はじめに

FrontPageではハイパーリンク文字列の下線を消すオプションがあったのに、Expression Webではそのオプションがどこにもない!という声があったので記事にしてみました。

リンク文字列のアンダーラインを消すには、[タグプロパティ]パネルの[style]属性から操作する方法と、スタイルの作成方法の2通りあります。

FrontPageでのリンク文字列に対する[フォント]ダイアログボックスの[フォント]タブ内にある[テキストを修飾しない]のチェックは、[スタイルの変更]ダイアログボックスの[フォント]カテゴリ内にある[text-decoration]オプションのなかから[none]にチェックをつけることと同じことになります。

FrontPage 2003での[フォント]ダイアログボックス
フォント

ただし、すべてのリンクのアンダーラインを消すには、スタイルを作成したほうが効率的です。

指定のハイパーリンク文字列の下線を消す方法

  1. リンク文字列内にカーソルを移動します。
  2. [タグプロパティ]パネルの[style]属性を探し、そのボックス内をクリックします。
  3. 右側にダイアログボックスの表示ボタンが現れるので、そのボタンをクリックします。
  4. [スタイルの変更]ダイアログボックスが表示されたら[text-decoration]のなかから[none]にチェックをつけて[OK]ボタンをクリックします。
  5. 指定したリンク文字列の下線が消え、[スタイルの適用]パネルに以下のように表示されました。

結果のコードは以下の通りです。

<a href="リンク先パス" style="text-decoration: none">リンク文字列</a>

作業中のWebページのすべてのハイパーリンク文字列の下線を消す方法

  1. [書式設定]メニューの[新規CSSスタイル]をクリックします。
  2. [新しいスタイル]ダイアログボックスの[セレクター]ボックス一覧から[a]を選択します。
  3. [フォント]カテゴリを開いていることを確認します。
  4. [text-decoration]オプションのなかから[none]にチェックを入れて、[OK]ボタンをクリックします。
  5. すべてのリンク文字列の下線が消え、リンク文字列内にカーソルを移動すると、[スタイルの適用]パネルには以下のように表示されました。

結果のコードは<head>と</head>の領域内に以下のように記述されます。

<style type="text/css">
a {
text-decoration: none;
}
</style>

備考

すべてのWebページのリンク文字列のアンダーラインを一括して消すには、CSSファイルを用意し、WebページにCSSファイルをリンクして、『作業中のWebページに生成されたスタイルをCSSファイルへ移動するには』の記事を参考にして作業中のWebページに作成されたスタイルをそのCSSファイルに移動する等の方法をとります。

デザインをすべて統一するには、CSSファイルを活用すると効率的です。スタイル管理に関する記事は、Expression Web 4の『Chapter 3 デザインの決定』の章の各記事に目を通しておいてください。

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ