アンカーリンクがずれて表示される件について、何か良い対策の知恵がないでしょうか？

本家のフォーラムも覗いたのですが、&aname(ID);のような任意のアンカーを作成し、表示したい位置を逆算して、位置をずらしてアンカーを配置するという方法しか載ってませんでした。

とにかく数も文章も膨大なので、出来れば見出しを記述した際に自動生成される[#abcd1234]のような、アンカーをそのまま使えると良いのですが。
&aname(ID);という任意のアンカーをひとつひとつ付けるのも大変ですし、本来の位置からずらしてアンカーを付けるというのも、後で頭がごちゃごちゃになりそうで…。
皆さんはあんまりご不便されてないのでしょうか〜。

皆さん、色々アドバイスありがとうございました。
お返事に大変時間が開いてしまって申し訳ありません。いろんな事がありすぎて、お返事出来ぬまま、あっという間に11月になってしまいました。
Yujiroさんに検証して頂いたケースよりも、弊社のhaikにてアンカーリンクが大きくずれるのは、見出しに装飾をたくさんつけているからかも知れません。弊社のボスが、見出しが弱いと言って、太くしたり色をつけたり色々しているのです。あと、前後に#br()で行間を空けたり詰めたりもしています。それらが原因かも知れません。
完全にスッキリとは行きませんが、うみほしさんに教えて頂いたJavaScriptで、なんとか格好がつきましたのでこちらは一旦解決済みにさせて頂きます。

その後，ページをまたいだ場合のアンカーの改善
（具体的にはメニューからアンカーに飛ばす場合）
をいくつか見つけて試してみました。
残念ながらHAIKでうまく動くものはありませんでした。

ranさん

Yujiroさんのテストサイトは私は問題なく閲覧できました。
アクセスできないのはそちらのセキュリティソフトのせいでしょう。
ノートンを一時的にOFFにするか、該当サイトをホワイトリストに入れるかが対処法です。

今回の問題はナビを固定しなければ、問題は生じないでしょう。
HAIK以外に広く「ヘッダー固定＝ナビ固定」した場合の、ブラウザの動作の問題です。
ですから、いろいろな人がCSSやJAVAスクリプトで解決法を示しているのです。
HAIK自体はアンカーがページトップに来るように飛んでいるだけです。
このページトップの解釈が、現状のブラウザではナビ固定ではちょっと困ったことになるという現象です。

ranさん。

件のページ、ロリポップの試用期間10日間を利用し、何もかもすっぴんで細工せずに
HAIKをインストールしたものです。（29日には消失するでしょう）

ノートンがどう判断しているのかわかりません。

ところでそもそもの懸案、デザインbioにおいては「ナビを固定しない」設定だけで
アンカーはほとんど、まずまず実用になる、と、個人的にはそう見ています。
少なくとも#contentsはほぼほぼ問題なし。cols内でも作動します。
（参考ページは単にそれを実証しているだけで、特別なことは何もしていないのです）

これまでの私の書き込みでもこれといった新手法やアイディアを持っていません。
（やってみるならうみほしさん紹介のJavaScripitでしょうか）

また、あいすのんさんが書かれているかなりひどい状態になるのも腑に落ちていない現状があります。
これをどうやれば再現できるのか？そこが知りたいと思っています。

Yujiro様

いつも、貴重なアドバイスで勉強をさせて、頂きありがとうございます。

アンカーの問題は、私達、万年初心者にとって朗報です。

しかし、そのプロセスを理解、勉強するために、紹介ページをクリックすると

http://haik.nobushi.jp/

「危険な Web ページを遮断しました」と出て内容を確認する事ができませんでした。

当方、ノートンのセキュリティーソフトを導入していますので、その影響なのでしょうか？

併せて、今回、込み入った解決方法でなく、もっと簡略にお知らせ頂ければと、勝手ながら思いました。

今後とも、アドバイスをよろしくお願いします。

アンカーと組み合わせて，スクロールアップの位置も調整しました。

もくじの上に

&aname(もくじにつけたいアンカー文字列);

を設置し，

#scrollup(#もくじのアンカー文字列)

を設定すると，上矢印でもくじまで戻せます。
オプションをつけないとページトップまで戻りますが，アイキャッチが大きいと，
もくじを見るのにまたページを下げる必要があるので，そういう手間を省くためです。
これまで「戻り位置の不具合」に悩まされてたのですが，今回解消できたので，これがようやく設定できました。

>他のページからアンカーを指定すると
JavaScriptを適用する前と同じく、ヘッダーに潜り込んでしまいます。

そうですね。このスクリプトはページをまたいだジャンプでは効かないです。
ネット上には他にもいろんなJAVAスクリプトを書いている人がいるので，私が示した方法で試してみると，いいのが見つかるかもしれません。
HAIK固有の問題というより，レスポンシブなサイトで，サイトのヘッダー（HAIKではナビ）を固定したときに出る，Webサイト全般の問題のようですから。

>そこに隠れてるんですけど、実際にはもっと先に行っちゃってる感じです。

ううむ、ここがわからん。何かがおかしい・・・

あいすのんさん

>弊社のサイトだと、上の緑色の部分がスクロールしても動きません。ずっと上にいます。

あ、そうだすみません、bioでもやはりナビ固定ON/OFFありました。
問題が大きく出るのはナビ固定のとき。

不本意かもしれませんが、ナビ固定OFFでさしあたりましな状況になるかも。

ナビ固定ON/OFFは編集メニューのテーマ編集の中に。

Yujiro さん
ありがとうございます。テストサイトを拝見しました。
本当ですね、これだと問題ないですね…なんでだろう？？？
弊社のサイトだと、上の緑色の部分がスクロールしても動きません。ずっと上にいます。
そこに隠れてるんですけど、実際にはもっと先に行っちゃってる感じです。アイキャッチがある分まで先にスクロールされてしまうような感じです。
ページをスクロールしない開きたての時は、一番上にHAIK is easy, simple, pretty Website Building Systemが表示されていて、緑色のナビ部分があって、アイキャッチがあります。ここまでは同じですが、下にスクロールするとHAIK is easy, simple, pretty Website Building Systemとアイキャッチがパッと消え（隠れ？）緑色のナビ部分と記事内容が繋がってくる感じです。
私含め社内の人間はあんまり難しいことは出来ないので、公式以外のおまじないは入れてないと思います。
ナビ部分を、「#bs_nav{{ }}」で囲ってるみたいですが、関係ありますか？
本当はサイトのURLを晒せると一番良いのですが…すみません（汗）

うみほし さん
私もサイト検索は したのですが、導入方法等が分からず困ってました。
ありがとうございます。
書いて頂いたJavaScriptをフッターに入れてみました。
ヘッダーの高さの部分の数字を変えながら試して、210で、ちょうどいい感じになりました。
ただ、同じページ内で目次からジャンプした場合にはちょうどいい位置なのですが、
他のページからアンカーを指定すると
JavaScriptを適用する前と同じく、ヘッダーに潜り込んでしまいます。
ちょっと何かヒントがつかめた気がします。
もうちょっと調べて試してみます。

いやー　cols内でもアンカー可能です。
#contentsによるリンクとボタンによる手動リンクの両方でテスト
手動リンクでは見出し隠れますが、あまりおかしなところへは飛びません。

http://haik.nobushi.jp/

このページでご確認ください。

#cols の中の見出しには[#12345]といった識別子は付きませんが、#contentsの機能
としては問題なく作動し、手動でアンカーもとりあえず働きます。

ranさん
> cols(){{
> }}
> 内では、アンカーが生成されないのです。
そうでしたか、これには気が付きませんでした。新たな悩みの種になりそうです。
記事を書いているのが、私ではなく上司なので…その辺りが問題のデリケート部分でして。アンカーが変なところ（上司のあずかり知らない箇所）に入ってると半狂乱になりそうです（震）。あと、アンカーを仕込んだ私自身が何かの拍子に不意に死んだりしたら、わけがわからなくなっちゃいそうで怖くて…生きててもわけがわからないのに（笑）。
何百ページかある記事にコツコツとアンカーを任意で差し込んでいくのも気が遠くなる作業ですし…。
実際には関連のない記事の場所に表示のためだけにアンカーを突っ込むのってSEO的にはどうなの…とか…。

> この問題については、この様な不便な編集状態を解決出来る様にアンカーをどの場面でも一日でも早く使
> える様にhaikチームには、対応をしてほしいと願っておりますが、無駄なのでしょうか？
本当に同感です。デザインのCSSか何かをちょちょいと修正してくれれば改善するんじゃないの〜？ちゃちゃっと改善してよ〜と思ってしまいます（自分では出来ないのに）、プロでもその辺って難しいのでしょうかね？
HAIKチームに会費を払っているので、デザインパッチ的なやつでもいいので出して欲しいです。

あいすのんさん

＞１つのページ内に例えば、上記のような記事があるとして、目次にて風林火
山をクリックすると、風林火山の記事の終わりのあたりや、織田信長の記事の
中間にジャンプしてしまいます。

うううむ、これは変ですね。通常ここまでひどくなく、せいぜいがジャンプ先
の見出しがブラウザの上辺に隠れるといった程度なんですが・・・

うみほしさん提供の対策も飛び先がブラウザ上辺に隠れるのを防ぐものですか
ら。

何かページの書き方に特別な事情がある可能性ありかも。
（または、何らかのエラーが起こっている）

追記

bioのデザインで検証して見まました。

まずは見出しの下に本文をセットにしたものをページ内にいくつか用意し、

ページ冒頭に目次として「#contents」を記入。

#contentsで生成されたリンクに従ってテスト。

正常作動で、そもそも飛び先がブラウザの上辺に隠れることもなく、良好です。

なお、bioのデザインではナビの固定はそもそもできないので、この点を気にされる
ことはないです。

&aname();を使ったアンカーリンクの飛び先でもまずまず実用範囲と思われます。
（見出しは隠れるけれど）

テスト用に借りたロリポップサイトで上記の作動を確認できます。

http://haik.nobushi.jp/index.php

皆さん、ご回答ありがとうございます。
長くなるので分けてお返事させてください。

Yujiro さん
そうです。ジャンプ先がずれていて、使いづらいというよりは、困るという感じです。

＊武田信玄
＊＊風林火山
＊織田信長
＊＊ホトトギス

１つのページ内に例えば、上記のような記事があるとして、目次にて風林火山をクリックすると、風林火山の記事の終わりのあたりや、織田信長の記事の中間にジャンプしてしまいます。ヘッダーデザインに該当記事が隠れてしまう、余分に先へスクロールジャンプしてしまう感じです。実際にはお店のご利用ガイドとか、サンプルとかを記事にしているので、意図したところと違う内容が表示されてしまうと、困るというかマズイというか、そんな感じなのです。
使っているデザインは「haik_bio」です。

> そうだとすると、HAIKよりブラウザの仕様として致し方ない部分があるようです。
> ナビを固定されているなら、それをOFFにすればマシで、実用上まあまあに。
そうなんですね。ブラウザの仕様ということは、スマホ等でも変わってくるということでしょうか…。根が深いです。
ナビの固定というのがどこで出来るのか、弊社のサイトの場合それをOFFにしても問題無いのかどうか、ちょっと調べてみます。
ありがとうございます。

このスプリクトでも，まだ未解決の問題があって，
横にあるメニューからアンカーに飛ばず場合は効果無しでした。
フッターやメニューにスクリプトを書いても動作は変わりませんでした。
スクリプトを理解して設置したわけでは無いので，どこかを直せば良いのかもしれません

動作を見ていると，アンカーで飛んだ場所がナビの下に隠れてしまうのがずれの原因のようですね。
ナビの幅だけページスクロールを調整して飛んでくれるといいのですが。

JAVAスクリプトというコメントを参考にサイト検索で探して実験してみました。
ページ冒頭にあるもくじから，タイトルに自動でつくアンカーに飛ばしている例です。（https://umihoshi.com/index.php?霧箱で見る放射線）

　この事例ではうまくいきましたので試してみてください。
元ネタは，
https://tam-tam.co.jp/tipsnote/html_css/post4776.html

です。ここに載っているJavaスクリプトをそっくりコピーしました。
後は#htmlと<script>タグで挟んだだけです。

（書き方）
アンカーを調節したいページに以下を書きます。全ページに適用したいならフッターに書いてください。

#html{{
<script>
$(function () {
var headerHight = 100; //ヘッダの高さ
$('a[href^=#]').click(function(){
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
$("html, body").animate({scrollTop:position}, 550, "swing");
return false;
});
});
</script>
}}

今回の問題とは、そぐわないかも知れませんが、

現在のhaikでは、アンカーが自動生成されない特に

cols(){{
}}
内では、アンカーが生成されないのです。

そこで、私の場合は、アンカーを意図的な位置に強制的に**等を使いアンカーを生成させてリンクをして

います。その場合は、白地であれば**#ffffff（フォント）として、そのバック色に合わせたカラーの色

と同色とする様に、***フォントを露見しない様にして胡麻化しています。

この問題については、この様な不便な編集状態を解決出来る様にアンカーをどの場面でも一日でも早く使

える様にhaikチームには、対応をしてほしいと願っておりますが、無駄なのでしょうか？

あいすのんさん

まず確認させていただきたいのですが・・・

＞出来れば見出しを記述した際に自動生成される[#abcd1234]のような、アンカーをそのまま使えると良いのですが。

これを使ったとしても飛び先がズレてて使いずらいということですか？
なので、ズレ解消のために任意な位置にアンカーを設置するが、それは大変だと。

そうだとすると、HAIKよりブラウザの仕様として致し方ない部分があるようです。
ナビを固定されているなら、それをOFFにすればマシで、実用上まあまあに。

他、HAIKではありませんがネットで調べるとCSSやJavaScriptで解消している例
があるようです。（すなわち、これはHAIK特有の問題でなく、そしてHAIKでも
解消の可能性ありかも）

これは私も悩みですが，現状ではもくじをつくって項目に飛ばすときに，アンカー位置を調節するしか対応法を知りません。
どなたかいいアイディアを出してくれるといいのですが。