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

VWSとは フォーラム Lightning [ 解決済 ] ヘッダーの内でfacebookのアイコンを追加したい

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

  • このトピックには5件の返信、2人の参加者があり、最後にwebLinxにより2週前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #66105

    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はフォーラムライセンスが有効のユーザーにのみ表示されます

    #66123

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

    #66135

    webLinx
    参加者

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

    #66136

    webLinx
    参加者

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

    #66142

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

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

    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

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

    #66294

    webLinx
    参加者

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

6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • このトピックに返信するにはログインが必要です。