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

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

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

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


回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/11/08 17:03:14
  • 終了:2011/11/15 17:05:06

回答(1件)

id:grankoyama No.1

グラ娘。回答回数560ベストアンサー獲得回数1702011/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』が青の量を表していて数字を、1~9ではなく

1~9でその次が10ではなくて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 の

f:id:grankoyama:20111109002602p:image

にあるじゃない。これを貼り付けてみて。


あ~大変だった。質問は分けようね。

id:hb64226326174d111

返信遅くなってすみません><
回答ありがとうございます…!
カーソルを合わせたら画像が変わるようにするのわかりやすく答えてくれてありがとうございますっ!
太文字できました この質問も答えてくれてありがとうですm(_ _)m


あと…今度から質問分けます;;
本当にすみません。

2011/11/16 16:10:12
  • id:grankoyama
    グラ娘。 2011/11/16 09:58:19
    うわっ! 返信なかった。
    頑張って2つとも(って結局3つ)それなりの答えだしたのに……
  • id:hb64226326174d111
    ぐらむす。さん>>
    本当にごめんなさい>< というかすみません。
    回答見ました!
    どうも回答ありがとうございますm(_ _)m

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

トラックバック

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

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

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