FC2ブログ

スポンサーサイト 

スポンサーサイト
--.--.-- --
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告 * --:-- * comments(-)* trackbacks(-)

ぬめ流カーソル変更講座 

ぬめ流カーソル変更講座
2014.12.05 Fri


こんにちは!

日ごろお世話になっている感謝の気持ちをこめて
今日は自分のブログ内でマウスカーソルを変更する技を伝授したいと思います。


それででは早速はじめましょー


①素材を用意する

まず画像がなくては始まりません!
今回はぺさまのリクエストでへびのドット素材を用意させていただきました。

アイコンを変更する場合、アイコン専用の画像が必要です。
普段使っているであろうjpgやpngは使えず、その代わりにicoという拡張子ファイルを使います。
ちなみにpngからicoに変換するフリーソフトがあって、自分で好きなアイコンを作りたいなと思ったとき愛用させてもらっています。

hebi.ico

今回は↑こちらを使っていきましょう♪
ご自分のブログ内で使う場合はこちらのico画像ファイルをダウンロード→アップロードしてご使用下さい。
あと素材ページに5種類ほどicoを追加しましたので、気に入ったものを使ってやってください。



②テンプレートを編集する

無事、アップロードは完了したでしょうか?
icoは特殊な拡張子のためアップロードしてもプレビュー画面に表示されません。


blog5.png

画像がでなくてもきちんとアップロードは完了してるのでご心配なく!

では、次の作業に移りましょう。


blog1.png


管理者ページの設定タブからテンプレートの設定を選びます。
すると・・・


blog2.png

このようなページが開きます。
ここでブログのデザインを自由に変えたりすることができます。





それではもうちょっと↓にスクロールしてみましょう。




blog3.png





なにやら意味不明な文字列が出てきましたがスルーして下さって結構です。
あの文字列がブログを構成してるのですが、今回いじるのはHTML編集ではなく、スタイルシート編集です。



次にそのスタイルシート編集からbodyという文字列を探し出しましょう。
面倒でもこれがないと始まらないのでお願いしますペコリ((。´・ω・)。´_ _))

blog4.png


無事見つかりましたでしょうか?
bodyを見つけたら、body~bodyのあいだに

body{cursor:url(カーソルファイルのURL),auto}
a{cursor:url(カーソルファイルのURL),auto}

↑を打ち込むだけ♪
※今ある文字列を消さないように気をつけて、改行してスペースをあけて入れると後から見るとき分かりやすいです。

(カーソルファイルのURL)は、①でアップロードしたicoファイルのURLをファイルアップロードのページからコピペすればいいだけです。



body{cursor:url(カーソルファイルのURL),auto}
a{cursor:url(カーソルファイルのURL),auto}

どちらにも同じURLを入れてもいいのですが、
画像やリンクの上でカーソルを変更したいときはa{cursor:url(カーソルファイルのURL),auto}のほうに別のicoファイルのURLを入れてやるといいです。


もし、わかりずらいときは対応いたしますので、またお気軽に聞いて下さいな!
スポンサーサイト

未分類 * 17:30 * comments(2) * trackbacks(-)
COMENNTS
すごいのー!こわいのー!
イセリさん * URL * 2014.12.05 Fri * [ 編集]
わけわかめ。

更新はよぉ…( ・_・)ノΞ●~*
メロン * URL * 2014.12.09 Tue * [ 編集]
SEND COMENNTS

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。