DRILL LANCER
フォーラムへの返信
-
投稿
-
Lightning Skin Pale をお使いのようですね。
下の少し見えている画像はスライドショーですか？
それともページヘッダーですか？
いずれにしても私の環境では余白は存在しません。Lightning Ver. 2.6.3
Lightning Skin Pale Ver. 3.0.6
Lightning Advanced Slider Ver. 0.4.0
↑あってもなくても関係ないですが一応・・・スワイプ用途には使えます。上記を最新版にしつつ、スキンを Pale II に変更してみることをおすすめします。
ちなみに、IE は固有のバグが多いため、動作保証の対象外になっているようです。ウィジェット「VK 固定ページ本文」では見出しスタイルは使えないということになりますでしょうか？
現状だと、そうなります。
.entry-body .is-style-vk-heading-double_black, .editor-styles-wrapper .is-style-vk-heading-double_black { position: relative; margin-left: unset; margin-right: unset; outline: unset; outline-offset: unset; -webkit-box-shadow: unset; box-shadow: unset; border-radius: unset; overflow: unset; color: #333; background-color: transparent; border: none; padding: 0.6em 0 0.5em; margin-bottom: 1.2em; border-top: double 3px #333; border-bottom: double 3px #333; }上記は見出しスタイルに一例です。
個別記事の本文では見出しが.entry-bodyの内部にあるのでスタイルが反映されますが、「VK 固定ページ本文」では見出しが.entry-bodyの内部にないのでCSSが適用されません。私の検証環境は下記のとおりです。
サーバー：XAMPP 7.2.5
WordPress：5.3.2
テーマ: Lightning Pro 2.6.4
スキン：Fort II 4.0.0
ブラウザ：IE 11 ( Lightning Pro の動作保証外 ), ChromeP.S.
サーバー側で実はキャッシュが行われていてそれが表示されている可能性はありませんか？
しばらく時間をおいてからアクセスすると反映される可能性があります。下記の違いがよくわかりません。
片方はブロックエディタの編集画面での表示でもう片方はサイトを実際に表示した場合ですか？- 更新して「固定ページを表示」
- サイトを表示したとき
他のブラウザで閲覧してみたり、シークレットモードで閲覧した場合はどうなっていますか？
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); } }
