リンク文字の下線を表示・非表示

今回は、「リンク文字の下線を表示、あるいは、非表示にする」カスタマイズ方法について説明します。

ページ全体のリンク文字の下線を表示・非表示するには

リンク文字の下線をカスタマイズする方法として、ページ全体のリンク文字の下線を変更する方法を例にして説明します。

■ CSS（スタイルシート）の編集
リンク文字の下線を変更するには、スタイルシートを編集します。
デフォルト・テンプレートの場合は、下記の部分を編集することで、ページ全体のリンク文字の下線を表示したり、非表示にしたりできます。

＜スタイルシート＞

a { text-decoration: underline; }

文字の装飾を指定 ： text-decoration

リンクの文字に下線を表示させたり、非表示にするには、文字を装飾する「text-decoration」プロパティを使用します。

■ リンク文字の下線を消すには
リンク文字の下線を消すには、「none」と指定します。

< 記述例 >

a. {text-decoration: none;}

< 表示例 >

あいうえお

■ リンク文字の下線を表示するには
リンク文字の下線を表示するには、「underline」と指定します。

< 記述例 >

a. {text-decoration: underline;}

< 表示例 >

あいうえお

部分的にリンク文字の下線を表示・非表示するには

リンク文字の装飾について、ページ全体のリンク文字を例として説明しましたが、部分的にリンク文字を変更したい場合は、その該当箇所で

.○○○ a { text-decoration: underline; }

というように追記・編集することで変更できます。

例えば、ブログタイトルのリンク文字に下線を表示する場合は、下記のソースのように編集します。

＜スタイルシート＞

#banner a { text-decoration: underline; }

MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

リンクの状態によって下線を表示・非表示するには

リンク文字の下線は、「未訪問のとき」や「訪問済みのとき」、「カーソルが重なったとき」、「クリックしたとき」など、リンクの状態ごとに指定することもできます。

例えば、「ブログタイトルのリンク文字を、カーソルが重なったときだけ下線を表示」する場合は、下記のように編集します。

＜スタイルシート＞

#banner a { text-decoration: none; } #banner a:link { text-decoration: none; } #banner a:visited { text-decoration: none; } #banner a:hover { text-decoration: underline; }

擬似クラス	意味
a:link	未訪問のリンク
a:visited	訪問済みのリンク
a:hover	カーソルが重なったときのリンク
a:active	クリックしたときのリンク

以上、リンク文字の下線のカスタマイズ方法について説明しました。

ブログランキングに参加中です。応援お願いします。