【WordPress.com】Markdown 記法の注釈リンクの位置を補正するための CSS

以前、記事「ページ内ジャンプのずれを CSS で補正する方法についての考察 | comemo」において、ページ内リンクのずれを CSS で補正する方法について検討しましたが、その応用編として、Markdown 記法の注釈リンクの位置を補正するための CSS について考えてみました。

以下の CSS を追加すると

注釈リンクをクリックしたときに上の方にあるバーに隠れたりすることがなくなります。

AccessMenuBarApps-72

なお、Markdown 記法を使う際には、「設定」→「投稿設定」の「投稿とページ内で Markdown 記法を使う。」のところにチェックを入れてください。

AccessMenuBarApps-73

以下、Markdown 記法の注釈のテスト用の例文です。記事にコピペするなどして使ってみてください。

CSS の作成にあたり、iPad 等での場合分けを行っていますが、これは、上の方のバー等の幅がパソコンとかと異なっていると目視判断したからであって 1 、大きめに調整すれば場合分けの必要はないかもしれません。

skitched-20140322-164951


  1. 正確性が要求される場合には、Safari の Web インスペクタ機能等で確認可能です。 

 

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

WordPress.com ロゴ

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

Google フォト

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

Twitter 画像

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

Facebook の写真

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

%s と連携中

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