総合メニュー | ||||||
ブログ概要 | 稼ぐ準備 | 稼ぎ方 | 実践記録 | オススメ | HELP | サイトマップ |
日々の実践記録
|
--- このページの目次 ---
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 実践記録 030◆ブログ全体の構造完成(ページタイトルと各ページの見出し)
|
====================
初心者はネットで稼ぐために何をすべきか。
総合メニュー |
Top (ブログの概要) |
ネットで稼ぐための準備 |
ネットで稼ぐ稼ぎ方 |
➤ 日々の実践記録 |
オススメ情報 |
HELP・お助け情報 |
====================