Y.INABA

フォーラムへの返信

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

  • Y.INABA
    参加者

    補足。

    ウィジェットのデフォルトデータを誤って参照していたのだとばかり思っていたんですが、テンプレートファイル(sidebar-xxxx.php)にasideタグごと直書きしていたんですね、これ……。
    どうりで管理画面側からだと消せないはずですしasideタグからsectionタグへの変更もままならなかったわけです。

    それでも、おかげで子テーマで上書きすることによって本件対処できました。改めてお礼申し上げます。


    Y.INABA
    参加者

    石川 様

    ご回答ありがとうございます。ご事情は理解いたしました。
    確かに説明文にはその通り記載がございますね。大変失礼いたしました。

    そして、確かにむやみやたらに消すべきではないことも確かだと思います。
    ただ、何かしらの方法で編集できるようにしたかったというのが本音です。

    変更すべきでないといえば、該当箇所のHTMLコーディングも変更すべきではないのかなと思いますが、現状はasideタグの中にasideタグが入っている形になってしまっております(スクリーンショット2枚目)。
    こちらはWordPressの仕様なのかもしれませんが、HTMLセマンティック上はあまりよろしくないので、たとえ表示させるにしても回避できる手段はほしかったところです。
    ※ご存じとは思いますが、他のウィジェット同様、sectionタグ(もしくはdivタグ)にて記述すべきところです。該当箇所のように不適切なasideタグはアクセシビリティの低下を招きます。

    本件解決済といたします。

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

    Y.INABA
    参加者

    本件、All in One Expansion Unit 9.116.0 にて対策されていることを確認いたしました。
    迅速なご対応ありがとうございました。


    Y.INABA
    参加者

    satoruh 様

    確認させていただいたところ、VK Blocks Proの以下仕様変更の影響によるものと思われます。
    (HTMLを確認する限り、「アウターエリア内に余白を追加する」が有効になっているようです)

    【仕様変更】Outerブロック「アウターエリア内に余白を追加する」オプションの非推奨化について

    今現在、パターンライブラリにて用意されているコードを改めて貼り直したら、崩れることなく正常に表示されております。

    恐れ入りますが改めてご確認のほどよろしくお願いいたします。


    Y.INABA
    参加者

    VK Blocks Pro 1.119.2 において、ブロックエディター使用中に「パンくずリスト」ブロック内でリンクが無効化されていることを確認いたしました。
    早急にご対応いただきありがとうございました。


    Y.INABA
    参加者

    検証中に追記があったようなので。

    ちなみに現状 エディタでは編集エリアの 80% をコンテンツエリアとして上書きしているのは、
    そうしないと幅が狭い時に要素が左右ベタ付けになったり、それを防止するために余白を設けるとそれによってマイナスオフセット処理している幅広や全幅のレイアウトがくずれる弊害が発生するためです。

    上記承知しました。
    ただ、視認性が良くないのは確かなので、自己責任でCSSで解消することにします。

    本件解決としてクローズとさせてください。


    Y.INABA
    参加者

    石川 様

    改めて確認ですが、問題視されているのは、

    エディタの幅が広いとコンテンツ幅(デフォルトでは1100px)を越えて広がる

    という事でしょうか?

    おっしゃるとおりです。
    インストール時点でこれなので、CSSやSCSSの記述の方法に問題があると思われます。

    なお、他テンプレートでも検証してみましたが、「観光ブログ」では記事タイトルのみがずれており(1枚目)、「プレーン」(2枚目)や「採用サイト ものづくり系」(3枚目)では「ビジネス(無料版)」と同様の事象となっておりました。
    テンプレートの記述の方法によって違いがで出るものなのでしょうか。

    —-

    なお、試しにTwenty Twenty-Fiveに切り替えてみましたが、同様の現象は発生せず、Twenty Twenty-Fiveのデフォルト幅645pxがブロックエディターにもきちんと適用されます(4枚目)。

    私としてはTwenty Twenty-Fiveと同様のスタイルになることが理想です。

    よろしくお願いいたします。

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

    Y.INABA
    参加者

    取り急ぎ、以下CSSをfunctions.php経由で編集画面に読み込ませることによって解決しました(幅の値は一例です)。

    /* 通常のブロック(コンテンツ幅:900pxに強制固定) */
    .wp-site-blocks .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
    .editor-styles-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 「幅広」に設定したブロック(ワイド幅:1200pxに強制固定) */
    .wp-site-blocks .is-layout-constrained > .alignwide,
    .editor-styles-wrapper .is-layout-constrained > .alignwide {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 公開画面と編集画面のタイトルブロック */
    .wp-block-post-title,
    .editor-styles-wrapper .wp-block-post-title,
    /* 古いエディタ環境や特殊な入力欄用のフォールバック */
    .editor-post-title__input,
    .wp-block-post-title .editor-post-title__input {
        max-width: 900px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    ただし、このような解決方法は初級者にはなかなかたどり着けないと思いますし、根本的な解決とはほど遠いので、できれば根本から解決されることを望みます。


    Y.INABA
    参加者

    石川 様

    ご確認ありがとうございます。

    コンテンツ幅よりも広い “全体の80%” が上書きするという症状の事でしょうか?

    確認したところ、ブロックエディター内で読み込まれるCSS内で該当箇所が見当たらなかったのですが、theme.jsonの方で設定されている以下記述のことでしょうか?

    "layout": {
    	"contentSize": "1100px",
    	"wideSize": "calc( var(--wp--style--global--content-size) + ( 100vw - var(--wp--style--global--content-size) ) / 2 )"
    },
    "custom": {
    	"width": {
    		"wrapper": "100dvw",
    		"content": "min( var(--wp--style--global--content-size), 90vw )",
    		"wide": "min( var(--wp--style--global--wide-size), 95vw )",
    		"sidebar": "220px"
    	},

    だとすれば、編集画面用CSSで上書きするなどの設定が必要と思います。

    —-

    「全体の80%が上書きする」という症状は意図的ということでしょうか。
    それならば、以前の画面の方が見やすかったユーザー(私含めて)にとってはなおのこと問題だと思っています。

    もちろん、エディター>設定などで上書きし、改善できるようにしてしまえば話は早いのですが……。
    (ちなみに、添付箇所がデフォルト時空欄になっておりましたが、値を埋めて設定反映しても改善はされません)

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

    Y.INABA
    参加者

    ご担当者 様

    ご確認ありがとうございます。
    1点確認ですが、画面は最大化していますか?
    添付のとおり、画面幅が広いと正常にコンテンツ幅が反映されず、意図通りの表示(1.37.2以前の縮まったコンテンツ幅:1,100px程度)となりません。

    当方、FullSite Installerからテンプレートをインストールした状態でこのような状態になっており、それ以外には何もしていません。
    改めてご確認いただけますと幸いです。

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

    Y.INABA
    参加者

    WEB001 様

    X-T9でもアップデート対応され、1.38.0にて事象が解消されました。
    お手すきの際に上記追加CSSを消していただき、ご確認のほどよろしくお願いいたします。

    石川 様

    ご多忙の中、アップデートご対応ありがとうございました。


    Y.INABA
    参加者

    WEB001 様

    本件、以下の不具合解消により「発生」した事象になります。

    v15.35.1 / 2026.5.5
    [ G3 ][ 不具合修正 ] appearance: none で消えた select の矢印アイコンを SVG で復元 by @kurudrive in #1323

    —–

    ▼【対応中】になっておりますが、お急ぎでしたら以下のCSSを追加CSS欄に記載お願いいたします。
    (Lightning側の矢印を消す処置になります。X-T9でも問題ないと思います)

    
    select.smf-select-control__control {
        background-image: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }
    

    Y.INABA
    参加者

    橋本滋 様

    回答ありがとうございます。
    ご共有いただいているURLをもとに、こちらで正常だった頃のアーカイブを確認し、ソースの比較をさせていただきました。

    結論、「グローバルナビスクロール時のレイアウト」に何らかの値がセットされてしまっているので、「固定しない」に設定変更のほどお願いいたします。
    これで解決するはずです。

    https://lightning.vektor-inc.co.jp/lightning-g3-pro-unit/header-setting/

    ◆補足
    本件とは直接関係ありませんが、追記いただいているCSSに一部脱字や混入等の構文エラーがありましたので、修正しています。
    こちらも念のためご確認ください(txtファイルになります)。

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

    Y.INABA
    参加者

    SUGI 様

    スクリーンショットも含めてありがとうございます。
    何が問題になっている(と感じていらっしゃるか)がようやく分かりました。
    私は引きつけるのを下方向にばかり考えていたのですが、上方向に引きつけることができるのを問題とされていたのですね。
    (通常、上の方向に引きつけて更新できる機能は当たり前のように使っており、SUGI様のような考え方には至りませんでしたので……)

    結論、想定通りの動作で何ら問題ありません。iOSの仕様です。
    というか、ほとんどのページで、ご共有いただいているスクリーンショットのような動作をすると思います。
    試しにYahoo!やGoogle、もしくは当フォーラムで確かめてみてください。同じような画面になりませんか?

    むしろ、海上保安庁様のサイトでは、ページを上に動かして更新できないよう、意図的にJavaScriptか何かで制御しているのだと思います。
    つまり、厳密には当フォーラムでは該当トピックが存在しない内容になります。

    これを実現しようと思うと、JavaScriptやCSSで追加コードを書く必要があり、検証も丁寧に行う必要があるため、当フォーラムでサポートできる範疇を明らかに超えると思います。
    他の有志が書いてくださるという方はいらっしゃるかもしれませんが、万全を期していただくには、やはり有償でご依頼いただくのが無難かな、と思います。


    Y.INABA
    参加者

    SUGI 様

    ご確認ありがとうございます。
    念のため私の手元のAndroidでもアクセスしてみましたが、ブレも含めて該当の事象の確認をすることはできませんでした。

    ご共有いただいている状況からしても、もはやWordPressやプラグイン、テーマ側の問題とは考えにくく、通信環境か閲覧環境のどこかに問題があってトラブルが生じているものと考えられますが………。

    ①回線や環境を変更することがもし可能であれば、全く別の回線や端末からアクセスいただくことは可能でしょうか?
    回線内でフィルター等がかかったり低速だったりでデザインが崩れるということは割とよくある話ではあります。

    ②念のため確認ですが、iPhone・iOSのバージョンは最新版をご利用でしょうか?
    iOSのバージョンが古いと、Chrome等も含め最新版が使えないため、正常に表示されない等のことは十分あり得る話だと思います。
    (なお、私のiPhoneは最新版iOS 26.4.2にて確認しています)

    ③こちらも念のための確認になりますが、ログアウト時、かつPCでウインドウの幅を狭めた状態で、正常に動作するかご確認いただくことは可能でしょうか?

    (余談ですが、海上保安庁様のサイトでブレやデザイン崩れ等が起こっていないのは、どんなに制限のある環境であっても目立った崩れが起きないように対策されているためであり、私のような一般ユーザー・小規模企業等が利用するのとは比べものにならないほどの工数がかかっているものと思います。もちろん有償案件になります)

15件の投稿を表示中 - 1 - 15件目 (全75件中)