「TinyMCE Advanced」にアンカーというボタンがあります。これ、なに？どう使うの？と調べたら、なかなか便利なやつでした。
ひとつの記事の中で、特定の位置にリンクを貼ってページ内のある場所に移動させたい、という時に使う。
そういえば、これ、Wordでも出来ていない・・・(>_<)
エディタプラグイン「TinyMCE Advanced」をインストールしていれば簡単、というのでやってみます。
例文が必要なので、とりあえずこの歌詞を使わせてもらいます。
1 飛ばしたい先のテキストにリンクを設定
テキストのリンクを張りたいところ、つまり「飛び元」ところを選択。
「れんげの花に」ここから飛ぶことにします。
この部分を選択して 「リンクの挿入」ボタンをクリック
ここに任意の英数字を設定する。
#a とか #123 とか。werとか、半角英数字ならなんでも。
- ポイントは必ず頭に＃をつけること。
- 複数リンクを張るときは同じものにしない。そりゃそうよね。バッティングしちゃうから。（笑）
ん！？
解説にあるリンク窓とちがうぞ。これは普通にURLリンクじゃないかいな！？
何度やっても同じ。仕方がないからこのURLのとこにいれちゃえ！
で、テキストがリンク貼った状態、青に変化しましたよ。
春の小川は さらさら行くよ
岸のすみれや れんげの花に
すがたやさしく 色うつくしく
咲けよ咲けよと ささやきながら
春の小川は さらさら行くよ
えびやめだかや 小ぶなのむれに
今日も一日 ひなたでおよぎ
遊べ遊べと ささやきながら
次に
2. リンク先にアンカーを設定する
つぎに飛び先、←これがアンカーということらしい これを設定します。
この記事の文頭の単語、「TinyMCE Advanced」にします。
この部分を選択して、アンカーボタンをクリック
ここに先ほどの＃●の＃を外したものを入れます。
これでうまく行くかな。
だめ！ 上には行くけど、「TinyMCE Advanced」の数行下までしかいかない。
なんでやね～ん！
HTMLのコードを確認しても間違っていないのに。
【補足】なぜリンクがズレるのか
やみくもw に検索していたら見つけた。
原因は多くの場合、CSSを使ったレイアウトに起因します。ページ内リンクは、この色を付けた領域の先頭が、ウィンドウの上枠に一致するようににジャンプします。これを解決するのはそもそも要素のレイアウトに影響してしまうためすこし厄介ですが、いくつか迂回策があります。
おすすめの解決策としては、
- ページ内リンク専用の要素を追加するんです。
- スムーズにスクロールする「Javascriptプラグイン」を利用する。
jQuery: Smooth-scroll (Github)
う～む、そこまでは出来ないレベルです・・・。
しばらく様子見で・・・。
数行下に移動することを考慮して、アンカーを数行上に設定すれば良いのかも。ということで誤魔化しています。
補足
この記事はあまり良く書けていませんので、こちらの方が少しはわかりやすいかも。
