はてなダイヤリー（ブログ）についての質問です。

質問は…まず２つあります。

*１つ目の質問です↓
このブログの…→http://d.hatena.ne.jp/Sukai/
右のサイドメニュー（サイドバー）にあるい右１番上の「うごキャラとは？」というところがありますよね。
そこでカーソルを合わせると画像が変わるようにするのはどうやるんですか？
（そこを押したらページが飛ぶようにしたいんです。）
*２つ目の質問です↓
１つ目の質問で「うごキャラとは？」というページをクリックしたら…http://d.hatena.ne.jp/Sukai/about←このページになりますよね。
そこで…ブログの詳細説明で青く太字で------------------
うごキャラ日記とは？っていうところがありますよね？
------------------
あそこみたいにブログの詳細説明に書きたい（表示したい）文字を青く（色は何色でもOK）太字にする方法を教えてください＞＜
あと、カウントhttp://counting.hatelabo.jp/count/50992をブログの詳細説明に載せるほうほうもおしえてください。

では…よろしくお願いします。m(_　_)m

ログインして回答する

みんなの回答

グラ娘。2011/11/09 00:30:47
めんどくさ！　質問が複数あるなら分けたほうが回答つきやすいですよ。
たくさんあるとめんどくさっ！　って思われてしまって回答がつきにくいです。
さて、
ご要望のひとつめ『カーソルを合わせると画像が変わるよう』
こういうのを調べる時には、ソースの表示で内容を確認します。
該当位置には
```
<a alt="うごキャラとは？" href="http://d.hatena.ne.jp/Sukai/about" id="pro"></a>
```
とありますね。さらに、『id="pro"』に対するcssの記述として
```
#pro {
 display:block;
 width:230px;
 height:200px;
 border:0;
 background-color:transparent;
 background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20110906/20110906213923.jpg');
 background-position:left;
}
#pro:hover {
 background-color:transparent;
 background-image:url('http://cdn-ak.f.st-hatena.com/images/fotolife/S/Sukai/20110906/20110906213923.jpg');
 background-position:right;
}
```
と書かれています。この中で必要な分だけを自分のブログに書けばよいです。
一応、補足しておくと
・alt="この中身"は、画像の読み込みに失敗したり読み込み途中で切断したりなどで
画像が読めなくなったときの変わりに表示されるテキスト。
・href="ここ"　ここがリンク先のURL　
・proは他と重複しないid。もうちょっと長い名前を自分でつけたほうが良いと思います。
・#pro {～}　の中身はマウスカーソルが載っていないときに表示される内容。
　画像サイズとURLだけ変えれば使いまわせるでしょう。
・pro:hover　のほうでマウスが来た時の画像（URL）を指定します。

だいたいコピペでOKのはず。記事内に『＜a alt=』のほうを書いて、もういっこはスタイルシートに記述。proの置換すら面倒なら、alt="うごキャラとは？"　の文章（無くてもいい）とそれぞれのURLと
画像サイズ（230px　とか）だけ変更してみてくださ。
青く太字
```
<span style="font-weight:bold;color:#0000FF;">青く太字</span>
```
こう書けばなりますが、元のサイトでは、
```
<span style="font-weight:bold;font-size:25;color:#6DB3CC;">うごキャラ日記とは？</span>
```
となってますね。sizeとcolorを調整してください。
#6DB3CCとなっているのは、ちょっとRBGとか言われてもピンと来ない人には難しいですが、
『6D』が赤色の量、『B3』が緑、『CC』が青の量を表していて数字を、１～９ではなく
１～９でその次が１０ではなくてA、B、C、D、E、Fと続ける16進法で書いてて、
Fだったら15という意味で、255がffで……面倒なのでwinndowsの電卓アプリで変換してください。
winndowsのペインタで色の作成をやるときに赤緑青がそれぞれ0～255の数字で表されるはずです。それを電卓アプリ（表示メニューで関数電卓にして10進で入力して16進にチェックを入れ替える。わかんなかったら別の質問で聞く）
赤：255　緑：255　青：255　だったら#FFFFFFとかそんなふうに色を指定する。
```
<script language="javascript" type="text/javascript" src="http://counting.hatelabo.jp/widget?count_id=50992" charset="utf-8"></script>
```
これでどうだ！
http://counting.hatelabo.jp/count/50992　の
にあるじゃない。これを貼り付けてみて。

あ～大変だった。質問は分けようね。
スター
- 1件のコメントを見る
- 麻衣＝リュウママ 2011/11/16 16:10:12
  
  返信遅くなってすみません＞＜
  回答ありがとうございます…！
  カーソルを合わせたら画像が変わるようにするのわかりやすく答えてくれてありがとうございますっ！
  太文字できました　この質問も答えてくれてありがとうですm(_　_)m
  
  あと…今度から質問分けます；；
  本当にすみません。
  
  スター

この質問へのコメント

グラ娘。2011/11/16 09:58:19

うわっ！　返信なかった。
頑張って２つとも（って結局３つ）それなりの答えだしたのに……
麻衣＝リュウママ2011/11/16 16:11:08

ぐらむす。さん＞＞
本当にごめんなさい＞＜　というかすみません。
回答見ました！
どうも回答ありがとうございますm(_　_)m

はてなダイヤリー（ブログ）についての質問です。

みんなの回答

グラ娘。2011/11/09 00:30:47

麻衣＝リュウママ 2011/11/16 16:10:12

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版