今日は、WordPressブログでちょっと困っていたことが解決できたので、皆さんにシェアしたいと思います。
実はWordPressのアンカーリンク、みなさんはうまく使えていますか？
私の場合、記事内の目次から見出しにジャンプする時に、なぜか見出しが画面の上に隠れてしまって、すごく使いづらかったんです。
でも、ついに解決方法を見つけました！
しかも、たった1行のCSSを追加するだけなんです。
今日はその方法をお伝えしますね。
ワードプレスのアンカーリンクがずれる？
まず、こんな悩みがある人は必見です。
- 記事内の目次から見出しへジャンプすると、見出しが見えない
- 固定ヘッダーがあるせいで、ジャンプ先が隠れてしまう
- アンカーリンクの位置がズレて、どこにジャンプしたのかわからない
- プラグインを入れたくないけど、なんとかしたい
- バージョンアップの度に設定し直すのは面倒
実は、これらの問題は本当に簡単に解決できるんです。
しかも、サイト全体に一発で適用できる方法があります。
その方法というのが、WordPressのカスタムCSSに以下のコードを追加するだけ。
content:””;
display:block;
height:60px;
margin:-60px 0 0;
}
このコードを追加するだけで、アンカーリンクのジャンプ位置が調整されるんです。
私の場合は固定ヘッダーを使っていなかったので、heightとmarginの値を3remに変更して使っています。
固定ヘッダーがある場合
固定ヘッダーがある場合は、ヘッダーの高さに合わせて数値を調整するといいですよ。
それでは、具体的な設定方法を説明していきますね。
まず、WordPressの管理画面を開きます。
- ダッシュボードから「外観」→「カスタマイズ」を選択
- 「追加CSS」をクリック
- 上記のCSSコードをコピー＆ペースト
- 「公開」をクリック
これだけで完了です。
とても簡単ですよね？
なぜCSSを使うの？
このCSSが優れているポイントをいくつかご紹介します。
まず、:targetという疑似クラスを使っているので、サイト内の全てのアンカーリンクに自動的に適用されます。
次に、WordPressのバージョンアップをしても設定が消えません。
カスタムCSSは引き継がれるので、一度設定すれば安心です。
また、JavaScriptやPHPを使う方法と違って、各ページに個別にコードを書く必要もありません。
サイト全体に一括で適用できるんです。
コードの仕組み
ちなみに、このコードの仕組みについても少し説明しておきますね。
その要素の高さを設定することで、ジャンプした時の表示位置を調整しているんです。
これって、本当に素晴らしいアイデアだと思いませんか？
シンプルな方法なのに、こんなにうまく機能するなんて。
私の場合、このコードを見つける前は、JavaScriptやPHPでなんとかしようと苦労していました。
でも、それらの方法は、以下のような問題がありました。
- バージョンアップの度に設定し直しが必要
- 全ページに個別に設定が必要
- プログラミングの知識が必要
など、いろいろと面倒な点があったんですね。
それに比べて、このCSSを使う方法は本当にシンプル。
プログラミングの知識がなくても、コピー＆ペーストするだけで解決できます。
もし皆さんも同じような悩みを抱えているなら、ぜひ試してみてください。
きっと、ブログの使い勝手がグッと良くなると思います。
ワードプレスのアンカーリンクのずれについてのまとめ
最後に、この素晴らしい方法を見つけた時の私の気持ちを共有させてください。
長年悩んでいた問題が、こんなにもシンプルに解決できるなんて！
皆さんのブログ運営にも、この情報が役立てば嬉しいです。
最後までお読みいただきありがとうございました！