実践記録 029◆WordPressでページ内リンクでジャンプした位置がずれる。

ネットで稼ぐ日々の実践記録
総合メニュー
ブログ概要稼ぐ準備稼ぎ方実践記録オススメHELPサイトマップ

ページ内のh2やh3,h4のタイトル先にジャンプした時、それらのタイトル表示位置がずれてタイトルが読みづらいと気があるのcssだけを使って修正しました。

 日々の実践記録                 

 「日々の実践記録の目次」へ戻る

WordPressでページ内タイトルへ移動した時位置がずれる解決策

ページ内のh2やh3,h4のタイトル先にジャンプした時、それらのタイトル表示位置がずれてタイトルが読みづらいと気があるのcssだけを使って修正しました。

具体的な対応方法

私が行った具体的な対応方法は、テーマエディターに下記のCSSを追加

下記のCSSをスタイルシートの最後の行に追加しておきます。

そして、ページ内のh3,やh4のタイトルに設定するアンカーの値をa01~a10又はa01-01~a01-10、a02-01~a02-10、a03-01~a0310、・・・a10-01~a10-10を使用することに決めておき移動させたいページ内タイトルにこれらのアンカー値を設定します。

(コピー可能↓↓↓)

/*********************************************************************************
**外部ページからページ内リンク先に飛ばしたとき位置がずれる(ヘッダ固定時)↓↓↓↓
*********************************************************************************/

#a01, #a01-01, #a01-02, #a01-03, #a01-04, #a01-05, #a01-06, #a01-07, #a01-08, #a01-09, #a01-10{
padding-top:100px;
margin-top:-100px;
}

#a02, #a02-01, #a02-02, #a02-03, #a02-04, #a02-05, #a02-06, #a02-07, #a02-08, #a02-09, #a02-10{
padding-top:100px;
margin-top:-100px;
}

#a03, #a03-01, #a03-02, #a03-03, #a03-04, #a03-05, #a03-06, #a03-07, #a03-08, #a03-09, #a03-10{
padding-top:100px;
margin-top:-100px;
}

#a04, #a04-01, #a04-02, #a04-03, #a04-04, #a04-05, #a04-06, #a04-07, #a04-08, #a04-09, #a04-10{
padding-top:100px;
margin-top:-100px;
}

#a05, #a05-01, #a05-02, #a05-03, #a05-04, #a05-05, #a05-06, #a05-07, #a05-08, #a05-09, #a05-10{
padding-top:100px;
margin-top:-100px;
}

#a06, #a06-01, #a05-02, #a06-03, #a06-04, #a06-05, #a06-06, #a06-07, #a06-08, #a06-09, #a06-10{
padding-top:100px;
margin-top:-100px;
}

#a07, #a07-01, #a07-02, #a07-03, #a07-04, #a07-05, #a07-06, #a07-07, #a07-08, #a07-09, #a07-10{
padding-top:100px;
margin-top:-100px;
}

#a08, #a08-01, #a08-02, #a08-03, #a08-04, #a08-05, #a08-06, #a08-07, #a08-08, #a08-09, #a08-10{
padding-top:100px;
margin-top:-100px;
}

#a09, #a09-01, #a09-02, #a09-03, #a09-04, #a09-05, #a09-06, #a09-07, #a09-08, #a09-09, #a09-10{
padding-top:100px;
margin-top:-100px;
}

#a10, #a10-01, #a10-02, #a10-03, #a10-04, #a10-05, #a10-06, #a10-07, #a10-08, #a10-09, #a10-10{
padding-top:100px;
margin-top:-100px;
}

/* ◆**外部ページからページ内リンク先に飛ばしたとき位置がずれる(ヘッダ固定時)↑↑↑↑◆ */

これで、アンカー値の設定時には、a01~a10又はa01-01~a01-01・・・a10-10などの値を設定するだけで問題を解決できます。

木のナビゲーションボタン「Next」

➤ next 実践記録 030◆ブログ全体の構造完成(ページタイトルと各ページの見出し)

 「日々の実践記録の目次」へ戻る

====================

初心者はネットで稼ぐために何をすべきか。

総合メニュー
 Top (ブログの概要) 
ネットで稼ぐための準備
ネットで稼ぐ稼ぎ方
  日々の実践記録
オススメ情報
HELP・お助け情報

「ブログの概要」へ戻る

====================

シェアする

フォローする

トップへ戻る