【 はじめに 】
このブログは、私「ほふり」がアフィリエイトを実施していく中で、
「行ったこと」「感じたこと」
等をseesaa ブログを中心として、記事にしています。

カテゴリはページ上下のリンクより、最新記事はこの下より参照下さい!
【 最新ニュース 】
Eブックを発明した彼のネットビジネスマニュアルを無料でみる方法とは?
無料お試しはこちら!
ネットマーケティングのカリスマ教材
読んで満足した場合のみ料金が発生
満足しない場合は返送可能
購入した場合も60日間の返金保証付き

ブログを作ったその次は・・・
脱常識!ブログでYST&Google対策
Yahoo!やGoogleで上位表示をめざそう!
4月の先行リリース後、封印されていた商材がついに販売再開
アフィリエイトの成約に、まずはアクセスが必要です
200部販売で19,800円から29,800円に値上げの予定

ブログ来訪者を引き込む文章
“たったの24時間であなたの今後のネット収益を倍増する”
宮川明のインターネット・コピーライティング基礎講座

こちらもアフィリエイトに必見のライティングスキル
当然、seesaaブログに限定しません

2006年03月20日

動的なリンク文字への装飾

先日、リンクへの下線の付け方を記事にしましたが、今回は動的にリンクの装飾を変える方法についてまとめたいと思います。

動的といっても、マウスがリンク文字の上に来たときに限ります。

このブログがそうですが、リンク文字の上にマウスが来ると、文字に下線が付くと思います。

ページの基本的なデザインは維持したいけど、出来ればリンクは目立たせたい、と思ってやっています。

結局マウスを重ねないと分からないという点では、不十分なのですが・・・


さて、その設定方法ですが、スタイルシートに設定します。

1.ブログのメニュー(ページ上部)から「デザイン」を選択(クリック)
2.サブメニューから、「スタイルシート」を選択
3.現在使用しているタイトルを選択

スタイルシートに下記記述を追加します。

a:hover {
text-decoration:underline;
}

4.「スタイルシートを変更する」をクリック


a:hover が、マウスがリンク文字の上に来たときに有効になる設定で、

text-decoration:underline; が、文字に下線を付ける設定になります。

ですので、{}の中に他の設定を追加すれば、他の装飾も可能です。

例.
背景色を出す:background-color:色のコード;
文字色を変更:color:色のコード;

例えば、このサイトは、

・リンク色が#6A8AD3
・背景が#FFF

ですが、リンクにマウスが重なったときに、

・リンク色を#FFF
・文字の背景を#6A8AD3
・かつ下線を付ける

にしたい場合(要は反転ですね)

a:hover {
color:#FFF;
background-color:#6A8AD3;
text-decoration:underline;
}

この設定を追加すればOKです。

こうなります


関連記事
リンクへの下線の付け方
リンクには下線を
リンクのSEO効果
リンク先の表示場所

はたして何位?!鬼ブログランキングorくつろぐ



seesaaブログでアフィリエイト TOPへ
posted by ほふり at 01:41 | Comment(5) | seesaaカスタマイズ
この記事へのコメント
ほふりさん、こんばんは

TETSです。
コメントありがとうございます。

ほふりさん、正解です。記事の一括編集?でしたっけ?で、問題解決でした。
ありがとうございます。
早速今日の記事にさせていただきました。

今日のHTMLも使えそうですね。参考にさせてもらいます。

感謝の応援です。
Posted by TETS@情報起業見聞録 at 2006年03月20日 03:37
おはようございます!大二郎です!

このブログはseesaaブログを持っている人に役に立ちますね!
参考になります^^


hideichiさんの相互リンク企画でのリンクの件ですが、
遅ればせながらリンク完了しましたのでご報告に。

http://saitan.blog33.fc2.com/blog-entry-51.html
↑こちらにリンク貼らせて頂きました!
お暇なときにでも確認してみてくださいね!
Posted by 大二郎 at 2006年03月20日 08:56

こんにちは。ICHIです。

いつもコメント有難うございます。

今日も、サイトの勉強にきました。

動的リンク文字ですか?

参考に、させていただきます。

また、寄らせてください。
Posted by ICHI [情報コレクターが送るあなたへの幸せレシピ] at 2006年03月20日 13:25

こんにちは。ICHIです。

いつもコメント有難うございます。

今日も、サイトの勉強にきました。

動的リンク文字ですか?

参考に、させていただきます。

また、寄らせてください。
Posted by ICHI [情報コレクターが送るあなたへの幸せレシピ] at 2006年03月20日 13:27
>TETSさん

コメントありがとうございます。
そうですか、正解ですか(^-^ )

いろいろ探求すると、便利な機能がありそうですね!

>大二郎さん

こんばんは。
コメント&リンク設置報告ありがとうございます。
こちらから確認する手間が省けました(^^;;

このブログがお役に立てれば幸いです。

>ICHI

こちらそこコメントありがとうございます。

動的な変更は情報を見つけるのに苦労しました(^^;;

ぜひ活用してください!
Posted by seesaaブログでアフィリエイト at 2006年03月21日 02:04
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。