どうも、あきらめない！がモットーのsolabotです。
ウェブサイトやブログを作成しているとアンカーが思った動きにならないときってありますよね！
そんなときにチェックすべき項目や思わぬ落とし穴を説明していきます。
この記事の索引- [spu popup=”1524″]HTML[/spu]
- [spu popup=”1638″]HTMLタグ[/spu]
- [spu popup=”1529″]リンク[/spu]
- [spu popup=”1499″]WordPress[/spu]
- [spu popup=”1725″]テーマ（WordPressテーマ）[/spu]
- [spu popup=”1633″]プラグイン[/spu]
追記：この記事は、2019年8月31日に公開しましたが、12/16に追記しています。
別のページへのアンカーリンクが効かないとき
もともとは、「ページ内リンク」が効かないときに見直すべき点を説明していましたが、ページ外へのアンカーリンクが効かないという声もあるので、追記します。
アンカーリンクは、ページ内だけでなく、遷移した移動先のページ内の特定の箇所に飛ばすことも可能となっています。
アンカーリンクは、ページ内だけでなく、他のページの特定の位置に飛ばすことも可能となっています。
方法は、通常のリンクを作って、そのまま「#ID名」を付け足すだけです。
通常のアンカーリンク
<a href=“#abc“>ジャンプ元のリンク文字</a>
別ページへのアンカーリンク
<a href=“https://ジャンプ先URL#abc“>ジャンプ元のリンク文字</a>
しかし、この別ページへのアンカーリンクがうまくいかず、別ページの上部に移動してしまうことがあるようです。
普通のリンクと同じ状態ですね。
これは、javascriptが原因の可能性があります。
サイト内に、「トップへ戻るボタン」を自作などで設置していないでしょうか？
ページを読み込んだ際に、このトップへ戻るボタンが一度実行されている可能性があります。
順序としては、アンカー位置へ移動→トップへ戻るという動きが、ページの読み込み時に、一瞬、または、裏側で起こっているからという可能性があります。
サイト内のjavascriptを停止して、アンカーリンクをクリックした時に成功すればこれが原因です。
これの解決策は、トップへ戻るボタンを辞めてしまうか、素直にプラグインを使う、もしくは、テーマ内に最初からトップへ戻るボタンが同梱されているテーマを選ぶ事です。
なぜそうなってしまったかはそれぞれ状況次第かもしれませんが、コードに一部間違いがあったままコピペしているか、そもそもページ読み込み時の最後に処理が行われるコードになっているかだと思われます。
私が使用しているテーマ「Cocoon」には、トップへ戻るボタンが最初から同梱されていて、別ページへのアンカーリンクも問題なく動作しています。
WordPressおすすめテーマは以下から
主な原因
アンカーを設定したのに効かない、飛ばない、ジャンプしないなど、うまくいかないときは主に以下の原因が考えられます。
- クリックする文字のIDに「＃」がない
- 移動先のタグに「＃」をつけてしまっている
- 「h1・h2・h3・h4」など見出しに設定すると駄目な場合がある
まずは、アンカー自体についてと、HTMLタグでアンカーを設定する方法を見て、原因と対策を突き止めていきましょう。
HTMLタグの「アンカー」とは
ウェブサイトやブログで出てくるアンカーは「アンカーリンク」の略でハイパーリンクの一種です。
アンカーとは、もともと船の錨（いかり）のことで、鎖でつないでおくという内容から、ウェブサイトやブログなどではアンカーの設定をしたリンクをクリックすると、指定した位置へジャンプできる仕組みのことです。
ユーザビリティ向上を目的に画面のスクロールをせずに指定の位置まで飛んでいくことができます。
アンカー設定方法
アンカーは、アンカーリンクというだけあって、リンクの設定をすることで指定の位置までジャンプすることが可能となります。
ジャンプするためのボタンとなる文字列や画像にリンクを設定する際、通常ならURLを指定するところ、「ID」を指定します。
IDの文字列は自由に設定が可能です。
通常のリンクを作成する場合は以下のようになります。
通常のリンク
<a href="http://xxx.com">リンクにしたい文字</a>
そしてアンカーリンクにしたいときは以下のようにジャンプ元とジャンプ先を設定します。
ジャンプ元になるリンク
<a href="#○○○">リンクにしたい文字</a>
ジャンプ先の文字
<div id="○○○">ジャンプ先の文字や画像などの要素</div>
このルールが守られないと意図したジャンプができません。
アンカーリンクが失敗する原因
ジャンプもとのリンクに記述の間違いがある。
原因
間違った記述
<a href="○○○">ジャンプ元の文字</a>
※○○○にIDとして任意の文字列を入力します。
「○○○」には任意の文字列を入れることでIDとしますが、<a>タグといわれるリンク専用のタグ側、つまりジャンプ元ではIDの文字列の前に「＃」を入れるのが決まりです。
対策
上記の例に沿って修正すると、以下のようになります。
正しい記述
<a href="#○○○">ジャンプ元の文字</a>
リンク専用タグの<a>タグを利用しますが、URLではなくて、「＃ID」を入力します。
ジャンプ先のタグに記述の間違いがある。
原因
間違った記述
<div id="#○○○">ジャンプ先の文字</div>
実質ジャンプ先にはすでにタグが存在しているので新たにジャンプ用にタグを作ると混乱する場合もあります。
対策
正しい記述
<div id="○○○">ジャンプ先の文字</div>
ジャンプ先のタグには「ID」は不要です。
見出しに設定している。
原因
間違った記述<h2 id=”○○○“>記事の見出し</h2>
「h1・h2・h3・h4」などの記事の見出しにするためのタグにアンカーを設定している場合、条件がそろうとアンカーが効かない、飛ばない、ジャンプしないという事が起きる場合があります。
ほかの機能との兼ね合いのせいという場合です。
WordPressなどではプラグインやテーマの設定によって、見出しを利用して自動的に目次を作ってくれる機能があります。
そのため、IDを自動で生成するという機能が、自身で設定したIDを上書きしてしまうなどして、目的の位置へのジャンプが不可能になる場合があるので注意が必要です。
対策
正しい記述例
<div id="○○○"></div>
<h2>記事の見出し</h2>
見出しのタグではなく、その前に、ジャンプ用のタグを用意してしまって、そこにIDを指定する。
※タグ自体は<div>でなくてもかまいません。
まとめ
アンカーリンクは、正しく使うととても便利な機能です。
身近なところでは、画面右下などに「TOPへ戻る」ボタンなどです。
アンカーを設定したのにうまくいかないというときは上記の例に沿って見直してみるといいと思います。
知らないと損をするアドセンスの裏技
アドセンスの自己クリックは"あれ"が一緒だからNGなんです。
この裏技を利用すれば誰でも簡単に好きなアドセンス広告から収益を得ることができます。
しかし、門外不出の丸秘テクなのでnoteにて7,800円で販売します。
普通ならnoteで7,800円は高いと感じると思いますが、値段設定にも理由があります。
アドセンスの報酬の受け取りが8000円到達から可能になり、そこに到達した時点で他にも「特典」があります。
アドセンスの初心者の方は合格できても中々収益が上がらない人が多いはず。
その8,000円到達までにモチベーションも下がりますよね。
さらに広告がクリックされるなんて運任せです。
しかし、その8,000到達までが運ではなく、自分の意思でコントロールできたらどうでしょう。
最速で収益を受け取ることが可能となります。
さらにこの裏技はアドセンス以外にもいくらでも使い道があります。
そのため、8,000円の報酬を受け取る頃には確実に8,000円以上の報酬となって返ってくるのでこの金額に設定しました。
絶対に損失は出ないのでお試しください。
そして、あくまでも口外は絶対に禁止です。
コメント