Home
Blog・RSS
Twitter・X
You Tube
Facebook
Instagram
Line
Share
Link
External Link
Internet Explorer・Edge
Search
Java
JavaScript
Css
HTML
Excel
情報
デー7アベース
箴言
俳句
音楽
カレンダー
カレンダー
時刻
バイク
ガソリンスタンド
駐車場
お手洗い
コーヒー
Wi-Fi 電波
レストラン
ホテル
本
風呂・シャワー
病院
アドレス帳
ホーム へ サンプルページ Font-Awesome1 font-awesome1.htm
非画像のアイコン(font-awesome v5、CDN)です、背景色 : 透明、表(table)にマウスオン時、セルの背景色が変化、痕跡を遺します。 CSS。 ハイパーリンク、サイズ、色などのカスタマイズはテキストエディターなどで可。 all 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
デモは、マウスオーバー、クリックなどで。 ※: PCのファイルを直接表示でも可。 ※: 関連・詳細情報 -font-awesome.htm、font-awesome、一覧、アイコン検索、New、カスタマイズ、サイズ、色、トップナビバー61、highlight_table1.htm。
< ご使用方法 >
・ 保存は font-awesome1.htm を右クリック、【名前を付けてリンクを保存】 - <保存する場所>: ……、などで。 ※: 変わってしまった、ファイル名や、*.htm 中のパスは要修正。
・ ペーストは、font-awesome1.htm をテキストエディターで開き、ホームページ作成ソフトなどの ”テキストモード で、新しいページや hogehoge.htm(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに
<body> 〜 </body>の任意の行間に (*2) をペーストします。 ※: テキストモード : コード/HTMLタグ挿入/HTMLメニュー など。
・ 編集 : hogehoge.htm に テキストモードでペースト 後は、ホームページ作成ソフトのデザインや通常モード、テキストモード、テキストエディターで編集します。 下記の(例) (*1) と、(*2) 、(*3) を参考に太字部分の編集を任意に行います。
※: 外部ドメイン(サイト)にアップロートの画像などの使用は、非表示に注意。 画像の alt タグは不可、サイズ指定の pt などの省略は注意。 スクリプト構文中への 改行混入に注意。
・ アップロードは、hogehoge.htm と同じホルダーに、使用してる 画像などをアップロードします。 別ホルダーの場合は、hogehoge.htm の該当パス注意。
・ 作動テストは Edge〜 などで。 更新の確認は、ブラウザーなどのキャッシュのクリア後に実施。 (1) [F5]キ- or Ctrl+Rキー を押し、最新データ読み込みで。 更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。 留めに、(3) サーバーのファイルを一旦削除。
・ 関連情報:
色記号 、RGB5 〃6 、〃8 、フォント、スタイルシートリファレンス、ホームページ開設入門、HTMLをテキストエギタ-で編集。
(*1)
: font-awesome1.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
|
HTMLの編集方法 |
(*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
シフトJIS使用(削除不可)
URL前・ツールバーに表示のアイコンファイル名(削除可)favicon_**.ico など
<style type= 〜
</style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 画像 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入りなど表示のページ名(≠ファイル名) CDN JavaScript :
マウスオン時、セルの背景色が変化、痕跡を遺す。
|
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<link REL="SHORTCUT ICON" href="favicon.ico">
<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none }
a:link { color:#190049; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#333; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D3FE7C; text-decoration:underline; }
a:active { color:#1F002E; background-color:#C3FEBB; text-decoration:underline; }
font {font-size:12px; line-height:14px;}
body,tr,td,form{ font-family:メイリオ.Lucida Sans Regular,MS PGothic,; font-size: 12px}
--></style>
<base target="_blank">
<title>サンプルページ Font−Awesome1</title> <!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
<!-- ★ ---------- Highlight ↓ この間をコピー、編集、ペーストします。 ---------- -->
<script language="JavaScript1.2">
//Highlight Table Cells Script-- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var ns6=document.getElementById&&!document.all ==== この間、説明を省略。 ==== if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
source.style.backgroundColor=originalcolor
}
</script>
<!-- ★ ---------- Highlight ↑ この間をコピー、編集、ペーストします。 ---------- -->
|
(*2)
: font-awesome1.htm (例) 挿入先の <body> 〜
</body> の、〜
部分にペーストします。
|
HTMLの編集方法 |
(*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
<a 〜 </i></a>、<i cla 〜 "></i>をコピー使用。
縦配置 アイコン背景色 : 透明
URL 吹き出し Prefix clas サイズ
以下、同様。
横長表に配置。 マウスオン時、セルの背景色が変化、痕跡を遺す。
<table 部に記述 表背景色
マウスオン時背景色 痕跡背景色 以下、同様。 横長表に配置。 マウスオン時、セルの背景色が変化、痕跡を遺す。
<table 部に記述 表背景色
マウスオン時背景色 痕跡背景色 色 以下、同様。
|
<body>
<!-- ☆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<a href="http://xml-xsl.sakura.ne.jp/index2.html" target="_top" title="Home : クリック ⇒ 移動します。"><i class="fas fa-home fa-lg" aria-hidden="true"></i></a> Home<br/><br/>
<a href="http://xml-xsl.sakura.ne.jp/index2.html" target="_top" title="Home : クリック ⇒ 移動します。"><i class="fas fa-home fa-lg" aria-hidden="true"></i></a> Home<br/><br/>
<a href="http://xml-xsl.blog.so-net.ne.jp/" title="ブログ : 日々の感動・反射、思惟・情念の奔走・感謝を書き付ける。"><i class="fas fa-blog fa-lg" aria-hidden="true"></i></a> Blog・RSS<br/><br/>
<i class="fas fa-rss-square fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-rss fa-lg" aria-hidden="true"></i><br/><br/>
<a href="https://twitter.com/" title="Twitter・X.com"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a> Twitter・X <br><br/>
<i class="fab fa-twitter-square fa-lg" aria-hidden="true"></i><br/> <br/>
<a href="https://www.youtube.com/user/OKATOSHO/playlists" title="♫ You Tube・Classic Play List"><i class="fab fa-youtube fa-lg" aria-hidden="true"></i></a> You Tube<br/><br/>
<a href="https://www.youtube.com/channel/UCXmEiderzO80D7LwhqXwuog/playlists" title="♫ You Tube・Jazz・Pops Play List"><i class="fab fa-youtube fa-lg" aria-hidden="true"></i></a><br/><br/>
<i class="fab fa-youtube-square fa-lg" aria-hidden="true"></i><br/> <br/>
<a href="https://www.facebook.com/" title="Facebook"><i class="fab fa-facebook-f fa-lg" aria-hidden="true"></i></a> Facebook <br><br/>
<i class="fab fa-facebook-square fa-lg" aria-hidden="true"></i><br><br/>
<i class="fab fa-facebook fa-lg" aria-hidden="true"></i><br/> <br/>
<i class="fab fa-facebook-messenger fa-lg" aria-hidden="true"></i><br><br/>
<a href="https://www.instagram.com/" title="Instagram"><i class="fab fa-instagram fa-lg" aria-hidden="true"></i></a> Instagram<br/><br/>
<i class="fab fa-instagram-square fa-lg" aria-hidden="true"></i><br/> <br/>
<i class="fab fa-line fa-lg" aria-hidden="true"></i> Line<br/><br/>
<i class="fas fa-share-alt fa-lg" aria-hidden="true"></i> Share<br/><br/>
<i class="fas fa-share-alt-square fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-share fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-share-square fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-share-square fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-link fa-lg" aria-hidden="true"></i> Link<br/><br/>
<a href="https://www.afsgames.com/" title="ゲームのつぼ(外部サイト)"><i class="fas fa-external-link-alt fa-lg" aria-hidden="true"></i></a> External Link<br/><br/>
<i class="fas fa-external-link-square-alt fa-lg" aria-hidden="true"></i><br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/internet%20explorer%20mode.htm" title=" Edge 右上 … から、Internet Explorerモードで再読み込み、[全てのコンテンツを表示] で。"><i class="fab fa-internet-explorer fa-lg" aria-hidden="true"></i></a> Internet Explorer・Edge<br/><br/>
<i class="fab fa-edge fa-lg" aria-hidden="true"></i><br/><br/>
<a href="http://www.pat.hi-ho.ne.jp/oka_tosho/search_google7.htm" title="TwitterやYou Tubeなどドメイン選択も可!。"><i class="fas fa-search fa-lg" aria-hidden="true"></i></a> Search<br/><br/>
<i class="fab fa-searchengin fa-lg" aria-hidden="true"></i><br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/JAVA/bridges/bridges.htm" target="_blank" title="Internet Explorerモードで作動。"><i class="fab fa-java fa-lg" aria-hidden="true"></i></a> Java<br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/koro-tyanf.html" target="_blank" title="止めどない発想発表を支援!。"><i class="fab fa-js fa-lg" aria-hidden="true"></i></a> JavaScript<br/><br/>
<i class="fab fa-js-square fa-lg" aria-hidden="true"></i><br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/css.htm" title="CSS リファレンス"><i class="fab fa-css3 fa-lg" aria-hidden="true"></i></a> Css<br/><br/>
<i class="fab fa-css3-alt fa-lg" aria-hidden="true"></i><br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/favicon_mnal.htm" title="HTML、アドレスバー・お気に入りに表示の画像作成と設定方法。"><i class="fab fa-html5 fa-lg" aria-hidden="true"></i></a> HTML<br/><br/>
<a href="http://xml-xsl.sakura.ne.jp/2024cl_h.xls" title="横長、休日、編集自在、プリント対応、クリック、[ファイルのダウンロード]で。"><i class="fas fa-file-excel fa-lg" aria-hidden="true"></a></i> Excel<br/><br/>
<a href="http://xml-xsl.sakura.ne.jp/2024cl_v.xls" title="縦長、休日、編集自在、プリント対応、クリック、[ファイルのダウンロード]で。"><i class="fas fa-file-excel fa-lg" aria-hidden="true"></a></i> <br/><br/>
<i class="far fa-file-excel fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-info fa-lg" aria-hidden="true"></i> 情報<br/><br/>
<i class="fas fa-info-circle fa-lg" aria-hidden="true"></i> <br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/sort12/sort12.htm" target="_blank" title="ソート12 NLB 20xx年"><i class="fas fa-database fa-lg" aria-hidden="true"></i> デー7アベース<br/><br/>
<a href="http://www.pat.hi-ho.ne.jp/oka_tosho/sort9/sort9.htm" target="_blank" title="ソート9 列タイトルのクリックで、昇降順ソート"><i class="fas fa-database fa-lg" aria-hidden="true"></i></a><br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/sotr3a.htm" target="_blank" title="携帯電話 〜2011-05-14 ソート3a"><i class="fas fa-database fa-lg" aria-hidden="true"></i><br/><br/>
<a href="http://www.pat.hi-ho.ne.jp/oka_tosho/randam_msg6a.htm" title="今日の言葉、ランラム/順送り、550件。"><i class="fas fa-language fa-lg" aria-hidden="true"></i></a> 箴言<br/><br/>
<a href="http://xml-xsl.sakura.ne.jp/slideshow36/slideshow36ssmt.htm" title="刹那の感動や思惟・情念の奔走・跳躍を書き付ける。"><i class="far fa-comment fa-lg" aria-hidden="true"></i></a> 俳句<br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/sound0.htm" title="HTML5、ページを開いた時や、コントローラー操作でサウンドを出す。"><i class="fas fa-music fa-lg" aria-hidden="true"></i></a> 音楽<br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/2024cal.htm#2024" title="卓上サイズ、休日、時計、関連詳細情報、□小Winリンク用コード"><i class="far fa-calendar-alt fa-lg" aria-hidden="true"></i></a> カレンダー<br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/calendar13.htm" title="2005年〜2025年の祝日・休日、時計。"><i class="fas fa-calendar-alt fa-lg" aria-hidden="true"></i></a> カレンダー<br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/time_stamp0.htm" title="HTML、ページを更新した日時を表示。"><i class="fas fa-clock fa-lg" aria-hidden="true"></i></a> 時刻<br/><br/>
<a href="https://xml-xsl.sakura.ne.jp/clocka.htm" title="年 月 日 曜日 時 分 秒 am/pm、凹罫線"><i class="far fa-clock fa-lg" aria-hidden="true"></i></a> <br/><br/>
<i class="fas fa-motorcycle fa-lg" aria-hidden="true"></i> バイク<br/><br/>
<i class="fas fa-gas-pump fa-lg" aria-hidden="true"></i> ガソリンスタンド<br/><br/>
<i class="fas fa-parking fa-lg" aria-hidden="true"></i> 駐車場<br/><br/>
<i class="fas fa-restroom fa-lg" aria-hidden="true"></i> お手洗い<br/><br/>
<i class="fas fa-coffee fa-lg" aria-hidden="true"></i> コーヒー<br/><br/>
<i class="fas fa-mug-hot fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-wifi fa-lg" aria-hidden="true"></i> Wi-Fi 電波<br/><br/>
<i class="fas fa-utensil-spoon fa-lg" aria-hidden="true"></i> レストラン<br/><br/>
<i class="fas fa-utensils fa-lg" aria-hidden="true"></i><br/><br/>
<i class="fas fa-h-square fa-lg" aria-hidden="true"></i> ホテル<br/><br/>
<i class="fas fa-book fa-lg" aria-hidden="true"></i> 本<br/><br/>
<i class="fas fa-bath fa-lg" aria-hidden="true"></i> 風呂・シャワー<br/><br/>
<i class="fas fa-hot-tub fa-lg" aria-hidden="true"></i> <br/><br/>
<i class="fas fa-shower fa-lg" aria-hidden="true"></i> <br/><br/>
<i class="fas fa-clinic-medical fa-lg" aria-hidden="true"></i> 病院<br/><br/>
<i class="fas fa-address-book fa-lg" aria-hidden="true"></i> アドレス帳<br/><br/>
<i class="far fa-address-book fa-lg" aria-hidden="true"></i> <br/><br/>
<p> </p>
<table border="0" width="180" cellspacing="0" cellpadding="0" bgcolor="#E3E0D" height="30" style="border-collapse: collapse" width="90%" id="AutoNumber1" bordercolorlight="#EDE6FF" bordercolordark="#C1B7DF" bgcolor="#FFFFFF" onMouseover="changeto(event, '#EDF0DC')" onMouseout="changeback(event, '#E8E7F8')">
<tr>
<td width="14%" align="absmiddle"><a href="http://xml-xsl.sakura.ne.jp/index2.html" target="_top" title="Home : クリック ⇒ 移動します。"><i class="fas fa-home fa-lg" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="http://xml-xsl.blog.so-net.ne.jp/" title="ブログ : 日々の感動・反射、思惟・情念の奔走・感謝を書き付ける。"><i class="fas fa-blog fa-lg" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://twitter.com/" title="Twitter・X.com"><i class="fab fa-twitter fa-lg" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.youtube.com/user/OKATOSHO/playlists" title="♫ You Tube・Classic Play List"><i class="fab fa-youtube fa-lg" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.youtube.com/channel/UCXmEiderzO80D7LwhqXwuog/playlists" title="♫ You Tube・Jazz・Pops Play List"><i class="fab fa-youtube fa-lg" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.facebook.com/" title="Facebook"><i class="fab fa-facebook-f fa-lg" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.instagram.com/" title="Instagram"><i class="fab fa-instagram fa-lg" aria-hidden="true"></i></a></td>
</tr>
</table>
<br/>
<table border="0" width="180" cellspacing="0" cellpadding="0" bgcolor="#E3E0D" height="30" style="border-collapse: collapse" width="90%" id="AutoNumber1" bordercolorlight="#EDE6FF" bordercolordark="#C1B7DF" bgcolor="#FFFFFF" onMouseover="changeto(event, '#CCD8FD')" onMouseout="changeback(event, '#E8E7F8')">
<tr>
<td width="14%" align="absmiddle"><a href="http://xml-xsl.sakura.ne.jp/index2.html" target="_top" title="Home : クリック ⇒ 移動します。"><i class="fas fa-home fa-lg" style="color#D71600" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="http://xml-xsl.blog.so-net.ne.jp/" title="ブログ : 日々の感動・反射、思惟・情念の奔走・感謝を書き付ける。"><i class="fas fa-blog fa-lg" style="color:#D6A800" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://twitter.com/" title="Twitter・X.com"><i class="fab fa-twitter fa-lg" style="color:#B1B61A" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.youtube.com/user/OKATOSHO/playlists" title="♫ You Tube・Classic Play List"><i class="fab fa-youtube fa-lg" style="color:#34A049" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.youtube.com/channel/UCXmEiderzO80D7LwhqXwuog/playlists" title="♫ You Tube・Jazz・Pops Play List"><i class="fab fa-youtube fa-lg" style="color:#16BDB8" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.facebook.com/" title="Facebook"><i class="fab fa-facebook-f fa-lg" style="color:#1879FD" aria-hidden="true"></i></a></td>
<td width="14%" align="absmiddle"><a href="https://www.instagram.com/" title="Instagram"><i class="fab fa-instagram fa-lg" style="color:#8216FF" aria-hidden="true"></i></a></td>
</tr>
</table>
<!-- ☆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
==== こ以降は、各々のコンテンツを記述。 ====
|