position:rerative を削除したい

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

    キタジマさん、初めての質問になりますが、説明不足等ありましたら申し訳ございません。

    【お使いの Snow Monkey のバージョン】15.8.0
    【お使いの Snow Monkey Blocks のバージョン】バージョン 12.3.1
    【お使いの Snow Monkey Editor のバージョン】バージョン 6.1.0
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】https://ninikokoji.com/demo/

    ### 実現したいこと

    見出し(診療案内、診療日時のご案内などなど)を、各セクションの上部の線上に半分乗るようにしたい。画像添付してある「十万山クリニックとは」「クリニックからのお知らせ」の見出し部分のようなイメージです。

    ### 発生している問題

    .smb-accordion__item__body>*, .smb-box__body>*, .smb-container__body>*, .smb-faq__item__answer__body>*, .smb-information__item__body>*, .smb-items__item–free>.smb-items__item__body>*, .smb-media-text__body>*, .smb-panels__item–free>.smb-panels__item__body>*, .smb-section__body>*, .smb-step__item__summary>*, .smb-tab-panel__body>* {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    }

    ・もともと上記のコードを記述した記憶がなく、いつからか付与されている状態になっていました。こちらによって実現したいデザイン通りになっていたものが、崩れてしまっていました。

    デベロッパーツールでposition:relativeを削除すると、実現したいデザインになります。(上記を削除しても他にposition:relative が効いているため、それらも削除すれば実現できます)

    ### 試したこと
    position:unset では実現できませんでした。

    WordPress、もしくはSnow Monkeyのアップデートによって変更されたのかが分からず、どのファイルに上記のソースコードが格納されているかが分からなく自分で対応することができませんでした。

    どうか、ご教授いただけたら幸いです。

    0
    いいねをした人: 居ません
    #89303
    キタジマ タカシ
    参加者
    1245

    その position: relative は、エディターの見た目と実際の見た目を合わせるために追加したものです。親テーマ(Snow Monkey)から記述を削除することはアップデートができなくなるため推奨できません。

    子テーマや追加 CSS で position: static に上書きするのがベターだと思いますが、こちらで試した感じだと、position: relativeposition: unset をデベロッパーツールで外してみてもスクショのような表示にはならなかったので(タイトルが左に寄る)、タイトル部分についても少し変更が必要なのではと思いました。

    0
    いいねをした人: 居ません
    #89304
    キタジマ タカシ
    参加者
    1245

    現状の CSS は何も手を付けつずそのままにしておくとして、次の CSS を追加することでスクショのデザインが実現できました。

    .section-wrapper__ttl {
        position: absolute !important;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
    }

    実際には、KT さんが追加されている CSS と重複(上書きの上書きみたいな)があって無駄があると思うので、うまいことあわせてもらえればと思います。

    3
    いいねをした人:
    #89307
    KT
    参加者
    5

    その position: relative は、エディターの見た目と実際の見た目を合わせるために追加したものです。親テーマ(Snow Monkey)から記述を削除することはアップデートができなくなるため推奨できません。

    →アップデートができなくなるんですね、、知識不足でした、、大変失礼しました。

    子テーマや追加 CSS で position: static に上書きするのがベターだと思いますが、こちらで試した感じだと、position: relative と position: unset をデベロッパーツールで外してみてもスクショのような表示にはならなかったので(タイトルが左に寄る)、タイトル部分についても少し変更が必要なのではと思いました。

    現状の CSS は何も手を付けつずそのままにしておくとして、次の CSS を追加することでスクショのデザインが実現できました。

    →ありがとうございます!こちらで記述してみます!

    諸事情により今すぐ対応できずなので、本日中に実装出来たらトピックを閉じさせていただきます!

     

    早朝にも関わらず、こんなにも迅速な対応をしていただき、誠にありがとうございます!

    3
    いいねをした人:
    #89309
    キタジマ タカシ
    参加者
    1245

    アップデートができなくなるんですね、、知識不足でした、、大変失礼しました。

    一応補足すると、Snow Monkey に限らず WordPress 本体、テーマ、プラグインはすべて直接編集することは推奨されていません。WordPress 本体、テーマ、プラグインのアップデートは最新版をネット上からダウンロードしてきて、サーバー内のそれのファイルを削除してダウンロードしてきたファイルと入れ替えるという処理で実現されます。なので直接編集すると、最新版と入れ替えられたときにその編集は消えてしまうことになります。

    追加 CSS、フック、子テーマなどを活用することで直接編集しなくとも変更を入れることができるので(できないものもあります)、基本的にはそのようなものを使ってカスタマイズすることになりますね。

    3
    いいねをした人:
    #89396
    KT
    参加者
    5

    一応補足すると、Snow Monkey に限らず WordPress 本体、テーマ、プラグインはすべて直接編集することは推奨されていません。

    そういうことですね!私の認識不足でした!
    親テーマ内に当たる部分なので編集してはいかがなものかと考えていたので、、安心しました!

    今後もSnow Monkeyを愛用させていただきます。
    この度は迅速な対応、本当にありがとうございました。

    こちら、トピック閉じさせていただきます。

    2
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「position:rerative を削除したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ