テキストリンク(文字リンク)の変更と装飾

ブログ初心者の無料アクセスアップ法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

テキストリンク(文字リンク)の変更と装飾

テキストリンクの変更・装飾の方法について説明します。


テキストリンクとは、
単語や文章をクリックすると別のページに移動するように設定されているものです。

例えば⇒ このブログのトップページ

html上で、<a>~</a>で囲ったタグです。


このテキストリンクの変更は、CSS(スタイルシート)で設定します。

【FC2ブログ】
テンプレートの設定⇒CSSの編集

【忍者ブログ】
テンプレート設定/編集⇒修正をクリックし、右側のHTMLの下のCSS編集窓

【シーサーブログ】
デザインからデザイン一覧を選択し、
少し下にスクロールすると現在適用されているCSSを選択できます。

【アメーバブログ】
ブログを書く⇒デザインの変更⇒スキンCSSの編集


● それでは、設定方法を説明します。

※自信のない方は、わからなくなった時や、修正出来なくなり挫折してしまったときの為に
  CSSの複製やコピーを取ってから変更してみて下さい。



まず、CSS(スタイルシート)の a のセレクタを探します。

通常

a {
color:#5f9b9f;
text-decoration: underline;
}

のみで設定されている場合と


a:link {
color:#5f9b9f;
text-decoration: underline;
}
a:visited {
color: #5f9b9f;
text-decoration: none
}
a:hover {
color: #dd0000;
text-decoration: underline;
}

上記のように3つや4つに分かれて設定されている場合があります。


私のこのブログの場合は↓のような設定になってます。
テキストリンク変更画像


設定は全て半角で、a:link{ } a:visited{ } a:hover{ } の3つで設定します。

a:link 通常時のテキストリンクの設定
a:visited 一度訪問したことのあるテキストリンクの設定 
a:hover マウスがテキストリンクの上にある時の設定

変更項目は、

color: テキストリンクの色の変更(#文字の色)

text-decoration: none;  装飾なし
text-decoration: underline; 下線
text-decoration: overline;  上線
text-decoration: line-through; 打ち消し線

で各設定を行います。


a:link {
color:#5f9b9f;
text-decoration: none;
}
a:visited {
color: #5f9b9f;
text-decoration: none
}
a:hover {
color: #dd0000;
text-decoration: underline;
}

それぞれの項目で色とアンダーラインなどの設定をします。

上記は、オーソドックスなパターンですが
通常時、一度訪問した時は、色が同じでアンダーラインなし
マウスがテキストリンクの上に来たときのみ色の変更とアンダーラインを表示する設定です。


その他、

マウスがテキストリンクの上に乗ったときに、背景色を変更する方法

a:link{ color: #3333ff; text-decoration:none;}
a:visited{ color: #3333ff; text-decoration:none;}
a:hover{color: #337777; text-decoration:none; background-color: #文字の色;}

このブログのトップページ



マウスがテキストリンクの上に乗ったとき、テキストリンクを動かす方法

a:link{ color: #3333ff; text-decoration:none;}
a:visited{ color: #3333ff; text-decoration:none;}
a:hover{color: #337777; text-decoration:none; position: relative; top: 1px; left: 1px;}
※マウスを乗せると右下にテキストリンクが動く設定(画像リンクも動きます)

このブログのトップページ

画像リンクのみを動かす場合はこのように記述
a:hover img{color: #337777; text-decoration:none; position: relative; top: 1px; left: 1px;}


(ただ下に動かす場合は以下の設定)
a:hover{color: #337777; text-decoration:none; position: relative; top: 1px;}

top: left: right: bottom:にpx(ピクセル)で数値を設定
それぞれの意味は、top(上から)、left(左から)、right(右から)、bottom(下から):
何px動かすのか、数値で設定します。


上記のタグは、コピーしてそのまま貼り付けて色だけ変更してお使い頂いて構いません。
あとその際、宜しければこのブログをリンクして頂ければ嬉しいです^^。


ランキングサイト

ネット銀行

便利なネットバンクはアフィリエイター必須

口座残高範囲で使用できるクレジットカード機能を備えたデビットカードは、計画的な利用がしやすく便利

最新記事

キーワード検索

プロフィール

タラコ

Name:タラコ

はじめまして^^
ブログ歴・アフィリエイト歴
約3年のタラコが、
初心者でも出来る、
テンプレートの簡単カスタマイズ方法や
SEO対策、パーツやツールなど、
アクセスアップやアフィリエイトに役立つ情報を総合的に紹介しています。


ご意見・ご質問・お問い合わせはこちら
メールフォーム

最新コメント

相互リンク

『テキストリンク(文字リンク)の変更と装飾』について、説明しています。
ブログ初心者の無料アクセスアップ法

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。