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

はてなダイヤリー(ブログ)についての質問です。
質問は…まず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/1件

▽最新の回答へ

1 ● グラ娘。

めんどくさ! 質問が複数あるなら分けたほうが回答つきやすいですよ。

たくさんあるとめんどくさっ! って思われてしまって回答がつきにくいです。

さて、


ご要望のひとつめ『カーソルを合わせると画像が変わるよう』

こういうのを調べる時には、ソースの表示で内容を確認します。

該当位置には

<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

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


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


麻衣=リュウママさんのコメント
返信遅くなってすみません>< 回答ありがとうございます…! カーソルを合わせたら画像が変わるようにするのわかりやすく答えてくれてありがとうございますっ! 太文字できました この質問も答えてくれてありがとうですm(_ _)m あと…今度から質問分けます;; 本当にすみません。
関連質問

●質問をもっと探す●



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