WindowsMedia.com

WindowsMedia.com

 

ホーム へ       サンプルページ  リンク装飾 css0.htm

ハイパーリンク文字の装飾(マウスオーバー・表示済み・アクッティブに応じて色・書体・マウスカーソルを変化)を行う。     CSS(スタイルシート)。      カスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。   関連情報 : スタイルシートリファレンスリンクカラー背景色アニメカーソルアニメカーソル 2

デモは、表示済みページへなどのリンクの、下線・色・書体・カーソルの変化で。   ”表示済み”のクリアは、”Internet Explorer” - ツール - インターネットオプション - [履歴のクリア] などで。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、css0.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

・ このDHTMLの実装方法は、css0.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、<head> 〜</head> の任意の行間に (*1) を、さらに<body> 〜</body>の任意の行間に (*2) をペーストします。   ※: Internet Explorerの表示画面からの直接HTMLコピー、ペーストは、Wordpadなどのテキストエディターを経由し、構文中混入した改行があれば、削除します。

・ 編集方法は、hogehoge.html を WordPad や SmipleText などのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、 (*2) を参考に太字部分の編集を任意に行います。       ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 4.x〜 などで開いて。     環境の確認は、”Internet Explorer” - ツール - インターネットオプション - [色] の設定などで。    更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像なども転送/配置し実施。      FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS

 

(*1) css0.htm (例)        挿入先の  <head> 〜 </head>の、部分にペーストします。

HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

 

 

 

リンクテキスト下線有り

  〃  色

※:色の作成。色記号の獲得は、 色記号2 で。

 

表示済みリンク下線無し

  〃  色

  〃  マウスカーソル十字

  〃  斜体フォントスタイル

 

 

アクティブリンク下線無し

  〃  色

 

 

マウスオーバー時下線無し

   〃    背景色

   〃    色

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ

同じフレーム target="_self"
ページ全体  target="_top"
親フレーム  target="_parent"

お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<!-- ▼---------- ↓ この間をコピー、編集、ペーストします。 ----------▼ -->

<style type="text/css"><!--

a:link {

text-decoration:underline;

color:#54006C;

}

a:visited {

text-decoration:none;

color:#62000D;

cursor:crosshair;

font-style:italic;

}

a:active {

text-decoration:none;

color:#00FFFF;

}

a:hover {

text-decoration:none;

background:#f3edee;

color:#8000e2;

}

--></style>

<!-- ▲---------- ↑ この間をコピー、編集、ペーストします。 ----------▲ -->

<base target="_blank">

<title>サンプルページ  リンク装飾</title>

 

 

(*2) css0.htm (例)        挿入先の  <body> 部分を編集します。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景色

余白 テキスト色

ハイパーリンク(例)

リンク

オプション指定 

ターゲット 吹き出し  文字色 
 

背景色 サイト名

 

 

 

<body bgcolor="#F8F5F5" TOPMARGIN=20 LEFTMARGIN="40" TEXT="#000000">

<!-- ▼---------- ↓ この間をコピー、編集、ペーストします。 ----------▼ -->

<p><font face="MS Pゴシック" size="2"> <strong><a style="text-decoration: underline"

 onclick="window.open('http://windowsmedia.microsoft.com/default.asp',

 'XX','status=yes,scrollbars=yes,width=800,height=700,resizable=yes,directories=no,screenX=2,left=2,screenY=2,top=2')"

href="#" target="_self" title="指定サイズ・位置・オプションで開きます。"><span style="COLOR: #D7D0FF; BACKGROUND-COLOR:

#6F231B">WindowsMedia.com</span></a></strong></font></p>

<p><font face="MS Pゴシック" size="2"> <strong><a style="text-decoration: none"

href="http://windowsmedia.microsoft.com/default.asp" target="_blank"><span style="COLOR: #00DFC8;

BACKGROUND-COLOR: #746D6E" title="新しいWinで

開きます。">WindowsMedia.com</span></a></strong></font></p>

<!-- ▲---------- ↑ この間をコピー、編集、ペーストします。 ----------▲ -->

※:(*1)と同じンク色・装飾を <body> 部分に記述した(例):  <body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF" background="blst01.gif">

 

< 補足 >    適時参照あれ!。

・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。