このサイトを運営しているWりっちゃんです。
Wりっちゃんはいま、複数のブログを運営しています。
どんなブログを運営しているかはこの記事で紹介していますので合わせて確認してください。
そして１年間のリアルな収支報告もこの記事で書きました。
このサイトはロリポップ！
を使って運営しています。
クリックで飛ばしたい場所まで飛ばす方法
リンクとアンカー設定によって、クリックした際に、予め設定した飛ばしたい場所まで飛ばすことができるようになります。
例えば、サイトの一番下まで表示した後に、一番上に戻すのは面倒なので、リンクとアンカーを設定しておくと便利です。
最近はWordPressのテンプレートに最初から組み込まれている場合が多いように思いますが、手動でも飛ばしたい場所まで飛ばすように仕込むことも可能です。
ここではその方法を記載していきます。
設定のながれ
作業は大きく二つです。
- もくじ内のテキストにページ内リンクを設定する
- ページ内リンク先にアンカーを設定する
エディタプラグインの「TinyMCE Advanced」を入れておいた方が作業は簡単です。
正直、初見ではぱっと見どう使えばいいかわかりづらいですが、一度覚えれば大丈夫です！
もちろん、HTMLで直接書く方法もありますよ。
HTMLで書くのが抵抗なければそれでも十分かと思います。
２．もくじ内のテキストにページ内リンクを設定する
①リンクを張りたいテキストを選択
②のボタンをクリック
次にページ内リンク設定しますが、ここでルールがいくつか
・頭に＃をつけること
・同一ページ内で同じ名前はつけない
３．ページ内リンク先にアンカーを設定する
次にアンカーを置きたい場所で
①をクリック、②で先ほど設定したIDを記入します。
先ほどのページ内リンク設定では「#a」としたので、アンカーは「a」になりますね
これで、選択したテキストをクリックするとアンカー”a”の場所まで飛ばすことができるようになりました。
コメント