2004年09月20日

リンクテキストの文字色変更

このブログのデザイン(テンプレート)はヘッダー部の絵はお気に入りなのだけど、それ以外の配色、デザインはいまいち気に入らない。テンプレートを変更しようと何度も考えたけど、他にいいのも見当たらない。そこで少しずつ、設置をいじってみることにしました。 特にこのテンプレートの場合は、一度訪問したリンク先のテキストの色が、通常の文字の色と同じ為、リンクが張ってあるということが分かりにくい。まずはこのあたりのテキスト色の変更からやってみます。
テキストの設定(フォントの設定)は、デザインの設定からCSSを編集します。

a{color:#000;text-decoration:none;}
a:link{color:#1E90FF;text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{color:#000;text-decoration:underline;}

この辺りが目的の設定箇所です。各行でいろいろな状態のテキストの設定がされています。いろいろな状態とは、
通常
訪問前のリンク(link)
訪問後のリンク(visited)
マウスが上にあるときのリンク(hover)
となっています。

今回は訪問後のリンク色を変更したいので、
「a:visited」
の部分を編集します。
問題は、ここのテキストカラーの設定が省略されていることです。他のところは「color:#1E90FF;」というように、テキストカラーをしているのですが、Visitedにはそれがありません。
そこで、ここに他の行と同じように指定を入れることにします。

color:#00F;
text-decorationとの区切りにセミコロン(;)入れるのを忘れてはいけません。

これで、訪問したことのあるリンク色が青に変わるはずです。色の指定はカラーチャートを参考にします。

CSSを保存して、Blogの再構築を実行します。確かにリンク色は想定したとおりに色が変わりました。

しかし、一つ問題が発生しました。
予定していなかった部分も色が変わってしまうのです。例えば、カレンダーとか「続きを読む」とか「TrackBack」の文字まで全部、一度クリックすると青くなってしまいます。これらも全部リンクテキストなんですね。

そこで再びCSSの編集です。先ほど編集した部分からさらに下を見てみると、「a.acalendar:visited」「a.acontinues:visited」といった文字があります。この辺りがカレンダーなどの設定のようです。ここに同じように色をして行きます。

私が選んだテンプレートではこの辺り、ことごとく設定が省略されております。省略された場合は「a:visited」の設定が採用されるようですね。他にもいくらか直しました。
a.acalendar  カレンダー
a.acontinues  続きを読む
a.amenu    メニュー(ページの上へなど)
a.arss     RSS
a.aposted    PostedBy〜辺り
a.atrackback-post トラックバック
a.aside     サイドバー内

「a.aposted」以下は、少し離れたところにあるので、注意が必要です。

これで気持ちの悪かった部分が少しは改善されました。まだまだ細かいところで気になっているところがあるので、これから少しずつ改善していきます。
人気ブログランキング。目指せトップ10入り!人気ブログランキング


Posted by hammer77 at 18:55│Comments(25)TrackBack(5)Edit

この記事へのトラックバックURL

トラックバックありがとうございます。トラックバックスパム対策の為、この記事へトラックバックするにはそちらの記事内にこの記事へのリンク(参照リンク)が必要になります。不本意ではございますが、ご理解ほどよろしくお願いいたします。(トラックバックポリシー)
この記事へのトラックバック
ブログの設定がガイドをみてもよく理解できなかったけれど、こちらのブログでよくわかりました。
問題発生の続き【実録!Blog初心者主婦が100日でBlogで売上をあげる!?】at 2004年11月05日 11:40
すごく分かりやすくて助かりました!おかげさまで、初めてカスタマイズできました。
カスタマイズ/文字サイズ・色の変更【TRAVEL HETEROPIA】at 2004年11月13日 16:02
Field StarsのURL移転が完了いたしました 本日よりこちらにて再始動しますのでよろしくお願いいたします ※1/8追記 やなっち@プログ管理人の一度してみたかったこと このプログを改装したい^^; なので、実際にしてみました!!
URL移転完了【--Field Stars--】at 2005年01月08日 22:04
ライブドアブログを3カラムにする方法とテキストリンクの色を変える方法のまとめです。 わたしが参考にさせて頂いたブログを以下にご紹介いたします。 ...
ライブドアブログを3カラムにする方法&テキストリンクの色を変える方法【らくがき日記】at 2005年02月13日 06:13
『リンクの色は青色(#0000FF)に下線がいい』 という定説が昔からこの業界の定説であります。 個人的な意見で言うと最近はかならずしもYesと言えなくなってきていると感じます。 ■リンクの色は青色(#0000FF)に下線がいい ブラウザのデフォルトのCSSである為、視覚的に....
リンクの色はどうしましょう?【WEBサイト+phpリファレンス】at 2006年03月02日 01:51
この記事へのコメント
はじめまして。
最近blogを始めてまだ数日です。
こちらの記事を見せていただいて、私も是非!
と思いさっそく試したのですが、上手くいきません。
デザインの設定から自分の使用しているテーマを読み込み「続きを読むの所だけ変更しようと思いaacontinuesのvisitedを上記を見習てcolor〜を挿入→保存する→再構築。で、自分のページに行って確認したのですが、続きを読むをクリックしても文字の変化なしです。
私の手順、間違ってますか?それとも設定されてる内容の中身を勘違いしてるんでしょうか??
スミマセンが教えてください。
Posted by haru at 2005年01月28日 12:02
haruさん、はじめまして。

おかしいですね。手順はあっているように思います。追加した行にきちんとセミコロン付いていますか?それくらいしか思い当たりません。すみません。
Posted by hammer at 2005年01月29日 00:53
さっそくお返事くださってありがとうございます。
もう一度チャレンジしてみたら出来ました!
ありがとうございます。
再構築したあと、もう一度デザインの設定に戻って読み込まなくっちゃいけなかったんですね。
超初心者で、良く解ってなくてごめんなさい。
これからも、コチラのページ参考にさせていただいて、勉強したいです。
Posted by haru at 2005年01月31日 11:43
>再構築したあと、もう一度デザインの設定に戻っ
>て読み込まなくっちゃいけなかったんですね。

そんなこと無いんですけどね。スタイルシートの変更後、保存して再構築すればページに反映されるのですが。おかしいですね。
Posted by hammer at 2005年01月31日 22:43
こんばんは!はじめまして。
私もブログの超・超初心者でなんとかリンク色を変えたいのですが、
何度チャレンジしても色が変わりません。

a{color:#000;text-decoration:underline;}
a:link{color:#000;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}a:hover{color:#999;text-decoration:none;}

#000に変えたところがそうなんですが、
ここ以外に変えなければいけないところってありますか?

ちなみにテーマの設定の画面(custumをクリックしたらすぐでてくる画面)でいいのでしょうか?
情けない質問でスミマセン・・・
Posted by misaki at 2005年02月06日 18:54
はじめまして、misakiさん。
とりあえず、設定する画面はあってます。そこで間違いありません。それと、見たところリンクテキストのスタイル設定も問題ないようです。これでダメですか?

先ほどmisakiさんのブログにもお邪魔して試してみましたが、確かにリンク色がグレーになっていますね。黒ではなくて。

そういえば、この設定を保存したあと、CSSを再構築されましたか?確か、CSSを変更した時は再構築しなければならなかったような気がします。

とりあえず、その辺をお確かめください。それにしても、misakiさんのブログは少し反応が悪いようなのですが、なぜでしょうね。
Posted by hammer at 2005年02月06日 21:35
おはようございます。
さっそく回答ありがとうございます。

再構築の件ですが、ひつこいくらいにやりました(笑)
たぶん10回くらいはやったと思います。

ちなみに初期設定に読み込みなおして、
もう一度設定して再構築しても変わらないんです。

>>確かにリンク色がグレーになっていますね。黒ではなくて。

私が見る限り訪問前のリンクは青のまま(初期設定)なんですが、
グレーはマウスをのせたときの色なんですけど(初期設定のままです)、
hammerさんには訪問前もグレーに見えてますか?

反応が遅いと言うのは、さくさくページが飛ばないという意味でしょうか???
Posted by misaki at 2005年02月07日 09:02
ごめんなさい。普段は青で、マウスオーバー時にグレーです^^;

反応が遅いというのは、リンク部分にマウスを乗せたときの反応です。アンダーラインが消えてテキストカラーがグレーになりますが、その反応がワンテンポ遅いんです。私の環境のせいかもと思いましたが、他のブログではすぐに反応します。

この辺も何か関係しているのでは?
Posted by hammer at 2005年02月07日 23:13
僕もスタイルシート少しいじって、とくに自分で投稿した本文の色が真っ黒なのですこし変えたいのですが
どのあたりを変えればよいのでしょうか?
Posted by nori at 2005年03月03日 08:29
noriさん、こんばんわ。

本文の部分だけを変えたいなら、
.main{
color : #333333;
 ・・・・


でよろしいかと思います。
Posted by hammer at 2005年03月04日 00:03
はじめまして。毎度毎度、このブログを参考にさせてもらってブログいじりをしています。初めてブログをしたときから参考にさせてもらってますので人もこないのにアクセス解析やらなんやら入れて遊んでいます。

しかし、このブログのデザインテンプレートはどう弄って今のデザインになったのですか?既存のテンプレートだと枠みたいなのがあってこういう感じではありませんよね?ぜひ教えてもらいたいです。
Posted by dori at 2005年05月11日 22:35
はじめまして、doriさん。
元のデザインにあった背景画像を消しただけです。これはCSS(スタイルシート)に設定されておりました。それらしい画像のURLを消せば背景の枠が表示されなくなります。

お試しを^^
Posted by hammer at 2005年05月11日 23:50
初めまして。
いつも参考にさせて頂いております。分かりやすくて、私のようなBlog初心者には、大変ありがたいです。

リンクがらみでご質問させて頂きたく。
記事本文中で、別サイトへリンクを貼る際、新しいウィンドウで開く設定にすることは、可能ですか?自分のBlog内へのリンクは、同一ウィンドウ内に開くのが使いやすいとは思うのですが、別サイトに飛ぶと、自分のBlogに戻ってくるのが手間だと思うのです。
良い方法がありましたら、お教えいただければ幸いです。今後とも、よろしくお願いいたします。

ところで、貴サイトに先日2度ほどトラックバックさせて頂いたのですが、何故か失敗しているみたいです。たぶん、私の方の原因なのでしょうが、よく分かりません・・・。
Posted by Metal NEKO at 2005年05月12日 07:28
はじめまして、MetalNEKOさん。
リンク先を別ウィンドウで開く設定は簡単です。

<a href="http://blog.livedoor.jp/metal_neko/" target="_blank">MetalNEKO</a>

と言うように、target="_blank"を書くと別ウィンドウで開くようになりますよ^^

トラックバックがうまく行かない件ですが、もしかしたらライブドアブログの不具合かもしれません。以前どこかのブログでそのような報告がありました。

特に悪質で無い限り、拒否設定はしていませんので、お手数ですが、懲りずにトラックバックしてくださいね。
Posted by hammer at 2005年05月13日 01:26
hammerさん、コメントありがとうございます。
早速参考にさせていただきます。

ところで、教えていただいた方法、リンク挿入時に個別に設定する方法なのでしょうか。
もし、個別記事の本文中のリンクだけ、常にリンクは新しいウィンドウで開くようにしておきたいと思ったら、CCSで設定しておく方法はありますでしょうか。

度重なる質問で、お手数をお掛けしてしまい、申し訳ありませんが、よろしくお願いいたします。
Posted by Metal NEKO at 2005年05月13日 06:41
こんばんわ。MetalNEKOさん。
ええ、個別に設定しないといけません。リンクごとに。今回はCSSの出番はないですね。
Posted by hammer at 2005年05月14日 00:16
あ〜、そうだったんですか〜・・・。
すいません、不精者なので、どうせなら始めから設定しておければ、もっと楽が出来るんじゃないかなぁ、などと思ってしまいまして・・・。

でも、個別にリンクする時にどうすればよいか、お教え頂き、ありがとうございました。さっそく使っております。便利ですね。

また、いろいろと参考に拝見させて頂きます。不躾な質問となってしまい、申し訳ございません。
今後とも、よろしくお願いいたします。
Posted by Metal NEKO at 2005年05月14日 08:37
MetalNEKOさん、こんばんわ。
いえいえ、うまく行ってよかったですね。最近あまり役に立つネタがありませんが、過去ネタ参考にしていただけて幸いです。
Posted by hammer at 2005年05月15日 00:42
はじめまして。いつも参考にさせていただいています。
他の方の質問と重複してしまいますが、どうしてもうまくいかないので質問させてください。

リンクの色をRoyalBlueに、マウスオーバー時にはSilverに設定したいのですがうまくいきません。

a{color:#000;text-decoration:none;}
a:link{color:#4169E1;text-decoration:underline;}
a:visited{text-decoration:underline;}
a:active{}
a:hover{color:#C0C0C0;text-decoration:none;}

アンダーラインの設定変更はうまく出来たのに、色の変更だけがダメなんです。
お手数ですがお返事いただければ嬉しいです。
Posted by kurotsuma at 2005年05月17日 14:53
はじめまして、kurotsumaさん。

おそらくここはあっていると思います。リンクカラーの設定は他にも散らばっています。CSSを良く見てみてください。ここの記事にもありますが、a.asideとか言うのもリンクの設定ですから。
Posted by hammer at 2005年05月17日 22:07
hammerさま

早速お返事いただきましてありがとうございます!試しにa.asideを変更したら画面右脇「Recent Entries」の過去の書き込みへのリンクの色が変わりました。
でも本文中のリンクは変わらず(涙)

自分としては本文中に挿入したリンクの色だけを変えられれば良いのですが具体的にどこを変更すれば良いか教えていただけますか?
本当にお恥ずかしい位無知なもので・・・。

度々申し訳ございませんがよろしくお願いいたします。


【新たに変更してみた箇所】
a.aside{color:#000;text-decoration:none;}
a.aside:link{color:#4169E1;text-decoration:none;}
a.aside:visited{color:#000;text-decoration:none;}
a.aside:hover{color:#C0C0C0;text-decoration:underline;}
Posted by kurotsuma at 2005年05月18日 01:11
今日投稿した記事のリンクが希望の設定どおりに変わっていました!特に変更を加えた訳ではないのですけど。但し過去の記事のリンクは変わってないんですよねー。

理由は分かりませんが取りあえず大丈夫そうなのでこのまま様子を見ようと思います。
hammerさん、アドバイスありがとうございました。
また参考にさせていただきます。
Posted by kurotsuma at 2005年05月19日 14:46
kurotsumaさん良かったですね。
一度全部再構築してみはいかがでしょうか?
Posted by hammer at 2005年05月19日 22:06
初めまして。ブログ初心者ですが、色々と勉強させてもらって、少しずつカスタマイズしています。
前から色々と調べているんですが、ライブドアブログって、サイドバーのプラグイン別に、リンクの色を変えることは出来ないものなんでしょうか?
例えば、自分のブログの「カテゴリー」の、リンク色だけ変更して目立たせるような…。
hammerさんのこちらのブログで言えば、
「最新記事」のリンク色と、「最新コメント」のリンクの色をそれぞれ変える、というような具合で。
お手数お掛けして恐縮ですか、教えて頂けないでしょうか?
Posted by カゴメ at 2005年08月04日 15:24
はじめまして、カゴメさん。

残念ながらプラグインのリンク色を個別に変えるというのは無理なのではないでしょうかね。ライブドアブログではプラグイン部分のHTMLを編集する事が出来ないので。

もしかしたらSeesaaなら出来るかも。
Posted by hammer at 2005年08月05日 00:52
コメントお待ちしています。こちらではコメント認証もコメント保留も行っておりません。お気軽にコメントください^^