DRILL LANCER
フォーラムへの返信
-
投稿
-
下記の違いがよくわかりません。
片方はブロックエディタの編集画面での表示でもう片方はサイトを実際に表示した場合ですか？- 更新して「固定ページを表示」
- サイトを表示したとき
他のブラウザで閲覧してみたり、シークレットモードで閲覧した場合はどうなっていますか？
P.S.
私の環境では Fort / Fort II 共に変更が反映されました。デモサイトの vk-mobile-nav の部分の CSS を抜粋すると下記のようになっています。
.vk-mobile-nav-menu-btn { background-color: rgba(255,255,255,.8); } .vk-mobile-nav-menu-btn { position: fixed; top: 5px; left: 5px; z-index: 2100; overflow: hidden; border: 1px solid #333; border-radius: 2px; width: 34px; height: 34px; cursor: pointer; text-indent: -9999px; background: url(../../inc/vk-mobile-nav/package/images/vk-menu-btn-black.svg) center 50% no-repeat; background-size: 24px 24px; -webkit-transition: border-color .5s ease-out; transition: border-color .5s ease-out; }下記コードはあってもなくてもOKなはずなので、
../../inc/vk-mobile-nav/package/images/vk-menu-btn-black.svgなどが存在していてちゃんと表示できるか確認してみてください。AddType image/svg+xml .svg AddType image/svg+xml .svgzオンラインコミュニティ Slack の _開発状況と日報など を参照するとわかると思いますが、Bootstrap 4 をベースとした Charm II がそろそろリリースされるようなので、急がない場合はそれを待った方が良いかもしれません。
以降、新機能は II シリーズでのみリリースされるようなので、Charm II のリリースを少しでも早くするためにも待つのが得策かと思います。
とりあえず、下記のコードを削除した後、下記を試してみてください。
body .vk-mobile-nav-menu-btn { background-image: url(画像); }- キャッシュプラグインを使用している場合はそのキャッシュを削除
- CDNを使用している場合はそのキャッシュを削除
- ブラウザキャッシュを削除
カラムブロックの各カラムの幅や高さについては Lightning 側では特に関与していないようです。
wp-includes/css/dist/block-library/style.min.cssで定義されています。
Vektor Inc. 固有の問題以外にあたるので、WordPress 公式フォーラムの方に相談してみてください。Lightning / Lightning Pro は Bootstrap ベースを謳いつつもところどころに無力化している面があります。
今回のケースもそれに該当します。
今回の場合は下記 CSS コードを追記することで解決可能に思われます。.table.table-sm td, .table.table-sm th { padding: .3rem; }自分も IE 11 で試してみたところ下記で解決できました。
OS：Windows 10 Pro 1909
IE のバージョン：11.5353.13862.0
IE の更新バージョン：11.0.165@media (min-width: 992px) { /*IE対応用*/ .siteHeadContainer.container { max-width: none; } /*ロゴ画像の大きさを拡大*/ .navbar-brand img { max-height: 100px; } /*お問い合わせエリアを上下中央に配置*/ .siteHeader_sub { float:none; } .siteHeadContainer.container .navbar-header { display:flex; justify-content:space-between; align-items: center; } }前回投稿したものに Autoprefixer を使用してベンダープリフィックスを付加したものを書いてみました。
IE 11 ではどうやら特殊なベンダープリフィックスを必要としているみたいです。/*ロゴの大きさを変更*/ @media (min-width: 992px) { .navbar-brand img { max-height: 100px; } } /*お問い合わせエリアを上下中央に配置*/ .siteHeader_sub { float:none; } .siteHeadContainer.container .navbar-header { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }下記をベースに変更すれば OK だと思われます。
@media (min-width: 992px) { /*通常*/ .gMenu_outer { border-top-color: #337ab7; background-color: #f9f9f9; } ul.gMenu li { background-color: #f9f9f9; } ul.gMenu li a { color: #333; } /*カレントアイテム*/ ul.gMenu>li.current-menu-ancestor, ul.gMenu>li.current-menu-item, ul.gMenu>li.current-menu-parent, ul.gMenu>li.current-post-ancestor, ul.gMenu>li.current_page_ancestor, ul.gMenu>li.current_page_item, ul.gMenu>li.current_page_parent, ul.gMenu>li:hover { background-color: rgba(0,0,0,.02); } }スキンは Fort / Fort II / Pale / Pale II のいずれかだと思われますが、それ以上はわからなかったので、
とりあえず、 Fort II を対象にした CSS のコードを記載しています。この場合、添付画像のように変化します。/*ロゴの大きさを変更*/ @media (min-width: 992px) { .navbar-brand img { max-height: 100px; } } /*お問い合わせエリアを上下中央に配置*/ .siteHeader_sub { float:none; } .siteHeadContainer.container .navbar-header { display:flex; justify-content:space-between; align-items: center; }
