[ 解決済 ] サイドバーを常時表示にしたい

VWSとは フォーラム Lightning [ 解決済 ] サイドバーを常時表示にしたい

[ 解決済 ] サイドバーを常時表示にしたい

15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • 投稿者
    投稿
  • #73413

    博之上田
    参加者

    ■ WordPress のバージョン
    WordPress 6.1.1

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

    ■ テーマの種類
    Lightning ( G3 ) + Lightning G3 Pro Unit

    ■ テーマのバージョン
    バージョン: 15.5.1

    ■ Pro Unit のバージョン
    バージョン 0.23.4

    ■ スキンの種類
    Origin III

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

    ■ プラグインの種類・バージョン
    All-in-One WP Migration
    Blocks Animation: CSS Animations for Gutenberg Blocks
    Category Order and Taxonomy Terms Order
    Contact Form 7
    Flexible Table Block
    Just Highlight
    Lightning G3 Pro Unit
    MaxButtons
    UpdraftPlus – バックアップ/復元
    VK All in One Expansion Unit
    VK Block Patterns
    VK Blocks Pro
    VK Link Target Controller
    VK Post Author Display
    VK Video Block Pro
    WP Multibyte Patch
    パスワード保護

    ■ 期待する動作
    ヘッダー非表示
    ページヘッダー非表示
    パンくずリスト非表示
    トップページスライドショー非表示

    の状態で、サイドバー(共通上部)のコンテンツを、ページを表示した時点から表示したい

    ■ 自分で試した事
    1)サイドバーに表示したいコンテンツを、サイドバー(トップページ)、サイドバー(共通上部)、サイドバー(共通下部)に移動して、改善するか確認しましたが、どの場合でもページを開いた時点では非表示

    2)サイドバーの位置(PC閲覧時)を、下端固定優先、上端固定優先に設定しても状況は変わりません。

    3)サイドバーを固定しない に設定するとページを一番下までスクロールするまでコンテンツを表示しません。

    4)テーマ・プラグインの更新

    5)関連しそうなプラグインを確認→関連しそうなプラグインはありませんでした。

    6)インターネットの情報を調査

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

    ■ 実際の症状
    ・ページを開いたとき、サイドバーが表示されず、固定ページのみ表示される(スクショ1枚目)
    ・わずかに上にスクロールするとサイドバーが表示される(スクショ2枚目)

    ・自分で試したことの2)と3)の現象から、サイドバーのコンテンツの最上部にスペースが
     存在しているように思われますが、そのような設定は見当たりません。

    ■ その他特記事項
    TOPページでも固定ページでも同じ症状になります。

    Attachments:
    You must be logged in to view attached files.
    #73416

    DRILL LANCER
    モデレーター

    1)サイドバーに表示したいコンテンツを、サイドバー(トップページ)、サイドバー(共通上部)、サイドバー(共通下部)に移動して、改善するか確認しましたが、どの場合でもページを開いた時点では非表示

    2)サイドバーの位置(PC閲覧時)を、下端固定優先、上端固定優先に設定しても状況は変わりません。

    3)サイドバーを固定しない に設定するとページを一番下までスクロールするまでコンテンツを表示しません。

    考えられる原因は以下のとおりです。

    ①カスタム HTML ウィジェットなので中無は空白に見えても実は開業が多数あるウィジェットが存在する
    ②何らかの原因でCSSでサイドバーの margin-top が大きな値になっている

    いずれにしてもブラウザの開発者ツールを見てみないとわかりません。
    該当部分を 右クリック ⇒ 検証 を押すことで起動するので試してみてください。

    #73421

    弊社環境で再現しないのと他のユーザーの方からも同様の報告があがっていないため、
    該当URLか、同じ症状が発生するテストサイトのURLがあると確認しやすいです。

    #73457

    博之上田
    参加者

    該当部分を 右クリック ⇒ 検証 を押した結果を添付します。
    よろしくお願いいたします。

    #73458

    博之上田
    参加者

    アップロードに失敗したので再送します。

    #73460

    博之上田
    参加者

    ソースをテキストファイルで添付しようとしましたが、「このファイルタイプをアップロードする権限がありません。」と表示されてアップロードできません。
    なにか良い方法はないでしょうか。

    #73461

    博之上田
    参加者

    連投すみません。
    どうやら、サイドバーとメインウインドウの幅をCSSで変更していたのが原因のようです。
    一旦、該当のCSSを削除したら、斉唱に動作しました。

    やりたいことは、サイドバーの幅を185px、メインページの幅を915pxに固定したいので、
    幅を%に置き換えて、以下のCSSを記載していますが、何か間違っているでしょうか。

    /*サイドバー 幅 */
    @media (min-width: 992px) {
    /*メインセクション*/
    .main-section–col–two {
    width: 83.3%;
    }
    /*サイドバー*/
    sub-section–col–two {
    width: calc(16.7% – 2em);
    }
    }

    よろしくお願いします。

    #73463

    うなこ
    モデレーター

    お世話になっております。

    クラス名が違っていたり、calcの計算のマイナスが全角になっているようです。

    クラス名は以下になります。

    /*幅を調整*/
    @media (min-width: 992px){
    .main-section–col–two{
    width: 82.5%;
    }
    .sub-section–col–two {
    width: calc(17.5% – 2rem);
    }
    }

    【テキストファイルが添付できない件につきまして】
    error.txt ファイルがアップできないようですので、
    お手数ですが、firestorage や おくりん坊 などのファイル転送サービスにテキストファイルをアップしていただき、URLを共有 という形になります

    #73484

    博之上田
    参加者

    うなこ様
    早速のご回答ありがとうございます。
    記載いただいたコードを追加CSSにコピペしたところ、なぜかCSSが効きませんでした。

    もう一度ソースを見直したところ、クラス名が違っていたので、以下のように修正したところ
    幅は変わりました。

    /*幅を調整*/
    @media (min-width: 992px){
    .main-section–col–two {
    width: 82.5%;
    }
    .sub-section–col–two {
    width: calc(17.5% – 2rem);
    }
    }

    ただ、わずかにスクロールしないとサイドバーが表示しないという不具合は解消していません。

    ソースを以下のURLに保存しましたので、大変お手数ですが、確認いただけないでしょうか。
    https://okurin.bitpark.co.jp/d.php?u=7b32dB755ojRmeP

    どうぞよろしくお願いいたします。

    #73485

    博之上田
    参加者

    CSSを貼り間違えました。
    貼り付けたCSSはこちらです。

    /*幅を調整*/
    @media (min-width: 992px){
    .main-section–col–two {
    width: 82.5%;
    }
    .sub-section–col–two {
    width: calc(17.5% – 2rem);
    }
    }

    #73492

    横から失礼します。

    サイドバー表示不具合の直接の原因ではないかもしれませんが、
    貼り付けた CSS に入力した文字がまだ間違っているように見えます。

    添付画像をご参照ください。

    赤矢印で示した部分の文字が正しくないようなので、CSS を修正してみてください。

    青矢印で示した文字を緑矢印で示した位置にコピー(入力)すれば正しい表記になります。

    【以下、追記です】

    このフォーラムではマイナス「-」を2つ並べて書くと自動的に違う文字になるんですね。
    そのことに気づかずに投稿してしまい、すみませんでした。

    だとすると…

    .main と .sub で始まるクラス名は正しく CSS に入力されているかもしれません。

    calc の数式で指定されている「-」を修正するだけでいいかもしれません。

    【2つめの追記です】

    以下のように ↓ コードで書いたら文字がそのまま表示されています。

    @media (min-width: 992px){
    .main-section--col--two {
    width: 82.5%;
    }
    .sub-section--col--two {
    width: calc(17.5% - 2rem);
    }
    }

    これを CSS として貼り付けてみたらうまくいくかもしれません。

    • この返信は1年、 4ヶ月前に対馬 俊彦が編集しました。
    • この返信は1年、 4ヶ月前に対馬 俊彦が編集しました。
    Attachments:
    You must be logged in to view attached files.
    #73499

    博之上田
    参加者

    対馬様、うなこさま
    CSSを書き換えたところ、ページを開いた時にサイドバーが隠れる問題はひとまず解決しました。
    ありがとうございました。

    ただ、サイドバー(共通上部)が、ページを開いた時は画面上端に接しています(添付1枚目)が、
    わずかでも下にスクロールすると、40〜50px程度下に移動して固定表示される(添付2枚目)現象が出ています。
    一旦移動すると画面を上下にスクロールしても、添付2の状態を保ちます。

    何か解決方法があれば、ご教示お願いします。

    Attachments:
    You must be logged in to view attached files.
    #73502

    DRILL LANCER
    モデレーター

    2)サイドバーの位置(PC閲覧時)を、下端固定優先、上端固定優先

    この設定が効いているのが原因と思われます。この部分を変えてみてください。

    #73511

    博之上田
    参加者

    DRILL_LANCER様
    コメントありがとうございます。
    サイドバーの位置(PC閲覧時)を、下端固定優先、上端固定優先のいずれに設定しても
    状況に変化はありませんでした。

    #73512

    サイドバーの位置(PC閲覧時)を、下端固定優先、上端固定優先のいずれに設定しても
    状況に変化はありませんでした。

    サイドバーを固定しない にしてみたらどうなりますか?

    Attachments:
    You must be logged in to view attached files.
15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • このトピックに返信するにはログインが必要です。