人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなダイアリーの記事に、はまぞう利用で書籍のリンクを
ISBN:XXXXXXXXXX:detailやISBN:XXXXXXXXXX:imageで表示すると
本の画像輪郭や本の題名のところが青色になっているのですが、
これを好みの色に太さに変える方法を教えて下さい。

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

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

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

●質問者: ???
●カテゴリ:はてなの使い方 書籍・音楽・映画
✍キーワード:ISBN: はてなダイアリー はと はまぞう リンク
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● TomCat
●200ポイント ベストアンサー
.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で下線を付ける */
}

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

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

◎質問者からの返答

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

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

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

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

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

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

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

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

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

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

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


2 ● TomCat
●200ポイント

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

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

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

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

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

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

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

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

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

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

のいずれかをいじってやれば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

◎質問者からの返答

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

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

♪:*.;".*・;・^;・:\(*^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>

||<

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ