資格と開業の知識0の常勤会社員が
爬虫類ブリーダーになるには?
令和2年以降の動物取扱責任者の認可と開業
サイト運営

同じページ内でワープする方法(アンカーリンク)【サイト運営】

『あにまるハンド。』です。

長文ブログで、目的の項目までジャンプしたいって思うことありますよね。画面が高速でシュルーってスライドするのもかっこいいし。

この機能をアンカーリンクと呼ぶみたいです。本ブログでもアンカーリンクを使用したく設定方法を調べたので共有です。

私の環境はWordPress JIN Ver.2.750をベースに使用しており、プラグイン「ClassicEditor」は設定済です。さぁ、みんなでシュルーッと体験。レッツシュルー

私はこちらのサーバー使っています。
アフィリエイト目的なら「A8.net」を先に登録してセルフバックがいいのでは?と思いました。

アンカーリンクとは

はじめに、アンカーリンクはハイパーリンクやリンクと同一です。特にホームページの指定の場所に瞬時に移動するリンクを示す言葉で使われるように思います。飛びたい文字列に「アンカー」を設定することで同一ページ内でページを切り替えることなく移動ができます

 

アンカーリンクの簡単設定TinyMCE Advanced

ネットで調べると、HTMLのテキストに….<XXX>….をとの情報があるものの敷居が高い。ビジュアルエディタ(旧エディタ)で何とかできないか探したところバズ部様の記事を見つけました。

ビジュアルエディタ

 

記事に従い「TinyMCE Advanced」のプラグイン設定を行ったところ、、、

あっと言う間にできた!

設定も楽だし、後述のビジュアルエディタの調整を行うことでブログ作成時の使い勝手もいいまさにシュルーレアリズム革命!終わりなき革命がそこにある

 

・・・。

使い方は簡単で、以下の通り

①「TinyMCE Advanced」のインストールと有効化

②編集画面で「ジャンプ先の文字列」にカーソルして「アンカー」ボタンを押す

③表示されるリンク枠に任意の半角文字列を入力

「ジャンプ元の文字列」にカーソルして「リンク」ボタンを押す

⑤表示されるリンク枠に「#任意の半角文字列」を入力で設定完了!

①「TinyMCE Advanced」のインストールと有効化

バズ部さんの記事を参考しながら設定した。わかりやすく、詰まるところはなかった。

 

 

②投稿の編集画面で「ジャンプ先の文字列」にカーソルして「アンカー」ボタンを押す

打ち込んだ文字にカーソルを当てて、アンカーを選択します。私は文字列を右クリック押しながらマウス移動のハイライトで行っています。

③表示されるリンク枠に任意の半角文字列を入力

任意になりますが、自分でわかりやすいものがいいと思います。問題がなければ文字列の前に⚓(アンカー)マークが表示されます。

「ジャンプ元の文字列」にカーソルして「リンク」ボタンを押す

ジャンプ元の設定は通常のハイパーリンクと同様です。

 

 

⑤表示されるリンク枠に「#任意の半角文字列」を入力で完了!

URLを打ち込む場所に先ほど決定した、任意の文字列の先頭に「#」を入力します。

 

TinyMCE Advanced」でビジュアルエディタの調整も簡単に可能

とても快適なTinyMCE Advanced のプラグインで一つ気をつけることがある。それはデフォルトでは「スタイル」がツールバーから無くなることである。

テキストエディターのHTMLに打ち込むことで対応は可能だけど、私はビジュアルエディターのプルダウン選択で便利に使っていたので、かなりこまった。

しかし、これもバズ部さんの記事で解決した。エディターのツールバーを調整できるのだ!

 

快適〜。ついでにアンカーもツールバーに設定してより使い勝手が良くなった

 

あなたのブログにもシュルー革命を。

トップに戻る

COMMENT

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

CAPTCHA