ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - リンクの種類紹介.3

リンクの種類紹介.3

背景の色が変わるリンク

このブログでも使っている人気ブログランキングこの背景の色が変わるリンクの作り方を紹介します。

[テンプレートの設定]→[編集]→[スタイルシート]のlinkを探します。見つかったら、
a { color: 色の値; }
a:hover { color: 色の値; background-color:#ccccff; }
この様にhoverにbackground-color:色の値;を記入するとリンクにマウスのカーソルを乗せた時、背景色が指定した色の値になります。

文字の大きさが変わるリンク

文字の大きさが変わるリンクとは人気ブログランキングこの様にマウスをリンクにマウスのカーソルを乗せた時、文字の大きさが大きくなるリンクの事です。
[テンプレートの設定]→[編集]→[スタイルシート]のlinkを探します。見つかったら、
a { color: 色の値; }
a:hover { color: 色の値; font-size:15px; }
この様にhoverにfont-size:数値px;を記入するとリンクにマウスのカーソルを乗せた時、文字の大きさが指定した大きさに変わる様になります。

文字が動くリンク

文字が動くリンクとは人気ブログランキングこの様にマウスをリンクにマウスのカーソルを乗せた時、文字が元の場所からピクッと動くリンクの事です。動く方向は上下左右、自分の好きな方向を指定することができます。
元の位置を決めるタグ
position: relative; 相対的な位置指定
動く方向を指定するタグ
top:数値px; 上からの距離で指定
bottom:数値px; 下からの距離で指定
left:数値px; 左からの距離で指定
right:数値px; 右からの距離で指定

使い方は、[テンプレートの設定]→[編集]→[スタイルシート]のlinkを探します。見つかったら、
a { color: 色の値; }
a:hover { color: 色の値; position: relative; top: 3px; left: 3px; }
この様にhoverにposition: relative; top:数値px; left:数値px;を記入するとリンクにマウスのカーソルを乗せた時、文字が指定した方向と距離だけ動きます。

具体的に説明すると、position: relative;を記入する事によって元の文字の場所を決めて、その場所からtop: 3px;で上から3pxの方向とleft: 3px;で左から3pxの方向へ文字を移動するという様に決めます。

見本は右下に文字が動くリンクを使いましたが、動く方向を指定するタグを自由に組み合わせて左上に動いて欲しい場合は、bottom: 3px; right: 3px;と指定すれば良いし、単純に右にだけ動いて欲しい時は、left: 5px;などと指定するだけです。

レインボーリンク

レインボーリンクとは、リンクにマウスのカーソルを乗せると虹の様にキラキラとリンクの色が変わるリンクの事です。
『レインボーリンク見本』20061018041830.gif(別窓で開きます)

まず簡単にレインボーリンクを設置できるタグが置いてあるAWCSさんのサイトに行って<SCRIPT src="~~~.js"></SCRIPT>をコピーします。
コピーできたら自分のブログへ戻って[テンプレートの設定][編集]→[HTMLの編集]を開きます。
そして上の方にある<BODY>を探して下さい。見つかったら<BODY>のすぐ下にコピ-したコードを張りつけます。張りつけたら更新を押して出来上がりです。
これでブログのリンクが全部レインボーリンクになると思います。

リンク先をサムネイル画像で表示するリンク

Snapというサイトの1つの機能でリンク先のサムネイル画像を表示するリンクを作る事ができます。
『Snap見本』20061018041830.gif(別窓で開きます)
詳しくは「Snapって知ってる?」を見てみて下さい。

<背景の色を変えたい!基礎編へつづく>
関連ページ)
文字の色を変えたい!
リンクの色を変えたい!
リンクの種類紹介.1
リンクの種類紹介.2
・リンクの種類紹介.3


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/662-9332816b   

Template Designed by DW99