Automatic Anchor Links from Headers

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

7.jpg

8.jpg

9.jpg

10.jpg

11.jpg

12.jpg

13.jpg

14.jpg

15.jpg

16.jpg

17.jpg

18.jpg

19.jpg

20.jpg

21.jpg

22.jpg

23.jpg

24.jpg

25.jpg

26.jpg

27.jpg

28.jpg

29.jpg

30.jpg

　

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾌﾞｯｸﾏｰｸ 3　　book_mark3.htm

ｶｽﾀﾑﾍｯﾀﾞｰ（ﾍﾟｰｼﾞ内ｱﾝｶｰ）からﾘﾝｸﾃｰﾌﾞﾙを自動生成。　　　　　　jQuery、DHTML。　　　　　　ｶｽﾀﾑﾍｯﾀﾞｰ（ﾍﾟｰｼﾞ内ｱﾝｶｰ）などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。 　　　　　　関連・詳細情報 ： ﾌﾞｯｸﾏｰｸ、ﾌﾞｯｸﾏｰｸ2　　

ﾃﾞﾓは、Header Editなどをｸﾘｯｸ、ﾍﾟｰｼﾞ内ｼﾞｬﾝﾌﾟで。　先頭行へは”Home”ｷｰで。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、book_mark3/をｸﾘｯｸ、開いたﾎﾙﾀﾞｰでbook_mark3.htm、0044411101477.js を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※:  変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、book_mark3.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head>　〜　</head> の任意の行間に (*1)を、さらに <body>　〜　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　　下記の（例） (*1) と、(*2)、(*3) を参考に太字部分の編集を任意に行います。　　　 　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、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。

　

Header Edit

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

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

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

ieなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

<style type= 〜  </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景
body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ

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

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

　

ﾘﾝｸﾃｰﾌﾞﾙ幅
〃　背景色
〃　枠色

jQuery　

 　

<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:#FFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ　　ブックマーク 3</title>

<!--　☆ -----------　↓ この間をコピー＆ペーストします。 ------------　-->
<style>
/* Demo styles. Remove if desired */
#tocbox{
max-width: 500px;
background: #FFFFFF;
border: 1px solid #CDC4F7;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="0044411101477.js"></script>
<!--　☆ -----------　↑ この間をコピー＆ペーストします。 ------------　-->
　

Body Edit

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

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

　

ﾘﾝｸﾃｰﾌﾞﾙ位置

ｲﾝﾃﾞｯｸｽ・見出し　〃　ID　〃　ﾃｷｽﾄ

以下、同様。

　

　

　

　

　

　

　

　

　

　

　

　

　

　

ｶｽﾀﾑﾍｯﾀﾞｰ　〃　ID　〃　ﾃｷｽﾄ

　


<body>

<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<div id="tocbox"></div>
<p><h1 class="h1"><span id="Automatic Anchor Links from Headers"></span>Automatic Anchor Links from Headers</h1></p>
<h1 class="h1"><span id="1.jpg"></span>1.jpg</h1>
<p><img src="../win7a/1.jpg" title="↑ 先頭行へは”Home”ｷｰで。" width="1600"/></p>
<h1 class="h1"><span id="2.jpg"></span>2.jpg</h1>
<p><img src="../win7a/2.jpg" title="↑ 先頭行へは”Home”ｷｰで。" width="1600"/></p>
<h1 class="h1"><span id="3.jpg"></span>3.jpg</h1>
<p><img src="../win7a/3.jpg" title="↑ 先頭行へは”Home”ｷｰで。" width="1600"/></p>
<h1 class="h1"><span id="4.jpg"></span>4.jpg</h1>
<p><img src="../win7a/4.jpg" title="↑ 先頭行へは”Home”ｷｰで。" width="1600"/></p>
<h1 class="h1"><span id="5.jpg"></span>5.jpg</h1>

====  この間､説明を省略｡  ====

　

<p><img src="../win7a/28.jpg" title="↑ 先頭行へは”Home”ｷｰで。" width="1600"/></p>
<h1 class="h1"><span id="29.jpg"></span>29.jpg</h1>
<p><img src="../win7a/29.jpg" title="↑ 先頭行へは”Home”ｷｰで。" width="1600"/></p>
<h1 class="h1"><span id="30.jpg"></span>30.jpg</h1>
<p><img src="../win7a/30.jpg" title="↑ 先頭行へは”Home”ｷｰで。" width="1600"/></p>
<!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　-->
　

====  この間､説明を省略｡  ====


<p><h2 class="h2"><span id="Header Edit"></span>Header Edit</h2></p>
　

====  この間､説明を省略｡  ====


<p><h2 class="h2"><span id="Body Edit"></span>Body Edit</h2></p>

====  この間､説明を省略｡  ====

<p><b class="customheader"><span id="Supplement"></span>Supplement</b></p>


====  この間､説明を省略｡  ====

　

JavaScript Edit

(*3) ：　0044411101477.js （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。　

　 　*.js の編集方法　  (*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。
　 〔この列ﾍﾟｰｽﾄ不要〕

　

 　

/*
Automatic Anchor Links from Headers- By Jon Muller
Author Site: http://ergonomictrends.com/
*/

jQuery(function($){
var targetels= ['h1', 'h2', 'h3', '.customheader']
var outputdivid = 'tocbox' // id of empty element to house TOC links
var headerlength = 70 // max length of each header link
var trailingmark = '...' // trailing text to add to each of header link if necessary
var animated = true // animate scrolling?
var uloutput = '<ul class="tableofcontents">\n' // UL and classname to use for the generated TOC container

var $output = $('#' + outputdivid)
var $headers = $(targetels.join(', '))
var anchortxtarray = []

if ($output.length == 0 || $headers.length == 0)
return

$headers.each(function(i){
var $header = $(this)
var headertext = $header.text()
var defaultheaderlength = headertext.length
headertext = headertext.substr(0, headerlength)
var anchortext = headertext.replace(/ /g, "_") // replace space with _ to generate anchor link text
anchortext = anchortext.replace(/\W/g, "") // Remove weird characters for jQuery selector sake
if (jQuery.inArray(anchortext, anchortxtarray) != -1){ // check if this anchor link already exists (happens if two headers have the same exact text)
anchortext += '_' + (i+1) // if so, append a number to this anchor text to make it unique
}
anchortxtarray.push(anchortext)
$header.prepend('<span id="' + anchortext + '"/>')
uloutput += '<li><a href="#' + anchortext + '">' + headertext + (headertext.length < defaultheaderlength? trailingmark : '') + '</a></li>'
})
uloutput += '</ul>'
$output.html( uloutput )

if (animated === true){
$output.bind('click', function(e){
var $target = $(e.target)
if ($target.is('a') && $target.attr('href').indexOf('#') != -1){
var $header = $($target.attr('href'))
$('html,body').animate({scrollTop: $header.offset().top}, 'normal', function(){
location.hash = $target.attr('href')
})
return false
}
})
}
})

　

Supplement

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

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。