ページ内ジャンプのずれを CSS で補正する方法についての考察

これは WordPress に限った話ではないと思うのですが、WordPress の場合、ログイン状態では以下のようなバーが上の方に表示されます。

AccessMenuBarApps-5

ログインしていない状態では上の方のバーはなくなります。

AccessMenuBarApps-7

上の方のバーはいろいろな作業をする上でいろいろなページへアクセスしたりするのにはとても便利なのですが、ページ内リンクをさせた場合、ちょっと困ったことになるようです。たとえば、本来、このように表示させたいところ、

上の方のバーで隠れてしまう場合があるようです(便宜上、バーの色を半透明にしています)。

AccessMenuBarApps-8

これまで、ページ内ジャンプさせるとき(設定方法は記事「ページの途中にリンクジャンプさせる方法」参照)は、ジャンプさせる場所を意図的に上の方にずらしていたのですが、以下の記事によると、CSS の方で制御できるらしいので、

実際に試してみたところ、うまくいったので、その覚書です。

例えば、テーマ「Twenty Twelve 」で見出し h3 へページ内ジャンプさせる場合、以下の CSS を追加したら、

/* ページ内リンクの位置の補正(テーマ「Twenty Tweleve」、見出し3の場合) */
.logged-in .entry-content h3 {
margin-top: -20px;
padding-top: 37.1429px
}

以下のような感じで、バーに隠れることなくちゃんとページ内ジャンプさせることができました。

原理的には、ページ内ジャンプというのは、どうやらブロックレベル要素の上部が基準になっているらしく、padding-top でブロックを大きくしてやって、ページ内ジャンプの位置を見かけ上、下の方に移動してやって、でも、通常の表示だと隙間が大きくなるので margin-top でまた戻してやる、ということのようですが、正確なところはよくわかりませんし、もしかしたら、うまくいかないケースもあるのかもしれませんが、そのあたりは未検証です。

AccessMenuBarApps-9

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。