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

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画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;]
つまり「マウスオーバーで下線を消せ」っていう命令です!

シリウスカスタマイズ|リンクテキストをへこませる方法の関連ページ

リンク画像を変化させる
シリウスのカスタマイズで、リンク画像の上にカーソルを置いたときに、その画像がへこんだり、画像が半透明になる方法をご紹介します。このカズタマイズをしておくと、訪問者さんが「画像がリンクである事」を認識しやすくなり、クリック率があがり、リンク先に誘導するのに効果的です。
ライトボックスの設置
世界で一番簡単!シリススにライトボックスを設置する方法!5っの手順で速攻作業。サムネイルをクリックすると別画面が開き、指定した画像が表示され、そのグループ内の画像がクリックで次々に拡大表示できるライトボックス!その設置方法を動画でわかりやすく説明します。
アイフォン、スマホ電話番号簡単発信リンク
iphone,スマホなど携帯端末の画面で電話番号をタップすると発信画面に番号がコピーされる機能があります。サイトで電話番号を最適表示させるためのテクニックについて解説します。初心者さんでも簡単に設置可能なスクリプトとHTMLの記述!

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ