初めてのホームページ作成で見る動画

 

便利な無料ソフトと便利サイト一覧サイト作成ソフトシリウス、最短HPテンプレートの使い方解説お店、企業用ホームページの作り方ホームページで集客し、売り上げを延ばす方法グーグルの無料サービス一覧
HP作成 超初心者、高齢者講座サイト作成のFAQ記事一覧SEO対策実践編SEO対策基本編トップバナー用無料下地画像素材集

シリウスカスタマイズ|リンクテキストをへこませる方法

テキストを変化させる

リンクテキストの上にカーソルを置いたときに、そのテキストが[へこんだように見える]カスタマイズです。カーソルを置いたときに、そのリンクテキストを下、右、に「ずらす」事で表現します。スタイルシートに貼りつけるだけで簡単にできますので挑戦して下さい。

 

シリウスカスタマイズ-1

テキストリンクをへこませる方法
[この動画は5分で見れます]

 

 

スタイルシートでアスタリスクとスラッシュで囲まれた文字は、ブラウザの表示に反映されません。後に、何のためのソースなのかが解るように、目印として必ず記述しておきます。

 

/* ココに反映結果を記述する */

 

コピペで使ってください。

/* リンク付き文字をへこませる */
a:hover {
position: relative;
top: 1px;
left: 1px;
text-decoration: none;
}

 

この命令の日本語訳

a:hover・・・リンク[a]にカーソルが乗った場合[hover]
position:relative;・・・相対位置を、
topから下に1px
leftから右に1px
移動させろ!
text-decoration: none;
プロパティはテキストに装飾を施しません。
※ 通常リンクテキストには下線があるが、
マウスオーバー時に「テキスト装飾」[text-decoration:]「施すな!」[none;]
つまり「マウスオーバーで下線を消せ」っていう命令です!

 

 

 

 

 

TOPへ