CSSパーツテンプレート

このサイトは、「初心者でも使えるCSSパーツテンプレート」を配布しています

テンプレート サイズ カラー 文字の設定 背景の設定 枠線の設定
 

  いろいろなリンクスタイル

リンクの文字にマウスカーソルを合わせた際に文字の色や太さ、装飾を変化させるといった動きのあるリンクを 作成することが出来ます。

擬似クラス設定
a:link リンク先に見訪問の状態
a:hover マウスカーソルを文字の上に合わせた状態
a:active マウスでクリックした時の状態
a:visited マウスでクリックした後の状態
 

下記のパーツをコピーしてCSSファイルに貼り付けてください。 サイト上にあるリンク全てに適用されますのでご注意ください。
また、パーツを元にカスタマイズする際は上記のメニューバーの各項目をご参照ください。

 

  リンクにスタイルを適用する

コピペ用パーツサンプル


コピペ用パーツサンプルの文字をクリックして開きます。
お気に入りのパーツがありましたらパーツを全て選択してコピーします。
パーツをコピーします

お持ちのホームページのスタイルシートをエディターで開きh2やh3などスタイルを適用する箇所に上書きで貼り付けます。 更新して変更を確認してみましょう! なお、元の設定に戻せるよう初めから記載されていたスタイルはバックアップをとっておくことをおすすめします。

文字の色を変えたい!

文字の色を変更したい場合はcolor: #222222; の部分の#222222を変えて調整してください。
こちらに色の変更方法については記載してありますので参考にしてください。

関連項目:文字の設定 

文字の太さを変えたい!

文字の太さを変更するには font-weight:normal; (通常) font-weight:bold; (太字)で設定します。
通常は normal とは設定しませんが、bold の設定を解除する場合などに normal の設定を使うようにします。

関連項目:文字の設定 

下線を消したい!つけたい!

文字に対する装飾の設定には text-decoration を使用します。
text-decoration:none; (下線なし) text-decoration:underline; (下線あり) 通常はリンクなので何も設定しなくても下線付きですが、none が設定されてる場合などに underline の設定は使うようにします。

関連項目:文字の設定 

背景の色を変えたい!

背景の色を変更したい場合は background-color: #ffcc99; の部分の#ffcc99を変えて調整してください。
マウスカーソルを当てた状態(hover)に背景色を設定するとクリックした時の状態(active)もその背景色が引き継がれます。
こちらに色の変更方法については記載してありますので参考にしてください。

関連項目:背景の設定 



個人的にはですがリンクの設定は基本的に派手に変更せず最低限 a:link と a:hover だけ簡単に設定してあればそれでいいと思います。

あとスタイルシートに記述する際は a:link→a:visited→a:hover→a:active という順番に記述していかないとうまく 表示されない場合がありますのでご注意ください。



Copyright © 2009 CSSパーツテンプレート All rights reserved.