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

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

リンクの種類紹介.2

リンクの種類紹介.1だと線の種類が実線のみで線の場所も上・下・真ん中のみしか選べませんでした。
でも今回紹介する方法を使うと色々な線や左右にも線をつける事が出来るので下の見本の様なリンクも作る事ができます。

1・人気ブログランキング

2・人気ブログランキング

3・人気ブログランキング

タグの紹介

今回はbgcolorというタグを使います。
このbgcolorに線の場所・線の太さ・線の色・線の種類を指定します。

上下左右個別に指定する方法
border-top:太さ 色 種類; 上の線の種類をまとめて指定
border-bottom:太さ 色 種類; 下の線の種類をまとめて指定
border-left:太さ 色 種類; 左の線の種類をまとめて指定
border-right:太さ 色 種類; 右の線の種類をまとめて指定
上下左右一括で指定する方法
border:太さ 色 種類; 上下左右の全てをまとめて指定

線の種類の紹介

・solid(実線)
・double(二重線)
・dotted(点線)
・dashed(破線)
・groove(窪んでいる線)
・ridge(浮き上がっている線)
・inset(中が窪んでいる様に見える線)
・outset(中が浮き上がっている様に見える線)

実際にどのように指定するのかというと、
border-top: 3px #ffff33 dotted;
上の線ならこの様に指定します。指定する種類の間に半角スペースを入れるのを忘れないで下さい。

実際の使い方

まず[テンプレートの設定]→[編集]→[スタイルシート]のlinkの所を見て、
a { color: #000000; text-decoration:none }
というリンクの部分を探します。

●上の見本の1番の上下左右を線で囲まれているリンクを作る時は、
a { color: #000000; border:3px #99cc33 double;}
と記入します。

●見本の3番の左右と下の線の組み合わせの様な場合だと、
a { color: #000000; border-right: 2px #ff66cc dotted; border-left: 2px #ff66cc dotted; border-bottom: 2px #ff99cc inset; }
と単純にそれぞれのタグを順番に記入するだけです。

●さらにマウスのカーソルを乗せた時(hover)を組み合わせて、通常は普通のリンクでマウスを乗せると破線が囲まれるリンク-FC2ブログランキングなども作る事ができます。
a { color: 色の値; }
A:hover { color: 色の値; border:3px #E9967A dashed; }

具体的にはこの様に指定してあります。

hoverとの組み合わせはリンクの種類紹介.1ですでに紹介したのでそちらで確認して下さい。

リンクの線に関してはリンクの種類紹介.1と.2でほとんどなんでもできると思いますが、それ以外にもこのブログの様にマウスのカーソルを乗せた時に背景色が変わるリンクや文字が動いたり大きさが変わったりするリンクもつくる事ができるのでリンクの種類紹介.3で紹介します。 <リンクの種類紹介.3へつづく>

関連ページ)
文字の色を変えたい!
リンクの色を変えたい!
リンクの種類紹介.1
・リンクの種類紹介.2
リンクの種類紹介.3


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

http://rgrg.blog61.fc2.com/tb.php/661-f44430d8   

Template Designed by DW99