はてなダイアリーの記事に、はまぞう利用で書籍のリンクを

ISBN:XXXXXXXXXX:detailやISBN:XXXXXXXXXX:imageで表示すると
本の画像輪郭や本の題名のところが青色になっているのですが、
これを好みの色に太さに変える方法を教えて下さい。

現状では、
本の画像輪郭の青色はとても太めのラインで、
本の題名の青色文字に青色下線がついています。

希望としては、
本の画像輪郭は細めの薄い灰色に、
本の題名文字は濃い目の灰色に、
下線は薄い水色に、  
それぞれ変更したいと思っています。

宜しくお願い申し上げます。

回答の条件
  • 1人5回まで
  • 登録:2006/07/26 02:10:16
  • 終了:2006/07/27 14:58:27

ベストアンサー

id:TomCat No.1

TomCat回答回数5402ベストアンサー獲得回数2152006/07/26 03:35:20

ポイント200pt
.hatena-asin-detail-image,
.asin {
	border: 1px #ccc solid;
}

.hatena-asin-detail-title a {
	color: #999;
	text-decoration: none;
	border-bottom: 1px #0cf solid;
}

ってな感じでOKだと思います。

 

以下、説明です。

.hatena-asin-detail-image が

ISBN:XXXXXXXXXX:detail で表示させた時の、

.asin が ISBN:XXXXXXXXXX:image で表示させた時の、

それぞれの画像を示しますから、

.hatena-asin-detail-image,
.asin {
	border: 1px #ccc solid;
      /* ↑   ↑ ↑  ↑
    枠線 1pixel 灰色 ソリッドな線種 */
}

 

また書名については、

.hatena-asin-detail-title がそれを示しますから、

.hatena-asin-detail-title a {
                        /*↑a タグに適用 */
	color: #999;
	    /* ↑ちょっと濃いめの灰色*/
	text-decoration: none;
	    /* ↑aタグの本来の下線をなしにして */
	border-bottom: 1px #0cf solid;
	    /* ↑代わりにborderで下線を付ける */
}

ということで、文字色と下線の色を分けていきます。

好みの文字色、線色などで設定してください。

id:SumireS

大変ご丁寧でわかりやすいご指導ありがとうございました。

早速トライしてみたところ、見事に成功致しました。(感涙中)

回答ありがとうございました。

誠に恐縮なのですが、この系統の色味変更について

お手すきの折にご指導頂けますと大変うれしいです。

・はてなダイアリーの日記記事下にある『コメントを書く』

・はてなダイアリーの右縦帯びにあるカレンダー『<< 2006/07 >>』や『日記が書いてある日付』

・同じく右側縦帯びにある最新タイトルに表示される『日記件名語句』

の部分が現在では青い色で表示されていますが、これらを他の色に変更したいと思います。

クリックする前とクリックした後で別々の色に指定したいのですが・・・どのように何を記入すれば良いのでしょうか?

宜しくお願い申し上げます。

2006/07/26 05:31:51

その他の回答(1件)

id:TomCat No.1

TomCat回答回数5402ベストアンサー獲得回数2152006/07/26 03:35:20ここでベストアンサー

ポイント200pt
.hatena-asin-detail-image,
.asin {
	border: 1px #ccc solid;
}

.hatena-asin-detail-title a {
	color: #999;
	text-decoration: none;
	border-bottom: 1px #0cf solid;
}

ってな感じでOKだと思います。

 

以下、説明です。

.hatena-asin-detail-image が

ISBN:XXXXXXXXXX:detail で表示させた時の、

.asin が ISBN:XXXXXXXXXX:image で表示させた時の、

それぞれの画像を示しますから、

.hatena-asin-detail-image,
.asin {
	border: 1px #ccc solid;
      /* ↑   ↑ ↑  ↑
    枠線 1pixel 灰色 ソリッドな線種 */
}

 

また書名については、

.hatena-asin-detail-title がそれを示しますから、

.hatena-asin-detail-title a {
                        /*↑a タグに適用 */
	color: #999;
	    /* ↑ちょっと濃いめの灰色*/
	text-decoration: none;
	    /* ↑aタグの本来の下線をなしにして */
	border-bottom: 1px #0cf solid;
	    /* ↑代わりにborderで下線を付ける */
}

ということで、文字色と下線の色を分けていきます。

好みの文字色、線色などで設定してください。

id:SumireS

大変ご丁寧でわかりやすいご指導ありがとうございました。

早速トライしてみたところ、見事に成功致しました。(感涙中)

回答ありがとうございました。

誠に恐縮なのですが、この系統の色味変更について

お手すきの折にご指導頂けますと大変うれしいです。

・はてなダイアリーの日記記事下にある『コメントを書く』

・はてなダイアリーの右縦帯びにあるカレンダー『<< 2006/07 >>』や『日記が書いてある日付』

・同じく右側縦帯びにある最新タイトルに表示される『日記件名語句』

の部分が現在では青い色で表示されていますが、これらを他の色に変更したいと思います。

クリックする前とクリックした後で別々の色に指定したいのですが・・・どのように何を記入すれば良いのでしょうか?

宜しくお願い申し上げます。

2006/07/26 05:31:51
id:TomCat No.2

TomCat回答回数5402ベストアンサー獲得回数2152006/07/26 07:15:25

ポイント200pt

うまくいきましたか。よかったです(^-^)

 

さて、この手の色の替え方のやり方ですが、

まずページのソースを表示させるんです。

ブラウザによって表示のさせ方は若干違いますが、

たいてい、[右クリック]→[ソースの表示]

などで表示させられます。

 

で、ソースを見ながら変更しようとする場所を探します。

たとえば「コメントを書く」の部分は

<div class="comment">
	<div class="caption">[<a name="c" href="/UserID/comment?date=xxxxxxxx#c">コメントを書く</a>]</div>
</div>

などとなっていますから、

  • class="comment"
  • class="caption"

のいずれかをいじってやればOKだということが分かります。

どっちにするかと考えて、

captionというのは他でも使われそうな感じですから、

ここではcommentでやってみよう、ということにしてみます。

そこで、CSSの実際は、こんな感じになります。

.comment a {
	color: #09f;
}

comment の前には class を示すピリオドを付けます。

そしてそのクラスの中の a タグに適用させるという意味で

スペースを介して a と書きます。

これでリンクの色が、この例では明るい青になります。

 

既訪リンク色を指定したい場合は、さらに、

.comment a:visited {
	color: #090;
}

などと付け加えます。

するとリンクはクリックした後は、

この例では少し暗めのグリーンになります。

 

さらにアクティブなリンクやマウスの乗っているリンクについても、

.comment a:active,
.comment a:hover {
	color: #f60;
}

などと付け加えることで、この例では橙色に変化します。

詳しいことは↓などを参考にしてください。

http://www.tagindex.com/stylesheet/link/link_color.html

 

色の指定は

color: #rgb;

color: #rrggbb;

color: 色名;

などの形式などで書いていきます。

実際の色の指定方法は↓を参考にしてください。

http://www.htmq.com/color/index.shtml

ちなみにCSSでは、たとえば #ff6633 と #f63 は

全く同じ意味になります。

 

さて、同様に、「<< 2006/07 >>」などの部分は、ソースを見ると、

<td class="calendar-prev-month" colspan="2"><a href="/UserID/xxxxxx" title="xxxxxx" rel="nofollow">&lt;&lt;</a></td>
<td class="calendar-current-month" colspan="3"><a href="/UserID/xxxxxx" rel="nofollow">2006/07</a></td>
<td class="calendar-next-month" colspan="2"><a href="/UserID/xxxxxx" title="xxxxxx" rel="nofollow">&gt;&gt;</a></td>

などとなっていますから、これはたとえば、

.calendar-current-month a {
	color: #f00;
}
.calendar-prev-month a,
.calendar-next-month a {
	color: #600;
}

などと指定することで、真ん中の月の部分が赤、

両端の << >> の部分が茶色になります。

 

カレンダーの日付は、class が calendar-day ですから、

/* 日記を書いていない日の色 */
.calendar-day {
	color: #999;
}
/* 日記を書いた日の色 */
.calendar-day a {
	color: #06f;
}

などとすればOKです。

 

既訪リンクやアクティブリンク、マウスの乗ったリンクなどは、

前述の要領に従って、

a を a:visited、a:active、a:hover などに変えて

適宜追加していってください。

 

ちなみに、

.calendar-prev-month a,
.calendar-next-month a {
	color: #600;
}

というのは、

.calendar-prev-month a {
	color: #600;
}
.calendar-next-month a {
	color: #600;
}

と同じ意味です。

全く同じ指定を複数項目に渡って行うならば、

いちいち項目ごとに分けて書かなくても、

カンマで区切って、まとめて書いてしまって構いません。

 

さて、「日記件名語句」というのは、日記のタイトルの一覧の所ですね。

これも同様に、たとえば、

.hatena-section a {
	color: #06f;
}
.hatena-section a:visited {
	color: #090;
}
.hatena-section a:active,
.hatena-section a:hover {
	color: #f60;
}

などとすることで、それぞれの状態ごとに

色を指定していくことが出来ます。

 

何かとややこしいですが、とにかく基本は、

まずブラウザでページのソースを表示させて、

変更しようとする個所を探して、

変更個所の「class="何々"」といった所を見つけて、

それをCSSで指定していくと。

そんなやり方になってきます。

 

最初のうちは分かりにくいですが、

どのclassがどこの表示部分を司っているのかが分かってくると、

自由に好きな色で表現していくことが出来るようになります。

 

そのほか、文字の大きさや太さなど、

およそ見栄えに関することはCSSで制御できますので、

このへん↓を見ながら色々試してみてくださいね。

http://www.tagindex.com/stylesheet/index.html

id:SumireS

懇切丁寧なわかりやすいご指導を頂きまして、誠にありがとうございました。

現時点で変更希望箇所はバッチリ完璧成功致しました!!!

♪:*.;".*・;・^;・:\(*^O^*)/:・;^・;・*.";.*: ♪ 感動うれし涙の嵐ですぅ

このご恩は生涯決して忘れません。ありがとうございました。

ご紹介のありました参考ページは今後も参照させて頂きます。

もう一点悩ましい事柄がございます。(すみません。。。)

プロフィールページにある記入した自分のメールアドレスはやはり青色表示になっているのですが、

これはjavascript仕様なので色変更無理なのでしょうか?

ページソース表示より抜き出してみました。

>||

メールアドレス

<script type="text/javascript"><!-- </p> <p> document.write('<a href="mai' + 'lto:ao' + ';i_sumire21@yahoo.co.jp">ao' + ';i_sumire21@yahoo.co.jp</a>'); </p> <p> --></script>

||<

2006/07/26 09:08:30
  • id:TomCat
    大変なポイントをいただいてしまい、恐縮です。
    さて、プロフィールページのリンク色なのですが、これは .section が適用される所全てのリンク色と、どうしても同じになってしまいます。プロフィールページのメールアドレスだけを単独で変える方法というのは、どうしても見つけることが出来ませんでした。もしやメールアドレスの文字列の中に埋め込めないかと姑息な実験もやってみましたが、メールアドレスが有効ではないと跳ねられてしまいまして(^-^;
    この際ですから、

    div.section a:何々{
      color: #何々
    }

    形式で、他のリンク色と合わせて気に入った表示になるようにやっていただくのが一番かと思います。
  • id:SumireS
    大変お世話になりありがとうございました。
    書いて下さった通りに作業をしている間、するりするりと進んでいきました。
    これは私にとりまして稀有な現象です。
    ひとえにTomCat様のご丁寧なご指導のおかげでございます。
    心よりの感謝と御礼を申し上げます。

    プロフィールページのリンク色について、お手をわずらわせてしまい申し訳ございませんでした。

    div.section a:何々{
      color: #何々
    }
    でいろいろ試してみたのですが、うまくいきませんでした。
    きっと私の記入の仕方に問題があるのだと思います。
    メールアドレスを記入しないでおけば良いとはわかりつつ、
    自分にとって無謀な挑戦をしてしまいました。(T_T)


この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません