ホーム へ サンプルページ 常駐コンテンツ 2 always_on_top2.htm
スクロールを無視、右上などに定位する、リンクなどの小Winです。 小Winの内容、配色、サイズなどは指定 可。 all対応。 コピー、編集し簡単にWebで使用可。 高機能な、 always_on_top.htm も。 応用(例) 2
< ご使用方法 >
・ ローカル(=PC)への保存は、always_on_top2.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、always_on_top2.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body> の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 10.x〜 などで開いて。 更新の確認は、[F5]キー を押し、最新データ読み込み、で。 あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ツール] - [インターネット オプション] - [閲覧の履歴] - [削除] などでも。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.jsなども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わってしまったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 : 色記号5、〃6、スタイルシートリファレンス、ホームページ開設入門。 Web Development、Web開発、IE10 互換性クックブック、〃開発者向けガイド、IE API リファレンス、IE 開発 > HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、XML、〃リファレンス、DHTML。
(*1) : always_on_top2.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
〔この列ペースト不要〕
シフトJIS使用(削除不可) ieなどに表示するアイコンファイル名(削除可)
<style type= 〜
</style>は(削除可)
小Win配色
右マージン( 余白)、主コンテンツを避けるクリアランス。 お気に入り、タスクバーに表示するページ名(≠ファイル名) リンクを新しいWinで開くを標準(削除可)
※:target= いろいろ |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="faviconj.ico"> <style type="text/css"><!--
. <style TYPE="text/css"> <!-- .menuh { BORDER-COLOR : #FFF08D ; cursor : hand ; Border-Left : #FFF08D ; Border-Top : #FFF08D ; Padding-Left : 1px ; Padding-Top : 1px ; Background-Color : #D5CEDF ; } .menu { Background-Color : white ; } .home { cursor : hand ; } .menulinks{ text-decoration:none; } //--> <!-- body, form { margin-right: 87pt; } --></style> <title>サンプルページ 常駐コンテンツ 2</title> <base target="_blank"> |
(*2) : always_on_top2.htm 挿入先の <body> 〜 </body>の 〜 部分にペーストします。
HTMLの編集方法 | (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、編集し使用。 |
〔この列ペースト不要〕
Winサイズ x座標 y座標
配置 配色
フォントサイズ フォント タブテキスト
リンク 先名 〔以下同じ〕
リンクURL 〔以下同じ〕
#……は、ブックマーク(ページ内ジャンプ) 配置 |
<!-- /* Static menu script III (By maXimus, maximus@nsimail.com, http://absolutegb.com/maximus/) ==== この間、説明を省略。 ==== var menuwidth=110 var offsetleft=2 var offsettop=2 var ns4=document.layers?1:0 var ie4=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0 function makeStatic() { if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop} else if (ns6) {document.getElementById("object1").style.top=window.pageYOffset+offsettop} else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));} setTimeout("makeStatic()",0); } if (ie4||ns6) {document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Right:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')} else if (ns4){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')} if (ie4||ns6||ns4) document.write('<TR><TD BGCOLOR="#B4A5CF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="2" FACE=MSP Gothic,MS Gothic>Menu</FONT></TD></TR>') var menui = new Array(); var menul = new Array(); //configure below for menu items. Extend list as desired menui[0]=" 太陽風ДζΨΠ∀"; menui[1]=" 華火"; menui[2]=" ナビバー"; ==== この間、説明を省略。 ==== menui[12]=" 編集へ"; menul[0]=" index2.htm"; menul[1]=" firework.htm"; ==== この間、説明を省略。 ==== menul[12]="#編集"; for (i=0;i<=menui.length-1;i++) if (ie4||ns6) {document.write('<TR><TD BORDERCOLOR="white" ONCLICK="location='+menul[i]+'" onmouseover="className=menuh" onMouseout="className=menu"><LEFT><FONT>'+menui[i]+'</FONT></TD></TR>')} else if (ns4){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width="'+menuwidth+'" onmouseover="bgColor=yellow" onmouseout="bgColor=white"><LEFT><A HREF="'+menul[i]+'" class=menulinks>'+menui[i]+'</A></LEFT></LAYER></ILAYER></TD></TR>')} if (ie4||ns6) {document.write('</TABLE></span>')} else if (ns4){document.write('</TABLE></TD></TR></TABLE></LAYER>')} function menu3(){ if (ns6||ie4||ns4) makeStatic() } window.onload=menu3 //--> </SCRIPT> |
< 補足 > 適時参照あれ!。