今回はリンクを貼る文字に工夫するＣＳＳのご紹介です。
ブログの場合、既存のテンプレートですでに用意された物を
使用していらっしゃる方も多いと思います。
すでにあるＣＳＳの場合、たいていはリンク文字の色が、
記事の文字と違うという程度になっているかと思います。
このままでも構わないのですが、少し手間を加えるだけで
クリック率が多少アップします。
このサイトはリンクの文字下にアンダーライン、
マウス（カーソル）を合わせると、リンク文字の色が
変化するような設定をしてあります。
↓カーソルを合わせてみて下さい
日々お勉強中。
■まずは、リンクの下にアンダーラインを入れる方法です。
これを入れる事により、「リンク文字」という事を
訪問した方がぱっと見ただけで分かるようになります。
A:link{text-decoration: underline; }と入れると
リンク文字の下にアンダーラインが出るようになります。
また、A:linkの後に
{border-bottom: 1px dotted #ここには文字色を入れる; }と入れるとアンダーラインが点線で表示されるようになります。
■次に指定ごとにリンク文字の色を変える方法です。
これを変える事で、リンク文字をクリックする前、した後、
カーソルを合わせた時〜などそれぞれの色を指定する事が
出来るようになります。
A:link・・・クリックする前
A:visited・・・クリックした後
A:active・・・クリック中
A:hover・・・カーソルを合わせた時
↑それぞれこのような意味があります。
全て違う色に指定したい場合は、それぞれに色を指定します。
例えばこのサイトでは
A:link{color: #4682b4; }
A:visited{color: #4682b4; }
A:active{color: #4682b4; }
A:hover{color: #ff69b4; }
と、カーソルを合わせた時だけ色が変わる様にしてあります。
先ほどのラインと組み合わせるのであれば
A:link{text-decoration: underline; color: #ここにお好きな文字の色; }
という風にそれぞれ設定すればＯＫです＾＾
色々と試してクリック率が良くなるように設定してみるのも
良いと思います。
色コード参考サイト様→色々セレクト
↓ぽちっとお願いしますｍ（＿ ＿）ｍ
★人気ブログランキング
|
|
|
|
ＣＳＳデザイン第５回「リンクカラー」
はい、ついに第５回目です。 今回はリンクカラーについて触れようと思います。 「リンクカラーってナニ？」 「リンクがどれかわかって、リンクしたときに色が変わるものだよ♪」 と、まぁ勝手な解釈をし..
はい、ついに第５回目です。 今回はリンクカラーについて触れようと思います。 「リンクカラーってナニ？」 「リンクがどれかわかって、リンクしたときに色が変わるものだよ♪」 と、まぁ勝手な解釈をし..
思いの袖丈
2005-03-07 21:59
2005-03-07 21:59
seesaaカスタマイズのススメ III
前回・前々回の記事に続いて、seesaaのカスタマイズについての記事です。 前回の記事までで文字と背景色のカスタマイズについての説明を終えたので、今回の記事では枠線の太さ・スタイル・色のカスタム方法..
前回・前々回の記事に続いて、seesaaのカスタマイズについての記事です。 前回の記事までで文字と背景色のカスタマイズについての説明を終えたので、今回の記事では枠線の太さ・スタイル・色のカスタム方法..
OTONA dic.
2005-03-15 09:38
2005-03-15 09:38
ブログデザイン変更、ひとまず完了。
ブログのデザインを大幅に変更しました〜♪ 今まではホワイトのテンプレートをベースに作っていたのを、 フレンズのテンプレートをベースに、色々といじってみました。 真っ白もすっきりしててよかったんです..
ブログのデザインを大幅に変更しました〜♪ 今まではホワイトのテンプレートをベースに作っていたのを、 フレンズのテンプレートをベースに、色々といじってみました。 真っ白もすっきりしててよかったんです..
おしゃれママとベビーにオススメアイテムを紹介します【コドモヲモイ】blog
2005-07-04 17:58
2005-07-04 17:58
カーソルを乗せると色が変わる
デザインネタは早すぎる気もしますが、少しずつ公開していきますね。 まずは表題の通り『リンクにカーソルを載せると色が変わる』です。 だから何？ と言われると困りますが・・・ seesaaブログだ..
デザインネタは早すぎる気もしますが、少しずつ公開していきますね。 まずは表題の通り『リンクにカーソルを載せると色が変わる』です。 だから何？ と言われると困りますが・・・ seesaaブログだ..
seesaaブログで本格アフィリエイトショップ
2005-12-29 16:32
2005-12-29 16:32
よろしければ、教えてもらえないでしょうか。
お願いします。
はじめまして＾＾ いえいえ全然失礼じゃないですよ！
楽天広場さんの場合ＣＳＳが使用出来ないのでこの記事で書いた方法は
残念ながら使用する事が出来ないんです（＾＾；
楽天さんの場合出来る方法は・・・
１：管理画面で「詳細設定（上級者用）」を開く
２：その中の「メインの設定」を開く
３：その中の「メインの背景色・区切り線・文字色・リンク色の設定」
にある「テキストリンク（クリック前）色」を変えるとクリック前の文字色が、
（↑私の記事で言う所のA:linkと同じ）
「テキストリンク（クリック後）色」を変えるとクリック後の文字色が変わります。
（↑こちらはA:visitedと同じ）
ただ、この方法だとクリック中とカーソルを合わせた時の色は
変えられないんです（＾＾；
そしてこの方法もしすでにご存知でしたら申し訳ありませんｍ（＿ ＿）ｍ
分かりました。 又 ぜひ訪問させてください。
そうそうのご返事ありがとうございます。
又 来ます。
いえいえ、こちらこそあまりお役に立てず申し訳ありません（＾＾；
楽天さんでも自由にコードが入力出来るようになるといいんですけどね＾＾
また是非いらして下さい！
berryさんに伺いたいのですが、seesaaにすぐ応用できるレベルでデザイン面でのお薦めの書籍やサイトがあれば教えていただけないでしょうか。今はとりあえず私は左サイドバーのみのテンプレート（秋の小径）も両サイドバーのように使おうとしたり、berryさんのサイトのように表示画面の左右の余白を小さくしたりしたいのですが、どうにもこうにもスタイルシートをいじってもうまく変わってくれないのです・・・。何か勉強したいと思うのですが、暗中模索の状態です。お時間あればお願いします。
はじめまして＆デザインを褒めて頂いてすごくうれしいです＾＾
「秋の小径」ですね。使った事がないのでもしかすると
うまくいかないかも知れないんですが・・・
もしも上手くいかなかったらごめんなさい（＞＜）
CSS画面の真ん中あたりに
#links-left {
font-weight:normal;
width:182px;
float:left;
margin-top:0px;
text-align:left;
margin-left:15px;
}
#links {
}
という所があります。ここの１番下
#links {
}
の{ }の間に
font-weight:normal;
width:182px;
float:left;
margin-top:0px;
text-align:left;
margin-right:15px;
というのをまず追加して下さい。
次に#links-leftと#linksの中にあるwidth:182px; という所の数字と、
CSS画面の上の方にある
#content {
margin-top:0px;
margin-bottom:30px;
margin-left:20px;
float:left;
width:545px;
color:#746659;
text-align:left;
}
の中にある width:545px; の数字を
３つの合計が「７２７」以下になるようにお好きな
数値をご自分で決めて入れて下さい。
これで両サイドバーになると・・・多分・・・（＾＾；
それと、左右のはじの幅を狭くする方法は
#links-left #links の中にある
margin-left:15px; margin-right:15px;
という所の数値を減らすと狭くなります。
（私の所は5pxにしています＾＾）
実はSeesaaさんのデザインにすぐ利用出来そうなサイトを
昔私も探したんですが見つからなかったんです（＾＾；
書籍だと立ち読みでしか見てないので「これ！」というのが
分からないのですが「プロバイダ別blogデザインカスタマイズ事典」
というのが良さそうな感じでした＾＾
ブログを始めたのですが分からないことだらけです。
このようなオリジナルのデザインが出来たらいいなあと思っています。これからも色々参考になるテクニックなど合ったら教えてください。
はじめまして＆コメントありがとうございます＾＾
デザインを変えるのはCSSの用語さえ覚えてしまえば
誰でも簡単に変えられるようになります＾＾
私もサイト運営を始めたばかりの頃は全く分からず
すごく大変でした（＾＾；
何か分からない事がありましたら気軽に聞きに来て下さい＾＾
出来る限りお役に立てるよう頑張ります＾＾
トラックバックさせていただきました。
場所ごとのリンク文字のカスタムの方法を記事で載せましたが既に別の方が違う記事で載せてたんですね(苦笑)
内容が重複してしまいました。申し訳ないです。
私自身、CSSについてはわからないことが多数あるのですが「日々勉強中。」さんのように素人にも分かりやすくCSSデザインについて書かれているブログは大変重宝しています。CSSに迷ったときにまた訪問させていただきます(笑)
では、失礼します。
はじめまして＆トラックバックありがとうございます＾＾
おまけに記事の中で紹介までして下さいまして大変恐縮です〜。
トラックバックの内容が重複していても全然OKです♪
私は実はCSSとかHTMLの事を記事にするのが苦手でして（笑）
どこかでまとめて解説して下さっているサイトさんは
ないものかと思ったりしています（＾＾；
ではでは、ありがとうございました。
私の方こそ参考になります＾＾
こんにちは、早速、私のWeb Pageでもリンク先の色がマウスを当てたら変わる様にCSSを変更しました。「おっ！」と言う感動がありました。ありがとうございました。今日も色々、読ませて頂きました。SEOとかCSSの改造とか面白い記事一杯ありますね。大感謝です！また、BerryさんのDesignもしつこくなくスッキリとしていてとても良いと思います。僕もカテゴリやコメント、トラックバック一覧の様なものに枠を設けたいのですが、それはCSSの書き換えで簡単にできますでしょうか？
お暇な時にチョット教えて貰えたら嬉しいです。
MickeyMickey
いらっしゃいませ＆お役に立ててうれしいです＾＾
ただSEOに関しては全くもって素人の考察なので、「こんなのもあるのか」ぐらいで
読み流して頂けるとうれしかったりします（＾＾；
＞僕もカテゴリやコメント、トラックバック一覧の様なものに枠を設けたいのですが、それはCSSの書き換えで簡単にできますでしょうか？
はい、枠はCSSをいじる事で作成する事が可能です＾＾
CSSを見ていくと、.side というので始まる部分があります。
ここに
border-left:1px solid お好きな色;
border-right:1px solid お好きな色;
border-bottom:1px solid お好きな色;
border-top:1px solid お好きな色;
というのを追加してあげると枠で囲めるようになります。
ただ、元々のデザインテンプレートによってはサイドバーに画像を使用している場合があります。
その場合は、同じ.side の部分に↓のような記述があると思います。
background-image:url(ttp://○○.seesaa.net/image/○○.gif);
background-repeat:repeat;
枠を入れる場合は↑この記述を削除しないと、うまく枠が表示されない可能性もあるので、
必要によって、この記述を削除して下さい＾＾
この記事に関しては同じ様な内容ですが、私のページはまだまだ内容が薄ので今後も参考にさせていただきます。
でわ
はじめまして＆TBありがとうございます＾＾
いえいえ、私の所はたいしたものはございませんので、
カズさんのカスタマイズ記事、楽しみにしております＾＾
是非またいらして下さい♪
HTMLとCSSでHP作りを始めた者です。
ご指導をよろしくお願い致します。
ページ、ブロックの背景色によってリンクの色（a:link,a:visited.a:hovor,a:active）を変えるにはCSS或いはHTMLにどう記入すればいいのでしょうか？
最初に濃い色のメニューバーで使う薄い色の色群を指定してしまったので、そのままだと薄いメインページの中ではリンク色が目立たなく読みづらくなります。背景別のリンク色の指定はどうすればよいのかをお教えください。