[ 解決済 ] サイドバーを常時表示にしたい
[ 解決済 ] サイドバーを常時表示にしたい
- このトピックには16件の返信、5人の参加者があり、最後に
により1年、 2ヶ月前に更新されました。
-
投稿
-
■ 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
パスワード保護■ 期待する動作
ヘッダー非表示
ページヘッダー非表示
パンくずリスト非表示
トップページスライドショー非表示の状態で、サイドバー（共通上部）のコンテンツを、ページを表示した時点から表示したい
■ 自分で試した事
１）サイドバーに表示したいコンテンツを、サイドバー（トップページ）、サイドバー（共通上部）、サイドバー（共通下部）に移動して、改善するか確認しましたが、どの場合でもページを開いた時点では非表示２）サイドバーの位置（PC閲覧時）を、下端固定優先、上端固定優先に設定しても状況は変わりません。
３）サイドバーを固定しない に設定するとページを一番下までスクロールするまでコンテンツを表示しません。
４）テーマ・プラグインの更新
５）関連しそうなプラグインを確認→関連しそうなプラグインはありませんでした。
６）インターネットの情報を調査
■ 症状が発生するブラウザ
Safari、Chrome■ 実際の症状
・ページを開いたとき、サイドバーが表示されず、固定ページのみ表示される（スクショ１枚目）
・わずかに上にスクロールするとサイドバーが表示される（スクショ２枚目）・自分で試したことの２）と３）の現象から、サイドバーのコンテンツの最上部にスペースが
存在しているように思われますが、そのような設定は見当たりません。■ その他特記事項
TOPページでも固定ページでも同じ症状になります。１）サイドバーに表示したいコンテンツを、サイドバー（トップページ）、サイドバー（共通上部）、サイドバー（共通下部）に移動して、改善するか確認しましたが、どの場合でもページを開いた時点では非表示
２）サイドバーの位置（PC閲覧時）を、下端固定優先、上端固定優先に設定しても状況は変わりません。
３）サイドバーを固定しない に設定するとページを一番下までスクロールするまでコンテンツを表示しません。
考えられる原因は以下のとおりです。
①カスタム HTML ウィジェットなので中無は空白に見えても実は開業が多数あるウィジェットが存在する
②何らかの原因でCSSでサイドバーの margin-top が大きな値になっているいずれにしてもブラウザの開発者ツールを見てみないとわかりません。
該当部分を 右クリック ⇒ 検証 を押すことで起動するので試してみてください。弊社環境で再現しないのと他のユーザーの方からも同様の報告があがっていないため、
該当URLか、同じ症状が発生するテストサイトのURLがあると確認しやすいです。連投すみません。
どうやら、サイドバーとメインウインドウの幅を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);
}
}よろしくお願いします。
お世話になっております。
クラス名が違っていたり、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を共有 という形になりますうなこ様
早速のご回答ありがとうございます。
記載いただいたコードを追加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どうぞよろしくお願いいたします。
CSSを貼り間違えました。
貼り付けたCSSはこちらです。/*幅を調整*/
@media (min-width: 992px){
.main-section–col–two {
width: 82.5%;
}
.sub-section–col–two {
width: calc(17.5% – 2rem);
}
}横から失礼します。
サイドバー表示不具合の直接の原因ではないかもしれませんが、
貼り付けた 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 として貼り付けてみたらうまくいくかもしれません。
対馬様、うなこさま
CSSを書き換えたところ、ページを開いた時にサイドバーが隠れる問題はひとまず解決しました。
ありがとうございました。ただ、サイドバー（共通上部）が、ページを開いた時は画面上端に接しています（添付1枚目）が、
わずかでも下にスクロールすると、40〜50px程度下に移動して固定表示される（添付2枚目）現象が出ています。
一旦移動すると画面を上下にスクロールしても、添付2の状態を保ちます。何か解決方法があれば、ご教示お願いします。
サイドバーの位置（PC閲覧時）を、下端固定優先、上端固定優先のいずれに設定しても
状況に変化はありませんでした。サイドバーを固定しない にしてみたらどうなりますか？
- このトピックに返信するにはログインが必要です。
