サルでもできるページ内リンク1~TinyMCE Advancedでリンク

ページ内で跳ばしたい!

わたしはいつも記事を「だらだら」と書いています。

ブログでは、別サイトやブログ中の別記事へのリンクはどうしても必要だし、ビジュアル編集画面のリンクボタンでカンタンに編集できることなのでそうしてきました。

でも一方で、同じ記事内でのリンクは、必要はあるんですけど、スクロールすればなんとかなるということもあったので、いままで放置してきました。

でも最近、Googleアカウントの電話番号認証回避の記事を何回も手入れしてて、思ったんですよね。

「自分的には、記事の途中に、だらだらと経緯を書きたい。

でも読んでる人にしたら、とりあえず最後の、対策の要点だけ見たいはず。

自分でスクロールしてそこ見てね”じゃ、いかにも不親切だ…。

と・ば・し・た・い!」ってね。

というわけで、やっとのことではありますが、 ページ内リンクの方法が知りたくなって、調べてみました。

「見出しの研究」以来の大仕事?ですw

調べてみた…

解説はたくさんありました。

たいていはこのように書いてあります。

テキストモードにする→リンク元にHTMLで <a href=”#link”>リンク元</a> のような記述をし、リンク先に#を除いた同じ記号でアンカーを打つ…

…そのとおり記述した(つもり)ですが、ぜんぜん跳びません。

砂時計が回って、記述が消えてしまいます。

何か間違えているようです。

記述の方法も、こうでもいいし、ああでもいいとか。

本文だとこうで、見出しに跳ばす場合はこうとか。

サイトによって多種多様な説明があって、わたしのようなしろうとにはなにげに難解です。

なんでもいいから、まずは1回「成功体験」したいのに、ぜんぜんダメです。なぜだ??

疑問に思ったこと1

だいたい、いちいちテキストモードに変えてHTMLで記述とかが、そもそも現実的じゃない。

今までもビジュアルモード専門なのに、そんなめんどくさいこと、わたしがこれから日常的にやっていける気がしない。

パソコンをはじめた頃に、アイコンやマウスがあるのに、パソコン大先輩に限ってさかんに「F2+シフトキーで…」とか昔のやり方にこだわって ことさらわかりづらく教えられた。

それをを思い出したわw

疑問に思ったこと2

ページ内リンクは常に必要なことなんだから…、ページ外リンクみたいに、ビジュアルモード編集画面のアイコンでなんとかならないの?

ほんとに、HTML書くなんて正攻法しかないの??

さらに調べてみたら

WordPressの編集プラグイン、TinyMCE Advancedビジュアルモードのままでやる方法の記事がたった一つ見つかりました。!

【Wordpress】ページ内リンクとアンカーの設定方法

「週三日だけ働く」(YUMEさん)より

いいですね~

これは非常に、よさげですw

これならわたしにも、できそうな予感です。

とりあえず文章のリンク元から文章のリンク先へ、このとおりサルマネしてみましょう。

ページ内リンク実験

リンク元を作ります

リンク元

「リンク元」と文字を書いてドラッグし、リンク挿入アイコン(鎖のようなヤツ)を押す

そうして、URLに「#a」と入力。

リンク文字列にははじめから「リンク元」と入っています。

リンク先を作ります

リンク先

「リンク先」と文字を書いてドラッグし、挿入→アンカー

「リンク先」の文字前に「⚓(いかり)」マークが付きました。

さて、これでリンクした気がしますが?…

結果

編集画面で「リンク先」を押すと一瞬砂時計が回ったと思ったら、編集画面のトップがでておしまいです。

「リンク先」に跳んだ様子はありません。失敗?…

念のために編集画面ではなく、スマホとパソコンの「日記」画面でもやってみます。

するとなんと…ちゃんとリンクするではありませんか!

①スマホ画面:きっちり「リンク先」からの表示に跳ぶ。大成功! 100点

②パソコン画面:「リンク先」の”次の行”からの表示になります。??微妙w  80点

編集画面で遷移が確認できない理由はわかりませんが、対外的には反映しているようです。

あとは、パソコン画面で意図しない位置に飛ぶ理由と、「リンク先」が見出しの場合どうするのかを、おいおい研究していきたいと思います。

わたしでもカンタンにページ内リンクできる方法を書いてくださったYUME様に感謝!

m(_ _)m

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です