サンプルページ　　　Ｆｏｎｔ

　Home

　Blog･RSS

　Twitter･X

　You Tube

　Facebook

　Instagram

　Share

　Link

　External Link

　Internet Explorer･Edge

　Search

　Css

　HTML

①　

②　

③　

④　

⑤　

⑥　

⑦　

⑧　

⑨　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　Font-Awesome　　font-awesome.htm

非画像のｱｲｺﾝ（font-awesome v4、CDN）です、背景色 : 透明。　　　CSS。　　　ﾊｲﾊﾟｰﾘﾝｸ、ｻｲｽﾞ、色などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　all 対応。　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、ﾏｳｽｵｰﾊﾞｰ、ｸﾘｯｸなどで。　　※： PCのﾌｧｲﾙを直接表示でも可。　　　　※: 関連・詳細情報 -font-awesome1.htm、font-awesome、一覧、ｱｲｺﾝ検索、New、ｶｽﾀﾏｲｽﾞ、ｻｲｽﾞ、色、ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ61。

< ご使用方法 >

・　保存は font-awesome.htm を右ｸﾘｯｸ、【名前を付けてﾘﾝｸを保存】 - <保存する場所>： ……、などで。　　※:　変わってしまった、ﾌｧｲﾙ名や、*.htm 中のﾊﾟｽは要修正。

・　ﾍﾟｰｽﾄは、font-awesome.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】 - 右上 [……] - [設定] - [ﾌﾟﾗｲﾊﾞｼｰ、検索、ｻｰﾋﾞｽ] - [閲覧ﾃﾞ-ﾀをｸﾘｱ] - ［ｸﾘｱ-するﾃﾞ-ﾀの選択］ - ［ｖ］閲覧の履歴 -［今すくｸﾘｱ］をｸﾘｯｸ。　　留めに、(3) ｻｰﾊﾞｰのﾌｧｲﾙを一旦削除。

(*1) ：　font-awesome.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕　

ｼﾌﾄJIS使用（削除不可）

URL前・ﾂｰﾙﾊﾞｰに表示のｱｲｺﾝﾌｧｲﾙ名（削除可）favicon_**.ico など

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent

お気に入りなど表示のﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

CDN

<title>サンプルページ　　Ｆｏｎｔ－Ａｗｅｓｏｍｅ</title>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

(*2) ：　font-awesome.htm （例）　　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

<a　～　</a>、をｺﾋﾟｰ使用。
縦配置　　ｱｲｺﾝ背景色 : 透明
URL 吹き出し Prefix clas ｻｲｽﾞ

①～⑧ : 縦配置、ｱｲｺﾝ背景色 : 透明① 黒（style="color:#000000" を:削除も同じ）
URL 吹き出し Prefix clas ｻｲｽﾞ 色

以下、同様。

⑨: 横表配置、ｱｲｺﾝ背景色 : 透明　表背景色

URL 吹き出し Prefix clas ｻｲｽ
色

以下、同様。

<body>

<a href="http://xml-xsl.sakura.ne.jp/index2.html" target="_top" title="Home : ｸﾘｯｸ ⇒ 移動します。"></a>　Home 
<a href="http://xml-xsl.blog.so-net.ne.jp/" title="ﾌﾞﾛｸﾞ : 日々の感動・反射、思惟・情念の奔走・感謝を書き付ける。"></a>　Blog･RSS 
 
<a href="https://twitter.com/" title="Twitter・X.com"></a>　Twitter･X 
 
<a href="https://www.youtube.com/user/OKATOSHO/playlists" title="♫ You Tube・Classic Play List"></a>　You Tube 
<a href="https://www.youtube.com/channel/UCXmEiderzO80D7LwhqXwuog/playlists" title="♫ You Tube・Jazz・Pops Play List"></a> 
 
<a href="https://www.facebook.com/" title="Facebook"></a>　Facebook 
 
 
<a href="https://www.instagram.com/" title="Instagram"></a>　Instagram 
　Share 
 
 
 
 
　Link 
<a href="https://www.afsgames.com/" title="ゲームのつぼ（外部ｻｲﾄ）"></a>　External Link 
<a href="https://xml-xsl.sakura.ne.jp/internet%20explorer%20mode.htm" title=" Edge 右上 … から、Internet Explorerﾓｰﾄﾞで再読み込み、［全てのｺﾝﾃﾝﾂを表示］で。"></a>　Internet Explorer･Edge 
 
<a href="http://www.pat.hi-ho.ne.jp/oka_tosho/search_google7.htm" title="TwitterやYou Tubeなどﾄﾞﾒｲﾝ選択も可！。"></a>　Search 
<a href="https://xml-xsl.sakura.ne.jp/css.htm" title="CSS ﾘﾌｧﾚﾝｽ"></a>　Css 
<a href="https://xml-xsl.sakura.ne.jp/favicon_mnal.htm" title="HTML、ｱﾄﾞﾚｽﾊﾞｰ・お気に入りに表示の画像作成と設定方法。"></a>　HTML 

①　<a href="http://xml-xsl.sakura.ne.jp/index2.html" target="_top" title="Home : ｸﾘｯｸ ⇒ 移動します。"></a> 

② 　<a href="http://　……　/index2.html" target="_top" title="Home : ｸﾘｯｸ ⇒ 移動します。"></a> 

③　<a href="http://　……　net.ne.jp/" title="ﾌﾞﾛｸﾞ : 日々の感動・反射、思惟・情念の奔走・感謝を書き付ける。"></a> 

④　<a href="https://twitter.com/" title="Twitter・X.com"></a> 

⑤　<a href="https://　……　/playlists" title="♫ You Tube・Classic Play List"></a> 

⑥　<a href="https://　……　/playlists" title="♫ You Tube・Jazz・Pops Play List"></a> 

⑦　<a href="https://www.facebook.com/" title="Facebook"></a> 

⑧　<a href="https://www.instagram.com/" title="Instagram"></a>

⑨　<table border="0" width="180" cellspacing="0" cellpadding="0" bgcolor="#DFD7D3" height="30">
<tr>
<td width="14%" align="absmiddle"><a href="http://　……　/index2.html" target="_top" title="Home : ｸﾘｯｸ ⇒ 移動します。"></a></td>
<td width="14%" align="absmiddle"><a href="http://　……　/" title="ﾌﾞﾛｸﾞ : 日々の感動・反射、思惟・情念の奔走・感謝を書き付ける。">
</a>　</td>
<td width="14%" align="absmiddle"><a href="https://twitter.com/" title="Twitter・X.com">
</a>　</td>
<td width="14%" align="absmiddle"><a href="https://　……　/playlists" title="♫ You Tube・Classic Play List">
</a>　</td>
<td width="14%" align="absmiddle"><a href="https://　……　/playlists" title="♫ You Tube・Jazz・Pops Play List">
</a>
</td>
<td width="14%" align="absmiddle"><a href="https://www.facebook.com/" title="Facebook">
</a>　</td>
<td width="14%" align="absmiddle"><a href="https://www.instagram.com/" title="Instagram">
</a>　</td>
</tr>
</table>

====　　　こ以降は、各々のｺﾝﾃﾝﾂを記述。　　　====