FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

リンクのスタイルを変える

リンクのスタイルや色を変える方法を紹介します。

スタイルシートの次の部分を編集します。スタイルシート上部にありスクロールしなくても見えるところにあるのですぐに見つけられると思います。

/************************************** ▼ リンクの色 ▼ */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #000000; }
a:active { color: #000000; }
/************************************** ▲ リンクの色 ▲ */

赤い部分の数値を変えてお好みの色にカスタマイズしてください。
また、リンクの下線を消したい場合は次の赤い文を加えます。

/************************************** ▼ リンクの色 ▼ */
a:link { color: #000000; text-decoration:none; }
a:visited { color: #000000; text-decoration:none; }
a:hover { color: #000000; text-decoration:none; }
a:active { color: #000000; text-decoration:none; }
/************************************** ▲ リンクの色 ▲ */

ちなみに4種類のリンクの意味は次のようになっています。

link　　未訪のリンク
visited　訪問済みのリンク
hover　　カーソルが上に乗っているリンク
active　アクティブ中のリンク

マウスカーソルを上に乗せたときだけ下線が出る、訪問済みは解かりやすく色を変える等、色々な使い方が出来ます。

お好みの色、スタイルにカスタマイズしてください。

< ここからは追記 (2006/08/09) >
「text-decoration:」の後ろには次のようなものがあります。

none 下線は付きません。

underline テキストに下線が付きます。

overline テキストに上線が付きます。

line-through テキストに打ち消し線が付きます。

blink テキストが点滅します。

例えばカーソルが乗ったときだけ下線を付けたい場合は次のようになります。

/************************************** ▼ リンクの色 ▼ */
a:link { color: #000000; text-decoration:none; }
a:visited { color: #000000; text-decoration:none; }
a:hover { color: #000000; text-decoration:underline; }
a:active { color: #000000; text-decoration:none; }
/************************************** ▲ リンクの色 ▲ */

関連記事

[ 2006/01/22 14:18 ] カスタマイズ共通カスタマイズ | TB(1) | CM(43)

≪ 画像間の隙間(マージン)を調節する | HOME | 文字の大きさを変える ≫

[ 46 ] はじめまして。

はじめまして、ときどきファンタ＋と申します。履歴から来ました。

こんな技術があって、すばらしいですね！

ときどき参考にさせていただきます。よろしく御願いいたします。

[ 2006/01/22 18:47 ] [ 編集 ]

[ 47 ] どんどん参考にしてください。

はじめましてときどきファンタ+さん。
どこまで力になれるか解かりませんが好きなだけ参考にしてくださいね。

[ 2006/01/22 18:57 ] [ 編集 ]

[ 52 ] ノンママ

早速のご回答ありがとうござます。
なんて言ったらいいのでしょう・・
リンクの文字が例えば赤だったとして、リンクの上にカーソルを置くと手の文字に変わって・・『赤色が青色に変わる』方法はないでしょうか？？

いたおさんの説明をしてもリンクのカラーが変わるだけでした。

前使っていたのがこの方と同じのなんですが・・
http://reokun915.blog28.fc2.com/
リンクのところにカーソルを持っていってもらえますか？

説明が下手でご迷惑お掛けします。。

[ 2006/01/23 10:36 ] [ 編集 ]

[ 57 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2006/01/24 23:01 ] [ 編集 ]

[ 60 ] こんばんは、ノンママさん。

具体的なURLを示してくれて有難うございます。
このような具体例を示してくれると質問者の要望が解かりやすくて助かります。

このテンプレートはリンクにマウスカーソルが乗ったときにリンクの背景に変化をつけていますね。

マウスカーソルが乗った時の設定は"hover"ですので

a:hover { color: #D2691E; background-color:#7FFFD4;}

赤い部分を加えるとマウスカーソルが乗ったときにリンク背景の色が変わります。数値は変えたい色に自由に変えてください。

[ 2006/01/25 00:44 ] [ 編集 ]

[ 161 ] はじめまして！

つい昨日からもともとやっていたブログをこちらに切り替えようと奮闘中です！すごくシンプルな使いやすそうなテンプレートで一目ぼれです！

ところで初めてのカスタマイズに挑戦中ですが、リンクの色などすべて本文の字の色に変更したら、カレンダーまでリンクがなくなり見れなくなりました。

カレンダーだけは常時書き込みのある日にちだけ色が変わるように設定することはできないのでしょうか？

スタイルシート等は初めてなので、無謀な質問をしていたらすみません。よろしくお願いします！

[ 2006/02/13 21:31 ] [ 編集 ]

[ 163 ] > sumsさん

こんばんは、sumsさん。

カレンダーだけリンクの色を変える方法を紹介します。次の記述をスタイルシートに加えてください。

.calender td a:link { color: #FF69B4;}
.calender td a:visited { color: #FF69B4;}
.calender td a:hover { color: #FF69B4;}
.calender td a:active { color: #FF69B4;}

数値はお好みの色に変えてください。
またこちらも参考になると思います。

http://10plate.blog44.fc2.com/blog-entry-20.html

カスタマイズ頑張ってくださいね。

[ 2006/02/14 00:40 ] [ 編集 ]

[ 164 ] ありがとうございます！

早速やってみました！
できました！！（感激）

これからもちょっとづつがんばってみようと思います
ありがとうございました！

[ 2006/02/14 02:12 ] [ 編集 ]

[ 169 ] > sumsさん

こんばんは、sumsさん。
カスタマイズは楽しいですよ。
これからもどんどん挑戦してください。

[ 2006/02/15 02:10 ] [ 編集 ]

[ 246 ] はじめまして。

初めまして。
いたおさんが作っていらっしゃるテンプレートを使用させていただいているのですが、トラックバックの部分だけ色を変更したいのですが、ご教授願えないでしょうか？
どうも自分だけでは出来そうもありません（＾＾；

[ 2006/03/15 22:14 ] [ 編集 ]

[ 247 ] > ｱﾆｰﾀｿさん

こんばんは、ｱﾆｰﾀｿさん。
週末には回答致します。
申し訳ありませんがもう少々お待ちください。

(3/19追記)
回答が遅くなって申し訳ありません。
トラックバックの部分だけ色を変える方法を掲載しました。
http://10plate.blog44.fc2.com/blog-entry-51.html
この説明で解からないことがあればまた聞いてくださいね。

[ 2006/03/17 00:21 ] [ 編集 ]

[ 675 ]

はじめまして。
何処で聞こうか迷いましたがとりあえずここにコメント残させてもらいます。
・本文（記事内）のみのリンクスタイル変更は新たな項目を作って弄らないと駄目でしょうか？
・検索時やカテゴリ表示の際、記事の上部にでる[ *** ]をデフォルト状態でも表示（最新記事）させたいのですがどう弄ればよいでしょうか？
自分で努力してみましたがうまく出来ないので助言をお願いしたいです。

[ 2006/10/21 13:27 ] [ 編集 ]

[ 679 ] > 氷雨さん

こんばんは、氷雨さん。
記事のリンクを変えるには、記事に挿入されるリンクタグaにスタイル指定します。

例えば<a style="color:#ff0000" href="#" target="_blank">ここ</a>を赤くする

style="color:#ff0000"を上記位置に加えると記事内のリンクだけ色を変えられます。

最新記事を記事上部に表示させたいのであれば、プラグインの「最新の記事」をプラグインカテゴリ３に設定してください。

カテゴリ３に設定したプラグインは全て記事上部に表示されますよ。

[ 2006/10/21 19:11 ] [ 編集 ]

[ 681 ]

説明ありがとうございました。
新しくテンプレートをDLしたらプラグイン3が上部に表示されました。
どうもありがとうございました。

[ 2006/10/21 22:16 ] [ 編集 ]

[ 686 ] > 氷雨さん

こんにちは、氷雨さん。
記事上部にフリーエリアがあれば良かったのにという意見をよく頂きます。「カテゴリ３にすればプラグインが記事上部に表示される」ことが伝わっていないことは私の責任です。そろそろ機能仕様や利用規約も書かないといけないと思っていたところです。

[ 2006/10/22 16:05 ] [ 編集 ]

[ 741 ]

こんばんは。いつもお世話になっています。
今、リンクの色をグリーンにしてるんですが、記事内だけをデフォルトで青など別の色に設定できますでしょうか。
記事を書くときに１つずつ色変更するのは可能なんですが、スタイルシートとかの設定を変更してデフォルトで青にしたいのです。
多分氷雨さんの質問と同じなのかな？と思いましたが、どうもお答えを見ても分からず・・・(汗
重複の質問でしたらすみません_(._.)_
よろしくお願いします。

[ 2006/11/05 03:58 ] [ 編集 ]

[ 747 ] > みゆみさん

こんばんは、みゆみさん。
ご質問の件について記事に掲載したのでこちらをご参照ください。

記事内のリンクの色、スタイルを設定する
http://10plate.blog44.fc2.com/blog-entry-96.html

カスタマイズ頑張ってくださいね。

[ 2006/11/06 23:50 ] [ 編集 ]

[ 754 ]

ありがとうございます_(._.)_
わざわざ新しく投稿してくださったんですね！感激です！！
近日中に早速変更したいと思います。
本当にありがとうございました！

[ 2006/11/08 03:44 ] [ 編集 ]

[ 759 ] > みゆみさん

こんばんは、みゆみさん。
このカスタマイズを求める人は意外と多いようです。私の気づかないアイデアを教えてくれて有難う御座いました。

[ 2006/11/10 01:36 ] [ 編集 ]

[ 774 ]

こんにちは！
いたお様お元気でしょうか？
rintanは風邪にやられております。
これからますます寒くなりますので、お気をつけてくださいね。

報告が遅くなりましたが、少し前にこの記事を知って、リンクの色を変えてみました。
お陰さまで非常に満足しております。
進化していくテンプレートっていいですね。
ありがとうございました。

[ 2006/11/12 16:50 ] [ 編集 ]

[ 780 ] > rintan999さん

こんばんは、rintan999さん
有難う御座います。最近ちょっと忙しく更新が滞り気味ですが私は元気です。
rintan999さんは風邪をひいてしまったのですか?お体に気をつけてくださいね。
自分が良いと思うものを他人が良いと共感してくれるのが嬉しいように、テンプレートが進化することに喜びを感じてくれると私もとても嬉しいです。有難う御座います＾＾

[ 2006/11/12 19:44 ] [ 編集 ]

[ 1304 ] 初めまして

初めまして。らむねと申します。

lightframeを最近ダウンロードさせていただいたのですが
どうしても　リンクにマウスをのせたときの打ち消し線が消せません
ここに書いてある事はやってみたのですが　何故なんでしょうか？
色は変わるんですけど・・・

教えていただけるとうれしいです
よろしくお願いします。

[ 2007/02/27 17:10 ] [ 編集 ]

[ 1307 ] > らむねさん、かどりんさん

有り難うございます、かどりんさん。
親切な方が多くて私は本当に嬉しいです。とても助かります＾＾

らむねさん、かどりんさんが示してくれた部分を none; と書き換えてください。これで打ち消し線が出なくなると思います。

[ 2007/02/28 00:06 ] [ 編集 ]

[ 1308 ] ＞かどりんさん、いたおさん

ありがとうございました！
とってもわかりやすくて　すぐに変更できましたぁ

どうもありがとうございました。

[ 2007/02/28 00:27 ] [ 編集 ]

[ 1310 ] > らむねさん

こんばんは、らむねさん。
変更できましたね＾＾
また何でも聞いてくださいね。

[ 2007/03/01 02:04 ] [ 編集 ]

[ 2924 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/10/31 16:20 ] [ 編集 ]

[ 3163 ] タイトルリンクの変更方法

こんにちは、はじめまして。

素晴らしいテンプレートを提供頂き誠に

ありがとうございます。

おかげさまで色々楽しくカスタマイズさせて頂いています。

ところで、質問があります。

記事リンクの変更方法はわかったのですが、

ブログのタイトル文字にカーソルを載せたら色が

変わったり、下線が付いたりする方法をサイト内で

検索してみたのですがどうしても見つかりません。

どなたかご教授願えませんでしょうか？

よろしくお願い致します。

[ 2008/03/09 10:14 ] [ 編集 ]

[ 3165 ] 記事タイトルに日付を入れる

はじめまして。
とても使いやすいテンプレートありがとうございます。

質問なのですが、記事を書いたときに、「記事タイトル」の
末尾などに自動的に日付が挿入されるようには、
設定できないでしょうか。

[ 2008/03/10 04:29 ] [ 編集 ]

[ 3166 ] タイトルリンクの変更方法

自己解決しました、どうもすいません。

[ 2008/03/10 10:47 ] [ 編集 ]

[ 4128 ] リンクに管理画面が

いたおさん。ここのところ、画像の組み合わせ問題では、大変お世話になりました。

ところで、昨日、ふと、右のサイドバーの「リンク」に、私個人の別ブログのリンクを張ったところ、そのすぐ下（同じリンク枠内）に「管理画面」項目がでており、そこをクリックすると、管理画面に入れるようになったのに気付きました。

もしかしたら、これは、私以外の方でも、ここをクリックすると「管理画面」に入れるのでしょうか？いえ、私がログインしているので、そうなるのでしょうか？

もし、前者でしたら、セキュリティ上、問題がある気がしまして、ご連絡しました。この場合、どのような対策をすればいいのでしょうか？

私の使用しているテンプレートは、「templ8_3kuro」です。

[ 2009/05/09 13:08 ] [ 編集 ]

[ 4130 ] ▼Ajinciさん

Ajinciさん以外の方は管理画面に入ることは出来ないので大丈夫です。
http://ja.wikipedia.org/wiki/HTTP_cookie

ただしネットカフェ等で利用した際、ログアウトし忘れてお店を出てしまった場合に店側がクッキーの削除等のメンテナンスをしてくれなかったら次の利用者が管理画面に入ることが出来てしまいます。

大体のネカフェはやってくれると思いますが、前利用者の履歴や設定等、そのまま放置のお店も少なからずあるので、自宅以外はちゃんとログアウトしたほうが良いです。

[ 2009/05/09 13:21 ] [ 編集 ]

[ 4132 ] > ちゃんさん、Ajinciさん

ちゃんさん、ありがとうございます＾＾

Ajinciさん、ちゃんさんが教えてくれた通り、自分しか使わないパソコンからログインしているなら大丈夫です。

[ 2009/05/09 13:29 ] [ 編集 ]

[ 4133 ] 有難うございます。

ちゃんさん、いたおさん。お返事有難うございます。
安心しました。ネットカフェで使用するときは気をつけます。

ところで、そもそも、この「管理画面」の表示そのもの、さらにリンク枠の中にある「このブログをリンクに追加する」を表示させないこともできるのでしょうか？もし、可能でしたら、その方法を教えていただけないでしょうか。

何度もスミマセン。

[ 2009/05/09 13:52 ] [ 編集 ]

[ 4135 ] > Ajinciさん

こちらの記事を参考にしてください。

「管理者ページ」を移動する
http://10plate.blog44.fc2.com/blog-entry-79.html

「このブログをリンクに追加する」を付ける
http://10plate.blog44.fc2.com/blog-entry-93.html

[ 2009/05/09 14:06 ] [ 編集 ]

[ 4142 ] > Ajinciさん

申しわけありません。FC2が管理画面の仕様、文言等を変えていたので記事の内容が古くなっていました。

上記２つの記事を新しく更新したので再度確認してください。

[ 2009/05/09 20:17 ] [ 編集 ]

[ 4143 ] 有難うございます！

いたおさん。今、いたおさんに、上記お返事をいただく直前、ご指定いただいていた両ページを覗き直し、更新していただいた記事（？）を見ながら操作したところ、問題が解決したため、（上記、お返事いただいたいたのに気付かず）、無駄なコメントはご迷惑と思い、前・自分のコメントを削除してしまいました。その結果、上記、いたおさんのコメントが２つ続く妙な表示になってしまったようです。申し訳ありません。

問題解決しました。有難うございます、いつも、いつも!!

[ 2009/05/09 20:38 ] [ 編集 ]

[ 6215 ]

リンクやカテゴリの前にある黒丸をのけるにはどうすればよいですか？

[ 2009/09/26 00:05 ] [ 編集 ]

[ 6216 ]

ここでいいのか分かりませんがひとつ質問を・・・
リンクやカテゴリ、最新記事の前につく黒丸を取りたいのですが、
どうすればいいのでしょうか？

[ 2009/09/26 00:09 ] [ 編集 ]

[ 6219 ] > 6215(6216)さん

こちらの記事を参考にしてください。

リストの「・」を消す
http://10plate.blog44.fc2.com/blog-entry-137.html

コメント管理を容易にするため名前を記入してくれると助かります。

[ 2009/09/26 00:28 ] [ 編集 ]

[ 6238 ] 質問させていただきます。

リンクのスタイルや色を変える方法に挑戦中なのですが、
プレビューでみると、うまく色が変っているのですが、
更新を押して、再度みてみると　もとの色に戻ってしまうのです。

なにかやり方がちがうのでしょうか？
お時間あるときに、コメントだしていただけると助かります。

突然コメント失礼しました。