• 締切済み

livedoor 相互RSS のリストのリンクの色

livedoor 相互RSS (livedoor blogroll) のリストのリンクの色を変更したいのですが、どこを編集すればよいのかわからず困っています。 ライブドアの相互リンクから発行されるタグにある、CSSを編集すれば良いというのは何となく分かるのですが、CSSのどこを編集すればよいのかわからず、いろいろと調べてみましたが、有益なサイトにたどり着くことができませんでした。 /* ----------------------------------------------- */ /* BlogRoll css 2 */ /* ----------------------------------------------- */ .blogroll-channel, .blogroll-channel * { width: auto; height: auto; margin: 0; padding: 0; border: none; text-align: left; } .blogroll-channel { margin-bottom: 15px; padding: 10px; } .blogroll-channel .blogroll-list-wrap { margin-bottom: 10px; } .blogroll-channel .blogroll-list { list-style-type: none; margin-bottom: 3px; font-size: 12px; line-height: 1.3; } .blogroll-channel .blogroll-list img { vertical-align: middle; } .blogroll-channel img.blogroll-icon, .blogroll-channel img.blogroll-favicon { margin: 0 5px 0 0; } .blogroll-channel img.blogroll-favicon { width: 16px; height: 16px; } .blogroll-channel a.blogroll-link { } .blogroll-channel .blogroll-new-entry { margin-left: 5px; color: red; } .blogroll-channel .blogroll-clip, .blogroll-channel .blogroll-hatebu { margin: 0 0 0 5px; } .blogroll-channel .blogroll-link-time { margin: 0 0 0 3px; color: #666; font-size: 10px; } .blogroll-channel .blogroll-ad-img { } .blogroll-channel .blogroll-ad-text { display: block; margin-top: 5px; color: #666; font-size: 12px; } 上記が、ブログに貼り付けるタグに記載されていたCSSです。 これのどこを変更すればよいでしょうか? a:link { color: #000000; } a:visited { color: #000000; } a:hover { color: #80192E; } a:active { color: #80192E; } をCSSの最後に記載してみて、ブログロールのリンクの色は変わったのですが、サイト全体の色も変わってしまいました。 ブログロールのリストの色のみ変える方法がわかる方がおられましいたら、回答宜しくお願いいたします。

  • CSS
  • 回答数2
  • ありがとう数1

みんなの回答

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

livedoor 相互RSS (livedoor blogroll) のリストのリンクの色を変更したいとの事だったので、ブログロールリストを変える方法をお伝えしたのですが違ったのですね。知らんがな。ご提示のソースでは、提示されなくてもわかるスーパーエスパーでもない限り無理です。自分でやってください。 なお、セレクタはcssの基礎中の基礎ですので、有益なサイトは沢山あります。ただ、基礎をやろうともしないで答えだけ捜す人には、見つからないだけです。 他の所にいれても……、そんな実験やってるより、本当は基礎を勉強した方がよっぽど早いんですね。cssの場合詳細度によっては場所も重要ですが、今回の場合は無駄です。 【1】 1.Firefoxで変えたい部分を選択 2.右クリック>選択した部分のソースを表示 または 1.IE10なら、F12で開発者ツール 2.HTMLの一番左矢印で変えたい部分が四角になる場所を探し、クリック 文章構造が現れます。 こっちの方がわかっている人にはわかりやすいですが、windowsweb さんには無理かも。 ここでhtmlの勉強---------- タグは<タグ>で始まり</タグ>までで挟まれている。 これは互い違いになることなく、完全に入れ子。 --------------------------------- それでは【1】を見て、変えたい部分に影響しているタグの中にclassまたはidを見つけます。 【例】 <div id="abc"> <ul class="def"> <li>表示中のもの1</li> <li>表示中のもの1</li> <li>表示中のもの1</li> </ul> <ul> <li>表示中のものa</li> <li>表示中のものa</li> <li>表示中のものa</li> </ul> <ul class="defg"> <li>表示中のもの2</li> <li>表示中のもの2</li> <li>表示中のもの2</li> </ul> </div> この場合、 id「abc」だと表示中のものすべて class「def」は表示中のもの1 class「defg」は表示中のもの2 classだと「.」、idだと「#」を頭につけ、その後半角スペースに続き、先のaなんちゃらをスタイルシートに記述します。 例えば全部だったら、 #abc a:link { color: #000000; } #abc a:visited { color: #000000; } #abc a:hover { color: #80192E; } #abc a:active { color: #80192E; } 表示中のもの2だけなら .defg a:link { color: #000000; } .defg a:visited { color: #000000; } .defg a:hover { color: #80192E; } .defg a:active { color: #80192E; }

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.1

それっぽいのは「.blogroll-list」かなと思いますので .blogroll-list a:link { color: #000000; } .blogroll-list a:visited { color: #000000; } .blogroll-list a:hover { color: #80192E; } .blogroll-list a:active { color: #80192E; } を追加して下さい。

windowsweb
質問者

お礼

返信遅くなってしまい申し訳ございません。 早速試してみましたが、今度はブログロールのリストの色がサイトのリンクの色に戻ってしまいました。 他の所に挿入すれば色が変わるかもしれないので後でまた確認してみようと思います。 回答ありがとうございました。

関連するQ&A

  • スタイルシートのリンクの色

    HPを作成していて、スタイルシートを利用してリンクの設定をしました。 a:link{color:#0066ff} と書いて色が変更できるだろうと思いきや、何度やっても紫色(オフィシャルの色?)にしかならないのですが、何がわるいのでしょうか? 原因がわかりません。 ちなみに、<a href="">~</a>とつながってない設定には反応するみたいでちゃんと色が変更されます。 対応するファイルがあると反応して紫色になるみたいです。 なんか変な設定とかしてるんでしょうか? 一応スタイルシートを全部載せておきます。 よろしくお願いいします。 <style type="text/css"> <!-- body { background-image : url(img/9ron/c-koutarou.jpg); background-position: 100% 100%; background-repeat:no-repeat; background-attachment:fixed; color:#336666; margin:0px; } A:link {color:#0066ff; text-decoration:none } table.head { width:100%; height:100%;} td.head1 { font-size:40px; font-family:'Comic Sans MS'; margin-bottom:10px; background-image : url(icon/bg/bg3.gif) ;} td.head2 { font-size:20px; font-family:'Arial Black'; background-image : url(icon/bg/bg3.gif) ;} h1 {font-size:14px; text-align:left; border-style:dashed; color:#336666; width:400px; margin:10px ;} --> </style>

  • リストの画像をくっつけたい!

    教えてください。 <ul> <li><img src="../img/link_a.gif" /></li> <li><img src="../img/link_b.gif" /></li> <li><img src="../img/link_c.gif" /></li> </ul> と画像をリストにした場合、画像と画像の間にblankができてしまうのですが、これは仕方がないのでしょうか? CSSでマージンを0pxにしても画像と画像がくっつきません。 #contentMenu li { width: 160px; height: 25px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } 教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • XML
  • リストに指定したマークの位置がずれてしまいます

    特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。 safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。 リストマークのサイズは20×20です。 マークをlist-style-type: square;などにすると普通に表示されます。 非常に困っています。宜しくお願いします。 <style type="text/css"> <!-- body { background-color: #333333; background-image: url(images/left_background.jpg); background-repeat: repeat-y; width: 150px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { color: #FF6600; text-decoration: none; } a:hover { color: #FFCC00; text-decoration: underline; } a:active { color: #990000; text-decoration: none; } --> </style> <style type="text/css"> <!-- ul { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 40px; font-size: large; font-weight: bold; list-style-image: url(images/arrow.gif); list-style-position: outside; } #base { margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; padding-top: 20px; padding-left: 20px; } --> </style> <link rel="shortcut icon"href="/images/favicon.ico" /> <style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; } .style24 {font-size: x-large} --> </style> </head> <body> <div id="base"> <ul> <li> <a href="main.html" target="mainFrame">Home</a></li> <li> <a href="image.html" target="mainFrame">Image</a></li> <li> <a href="flash.html" target="mainFrame" >Flash</a></li> <li> <a href="logic.html" target="mainFrame" >Music</a></li> <li> <a href="link.html" target="mainFrame"> Link</a></li> </ul> </div> </body>

    • ベストアンサー
    • HTML
  • この度HPを作成していて疑問に思ったのですが、imgを回り込ませたとき

    この度HPを作成していて疑問に思ったのですが、imgを回り込ませたときなどに、添付画像の様にならなくする方法はありますか? なるべくCSSでそれを行いたいのですが、高さを指定してなどは、やりたくありません よろしくお願いします。 HTML <h2>キングギドラ公開開始 </h2> <p class="up"> <img src="file:///C:/Users/chako/Desktop/G-Works/img/lrg53616_0_357935.png" width="150" height="112" border="0"> キンブギドラ公開しました詳細はギャラリーより </p> CSS .up{ bottom : auto; line-height : 15px; border-bottom-width : 2px; border-bottom-style : dotted; border-bottom-color : #990000; } h2{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; height : 20px; border-bottom-width : 2px; border-bottom-style : dotted; border-bottom-color : #990000; bottom : auto; padding-top : 5px; font-size : 20px; } #right img{ float : left; margin-top : 0px; margin-left : 5px; margin-right : 10px; margin-bottom : 10px; }

  • ブログの本文のみリンク色を変えたい

    FC2ブログを使用しています。 ブログの記事タイトルを除いた、ブログ記事のエントリー内のみURLやリンク文字の色を設定したいです。 今まではブログ本文のリンク色を変更する際<a href="~"><font color="~"></font></a>のように、毎回文字色を指定するやり方をしていました。 ですがこれだと酷く手間がかかるので、様々なブログを参考し、htmlやcssを弄ってみたのですがびくともしません。 私が使用しているテンプレートにはリンク色の個別の指定は無く、全体の文字色がそのまま適用される形となっています。 例えば、 .all_entries_main{ color:#f0f0f0; text-align:left; font-size:12px; margin:0 0 0 0; padding:0 15px 15px 15px; } のように、本文のカラーは指定できるものの、リンクの色までは指定できません。 ここにリンク文字を変更する記述をしてみたのですが、全く適応されず、また何が間違っているのかも分かりません。 あるブログではCSS以外に、hrmlにも同様の記述を行なう必要があるとありましたが詳細は載っておらず、適切な方法が知りたいです。 是非ご回答宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • blog CSSのタイトル色の変更指定について!!

    このblog CSSのブログタイトルの色変更はどうすればいいですか? .blogtitle の所で色指定してもダメでした?他に方法があるのですか? livedoor Blog CSS FileName: ネコさん(20040819) Version: 2006.06.26 ----------------------------------------------------- */ #header{} #header td{ color:#FFF; font-size:12px; text-align:right; padding-right:10px; } #header a:link{color:#FFF;} #header a:visited{color:#FFF;} #header a:active{color:#FFF;} #header a:hover{color:#FFF;text-decoration:none;} body{ margin:0; padding:0; text-align:center; font-family: verdana ,arial ,sans-serif; background-color: #4d9d1c; /*background:#4d9d1c url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/bg.gif') repeat-y 50% 0;*/ } a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{color:#666;text-decoration:none;} #container{ width:833px; margin:0 auto; text-align:left; word-break:break-all; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/header.gif') no-repeat; } #banner,#subbanner{ width:833px; height:185px; margin:0 auto 35px;; } #banner a{color:#fff;text-decoration:none;} #banner a:link{color:#fff;text-decoration:none;} #banner a:visited{text-decoration:none;} #banner a:active{} #banner a:hover{color:#fff;text-decoration:underline;} #subbanner a{color:#fff;text-decoration:underline;} #subbanner a:link{color:#fff;text-decoration:underline;} #subbanner a:visited{text-decoration:underline;} #subbanner a:active{} #subbanner a:hover{color:#fff;text-decoration:none;} h1,h2,h3{margin:0;padding:0;} .blogtitle{ font-size:20px; font-weight:bold; padding-top:85px; padding-right:70px; text-align:right; } .description{ color:#000; font-weight:bold; font-size:12px; padding-right:70px; text-align:right; } #categorytitlebody{} #categorytitle{ font-size:14px; font-weight:bold; text-align:center; padding:20px 10px 15px 10px; } #blogcontainer{width:755px;margin:0 auto auto 20px;background-color:#FFF;} #content{ width:564px; float:left; padding-left:10px; text-align:left; padding-bottom:50px; } #links{ width:170px; float:right; padding-bottom:50px; } .blog{} .date{ color:#4d9d1c; font-size:14px; font-weight:bold; text-align:left; margin-bottom:5px; } .title{ font-size:14px; font-weight:bold; text-align:left; background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; padding-left:26px; } .blogbody{ line-height:130%; text-align:left; background-color:#f3f1e2; padding:10px 0px 0px 10px; } .main,.mainmore,.portal-links{ line-height:150%; font-size:12px; padding:18px 10px 30px 26px; } blockquote{ padding:5px; margin:5px; border:2px dotted #4d9d1c; } .pict{margin:5px;} .posted{ color:#000; font-size:11px; text-align:left; margin:0; padding:10px 15px 10px 26px; } a.posted{color:#000;text-decoration:underline;} a.posted:link{color:#000;text-decoration:underline;} a.posted:visited{text-decoration:underline;} a.posted:active{} a.posted:hover{color:#000;text-decoration:none;} .menu{ font-size:11px; text-align:right; padding:2px 15px 20px 26px; } .blogbodybottom{ margin-bottom:20px; } .comblogbodybottom{ margin-bottom:20px; } #contentcommentbottom{} .formbodybottom{} #articletop{} #articlebody{} #articlebottom{} .trackbackurlbody{ text-align:left; padding-left:10px; } .trackbackurlttl{ background:url('https://parts.blog.livedoor.jp/old_img_com/img/usr/20040819/nikukyu.gif') no-repeat 0 50%; font-size:12px; font-weight:bold; padding-left:26px; } .trackbackurl{ padding-top:10px; padding-bottom:20px; text-align:left; } .trackbackurl table{width:350px;margin:0 auto;} input.trackbackbox{width:300px;} .trackbackurlbottom{} a.posttitle:link{color:#000;text-decoration:underline;font-si

    • 締切済み
    • CSS
  • 外部CSSファイルからのリンク色指定

    外部CSSファイルでヘッダー・フッター・左・右と4種類の枠をそれぞれ違ったリンク色に設定したいのですが、下記の記述で個々にリンク色を設定することはできますか? できるのであればどのように記載すればいいですか? body{ text-align:center; background-image: url("image/back.gif"); margin: 0 auto; } #container{ width:800px; margin:0px; text-align:left; } .header{ height: 120px; background-image: url("access/top.gif"); background-repeat: no-repeat; background-position: bottom; margin: 0px; } .main{ width:600px; height:100%; float:right; background-color: #FFFF99; padding: 10px; margin: 0px; } .side{ width:200px; float:left; background-color: #0000FF; padding: 10px; margin: 0px; text-decoration:none; color:#FFFFFF; } .footer{ font-size: 10px; } .clear{ clear:both; line-height:0; height:0; }

    • ベストアンサー
    • CSS
  • 【CSS】bodyとbottomの画像がかぶる

    自社ブログの記事部分のテーブルデザインを変更しようと思ったのですが bodyの画像がbottomの画像にはみ出て http://image.blog.livedoor.jp/ura_sselect/imgs/5/7/575b75cb.png ↑のように表示されて困っています。 CSSを勉強し始めたばかりでいらないところまでいじってしまっていると 思いますが現在のCSSの状態は以下の通りです。 関係ないかもしれませんが、ボトムの画像高さは65pxです。 よろしくお願いします。 .datetop{ background:url(トップ画像) no-repeat; height:54px; margin-bottom:-12px; } .fullbody{ background:url(ボディ画像) repeat-y; margin-bottom:0px; } .datebody{} h2.date{ margin:0px 23px 0; font-size:12px; font-weight:normal; color:#d8b8c4; } .blogbodytop{} .blogbody{ margin:5px 23px 30px; text-align:left; } .titlebody{ paddding:5px 0; } h3.title{ line-height:137%; font-size:16px; font-weight:bold; color:#f52a7a; } .main ,.mainmore{ margin:10px 0 20px; line-height:147%; font-size:13px; height:1%; } blockquote ,pre{ border-top:1px dotted #575757; border-bottom:1px dotted #575757; padding:17px 10px; margin:17px 0; text-align:left; color:#ccc; } .pict{ margin:0 5px 5px 0; } /* related articles */ div.related-articles{ margin: 25px 10px 0; } div.related-articles h3{ margin: 0 0 10px; padding: 0; font-size: 14px; color: #f52a7a; } div.related-articles ul{ list-style: none; margin: 0; padding: 0; line-height: 1.2; } div.related-articles ul li{ background: url(http://parts.blog.livedoor.jp/img/cmn/dotw.gif) no-repeat 0 50%; padding: 0 0 5px 9px; margin-left: 5px; font-size: 12px; } .portal-links{ font-size:12px; text-align:right; margin:5px 8px 12px; color:#d8b8c4; } .portal-links a{} .posted{ margin:5px 8px; text-align:right; line-height:150%; font-size:12px; color:#d8b8c4; } .clipbutton{ border:none; } a.continues ,.posted a ,.menu a ,.nextpage ,.commentttl a ,.trackbackttl a{} #ad{ margin:25px 0 0; text-align:center; zoom: 1; } .blogbodybottom{ background:url(ボトム画像) no-repeat; padding:65px 0 -20px; } .dateend{} .nextpage{ text-align:right; margin:5px 20px; font-size:12px; }

    • ベストアンサー
    • CSS
  • メニューのリンクをクリックして、タイトルの色を変える方法。

    メニューのリンクをクリックして、タイトルの色を変える方法。 上記の操作をするための記述内容がわかりません。 以下に、HTMLを載せます。 <style type="text/css"> h2{ color : #98FB98; font-size : 69px; letter-spacing: 0.8em; font-family: impact; margin:0px 0px 0px 10px; } TABLE { color : #57450f; font-size : 12px; } #bg{ background-color : #dedec2; border-right-style : solid; border-bottom-style : solid; border-right-color : #57450f; border-bottom-color : #57450f; border-right-width : 1px; border-bottom-width : 1px; width:460px; } #td1{ background-image : url(image/back01.gif);height : 60px; vertical-align:top; padding:2px; color : #dedec2; } #td2{ background-color : #665c50; height : 20px; text-align : right; } #left{ width:190px; text-align:center; vertical-align:top; border-right-width : 1px; border-right-style : dotted; border-right-color : #665c50; } .li1{ margin:5px auto; text-align : left; letter-spacing: 0.1em; line-height : 20px; } </style> <TABLE id="bg" cellpadding="0" cellspacing="0"><TBODY><TR> <TD id="td1" colspan="2"> <H2><font color="#DA70D6">a</font>b<font color="#DA70D6">c</font>d <font color="#DA70D6">e</font>f<font color="#DA70D6">g</font></H2> </TD></TR><TR> <TD id="left"> <h3>MENU</h3> <UL class="li1"> <li><A href="main.html" target="main">1</A></li> <li><A href="main.html" target="main">2</A></li> <li><A href="main.html" target="main">3</A></li> <li><A href="main.html" target="main">4</A></li> </UL> </TD> <TD id="right"> (関係ないので中略) </TD></TR><TR><TD id="td2" colspan="2"></TD></TR></TBODY></TABLE> (動作環境はVista、IE8) 左右に2分割のレイアウトで、左側に上記のHTMLを反映させてます。 私がやりたいことはリストのタグのリンクをクリックして、タイトル(<h2>タグの箇所)の色を変更することです。 リンクごとに其々色を変えたく、タイトルに2色用いているように、変更後も同じ配列で2色できれば使いたい。 CSSはそこそこ知識はありますが、JavaScriptに関しては全くの素人です。 上記のように設定するにはどうしたらいいでしょうか?

  • リンク画像のマウスオーバー時の下線を消したい。(a:hover 関連。

    テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。

    • ベストアンサー
    • HTML