アメブロのクリック済みの色を変える方法。リンクの色を変えてわかりやすくしたい

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

 

初心者
cssでクリック済みのリンクの色を変える方法がわかりません。
『クリック済みのリンク』と『まだクリックしていないリンク』がわかるようにしたいです。 

よしたか
簡単な説明をしますね。

リンクの色を変更する事によって、今までクリックしたものかわかります。

そのほかカーソルが文字の上にいっているかなどもわかります。

この記事を読むことで
  • テキストリンクの色を変える方法がわかります。
  • CSSの変更情報の基礎が知っている人はすぐにみつかります。

テキストリンクの色を変更する方法

テキストリンクの色の変更場所

4タイプについての動作をCSSで指定する事が可能です。

 

簡単に言えば・・・・・・

全部色を変えれるということです。

色の変化の種類は
  • クリック前
  • クリック後
  • マウスオーバー時
  • クリック時

アメブロのCSSでCheckすること

CSSの編集で探してみてください。

定義済みのクラスとして、普通に使う事が可能です。

CSSでアメブロのCSSに貼り付け

a:link {
color: #111111;
}

a:visited {
color: #222222;
}

a:hover {
color: #333333;
}

a:active {
color: #444444;
}

 

ポイント

  • a:link → クリック前の、リンクされた状態
  • a:visited → クリック後の、訪問済みの状態
  • a:hover → マウスが重なった時の状態
  • a:active → マウスをクリックした時の状態

もちろん、文字色だけではなく、次の事も変更が可能です。

詳しく知りたい方は検索してみて下さい。

ポイント

  • 下線の有無

  • ボーダーの指定

  • 背景色の指定

記述には順番がありますが

全てを指定しなくても大丈夫です。

 

記述のルールなど

但し・・・・・

上記の順番で書かなければ機能しない事もあります。

 

つまり・・・・

visitedよりも前にhoverは指定できない

などがあります。

 

  • linkとvisitedだけの指定
  • link、hover、activeの3つの指定だけは可能です。

 

 

まとめ

簡単にCSSの変更のきっかけを伝えました。

テキストリンクを変えるだけでクリックされる割合が変わると言われています。

 

少し工夫して加工してみて下さい(^^)

 

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事