先日、リンクへの下線の付け方を記事にしましたが、今回は動的にリンクの装飾を変える方法についてまとめたいと思います。
動的といっても、マウスがリンク文字の上に来たときに限ります。
このブログがそうですが、リンク文字の上にマウスが来ると、文字に下線が付くと思います。
ページの基本的なデザインは維持したいけど、出来ればリンクは目立たせたい、と思ってやっています。
結局マウスを重ねないと分からないという点では、不十分なのですが・・・
さて、その設定方法ですが、スタイルシートに設定します。
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効果
・リンク先の表示場所
【 はじめに 】
このブログは、私「ほふり」がアフィリエイトを実施していく中で、
「行ったこと」「感じたこと」
等をseesaa のブログを中心として、記事にしています。
カテゴリはページ上下のリンクより、最新記事はこの下より参照下さい！
【 最新ニュース 】
Ｅブックを発明した彼のネットビジネスマニュアルを無料でみる方法とは？無料お試しはこちら!
ネットマーケティングのカリスマ教材読んで満足した場合のみ料金が発生
満足しない場合は返送可能
購入した場合も60日間の返金保証付き
ブログを作ったその次は・・・
脱常識！ブログでYST&Google対策
Yahoo!やGoogleで上位表示をめざそう！
4月の先行リリース後、封印されていた商材がついに販売再開
アフィリエイトの成約に、まずはアクセスが必要です
200部販売で19,800円から29,800円に値上げの予定
ブログ来訪者を引き込む文章
“たったの２４時間であなたの今後のネット収益を倍増する”
宮川明のインターネット・コピーライティング基礎講座
こちらもアフィリエイトに必見のライティングスキル
当然、seesaaブログに限定しません
2006年03月20日
動的なリンク文字への装飾
はたして何位？！鬼ブログランキングorくつろぐ
seesaaブログでアフィリエイト TOPへ
posted by ほふり at 01:41
| Comment(5)
| seesaaカスタマイズ
ＴＥＴＳです。
コメントありがとうございます。
ほふりさん、正解です。記事の一括編集？でしたっけ？で、問題解決でした。
ありがとうございます。
早速今日の記事にさせていただきました。
今日のＨＴＭＬも使えそうですね。参考にさせてもらいます。
感謝の応援です。
このブログはｓｅｅｓａａブログを持っている人に役に立ちますね！
参考になります＾＾
hideichiさんの相互リンク企画でのリンクの件ですが、
遅ればせながらリンク完了しましたのでご報告に。
http://saitan.blog33.fc2.com/blog-entry-51.html
↑こちらにリンク貼らせて頂きました！
お暇なときにでも確認してみてくださいね！
こんにちは。ICHIです。
いつもコメント有難うございます。
今日も、サイトの勉強にきました。
動的リンク文字ですか？
参考に、させていただきます。
また、寄らせてください。
こんにちは。ICHIです。
いつもコメント有難うございます。
今日も、サイトの勉強にきました。
動的リンク文字ですか？
参考に、させていただきます。
また、寄らせてください。
コメントありがとうございます。
そうですか、正解ですか(^-^ )
いろいろ探求すると、便利な機能がありそうですね！
＞大二郎さん
こんばんは。
コメント＆リンク設置報告ありがとうございます。
こちらから確認する手間が省けました(^^;;
このブログがお役に立てれば幸いです。
＞ICHI
こちらそこコメントありがとうございます。
動的な変更は情報を見つけるのに苦労しました(^^;;
ぜひ活用してください！