[ 解決済 ] サイドバーの上端固定優先で固定位置をピクセル単位で変更したい。

VWSとは フォーラム Lightning [ 解決済 ] サイドバーの上端固定優先で固定位置をピクセル単位で変更したい。

[ 解決済 ] サイドバーの上端固定優先で固定位置をピクセル単位で変更したい。

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

    Green
    参加者
    制作実績

    ■ WordPress のバージョン
    7.0

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

    ■ テーマの種類
    Lightning ( G3 )

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

    ■ スキンの種類
    Origin III

    ■ 期待する動作
    サイドバーの上端固定優先で固定位置をピクセル単位で変更したいのですが、どこかのファイルで変更することはできないでしょうか。デザインの都合上、調整したいのですが、ご教授どうぞよろしくお願いいたします。

    ■ 自分で試した事
    CSSなどで庁瀬仕様と思いましたができませんでした。

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

    ■ 実際の症状
    変化なし。top:40px;でサイドバーが固定されます。

    #127077

    Y.INABA
    参加者

    Lightningのサイドバー固定化処理はJavaScriptによって実現されており、スクロールすると自動的にサイドバー内にstyle属性が直書きされる形式となっております。
    https://github.com/vektor-inc/lightning/blob/4087addb4c66487a4447a7c360f5f964d6080bec/_g3/assets/_js/_sidebar-fixed.js

    上記は難読化前のファイルで、実際には以下ファイルが読み込まれています(他の難読化前JSファイルの内容も入っています)。
    https://github.com/vektor-inc/lightning/blob/4087addb4c66487a4447a7c360f5f964d6080bec/_g3/assets/js/main.js

    style属性直書きによるCSS指定は何よりも優先される事項のため、その他外部のCSSで指定することは不可能となっております。

    従って、本件でご希望いただいている調整をご希望ということでしたら、JavaScriptの処理に詳しい方に微調整をご依頼いただくなどの対応が必要となっており、かつJavaScriptの差し替え対応が必要になります。

    お考えいただいているよりも工数が多く発生するのは目に見えていますし、少なくとも有償にて有識者にご依頼いただいた方が良いかと思います。

    #127083

    やりたいことが具体的にはわからないのですが、
    なんとなく、VK Blocks Pro の固定表示ブロックが適していそうな気がします。

    固定表示(Pro版のみ)

    #127087

    Green
    参加者
    制作実績

    皆様、大変ありがとうございました。
    大変、参考になりました。
    少し検討してみたいと思います。
    ありがとうございました。

    #127117

    固定位置を下げるのでよければ、↓これでいけそうです。

    【想定】

    top: 40px; を top: 100px; 相当の位置にカスタマイズする。

    【手順①】

    ウィジェット サイドバー(共通上部) に 60px のスペーサーブロックを置き、
    追加 CSS クラス に sidebar-spacer と指定する。

    60px = 100px – 40px

    【手順②】

    以下の CSS を追加する。

    aside:has(.sidebar-spacer) {
        display: none; /* スペーサーを含むウィジェットを非表示 */
        margin-bottom: 0; /* ウィジェット下の余白をなしに */
    }
    
    /* 2カラムレイアウトでスクロールしたときにスペーサーを表示する */
    @media (min-width: 992px) {
      .header_scrolled .sub-section--col--two aside:has(.sidebar-spacer) {
        display: block;
      }
    }
    #127132

    Green
    参加者
    制作実績

    対馬様、お陰様で思うようなサイドバーの配置と動きになりました。
    大変ありがとうございました。
    感謝です!

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