[ 解決済 ] ヘッダーの内でfacebookのアイコンを追加したい

[webLinx]

■ WordPress のバージョン
6.0

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ テーマのバージョン
8.17.0

■ スキンの種類
Pale II

■ スキンのバージョン
8.1.9

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
ヘッダーの<div class=”siteHeader_sub”>内でfacebookのアイコンを追加したいです。

■ 自分で試した事

SNSボタンをヘッダー部に設置したい

こちらの記事の内容をためしてみましたが、
画面の大きさを変えることにより、表示位置がずれるため、固定表示させたいです。。

■ 症状が発生するブラウザ
Chrome

■ 実際の症状
表示はできておりますが、画面の大きさを変化させると、Facebookアイコンのみ固定され、
レイアウトが崩れています。

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[対馬 俊彦]

position: absolute; を使うときは、
親要素に position: relative; を指定すると調整しやすくなることが多いです。

[webLinx]

このカスタマイズを行うにあたり、どこに親要素をつければいいのでしょうか？

[webLinx]

ちなみにsiteHeader_subにposition: absolute;をつけてみましたが、レイアウトがさらに崩れてしまいました。。。
現在、一時的にFacebookアイコンは表示しておりませんが、ご回答のほどよろしくお願いいたします。

[対馬 俊彦]

どこに親要素をつければいいのでしょうか？

親要素をつける(追加する)必要はありません。

Facebook アイコンを置いた場所を囲んでいる要素が親要素です。

いまアイコンがないので、正確にはわかりませんが、
たぶん親要素は <div class="navbar-header">～</div> だと思います。

siteHeader_subにposition: absolute;をつけてみましたが

親要素に指定するのは、absolute ではなく、relative です。

たぶん、こんなかんじになるのではないかと….

.navbar-header {
  position: relative;
}

位置指定の考え方は以下のページの「子要素にabsoluteを指定した際の動き方」を見てください。

https://www.itra.co.jp/webmedia/what-is-position.html

現状が「ウィンドウが基準になる場合」になっていて位置指定がやりづらいので、
「親要素が基準になる場合」のやり方に変えると楽になる、ということです。

[webLinx]

ご回答いただきました内容とmedia queryを組み合わせ、無事表示することができました。
ありがとうございました。

[投稿者]

投稿