[対馬 俊彦]

私が以前に Pale スキンで作った作業用サイトがありましたので確認してみました。

Lightning Pro 6.4.4 ＋ Lightning Skin Pale 6.0.1
の状態で iPad で表示したところ、余白は大きくなりませんでした。

Lightning Pro 8.3.1 ＋ Lightning Skin Pale 7.0.7
にアップデートしたところ、iPad で余白が大きく表示されるようになりました。

大きな余白は意図したものはではなく、
アップデートによりそうなってしまったのかもしれません。

Vektor 様、私もご回答をお待ちしています。

[対馬 俊彦]

momo 様、

共有していただいた動画を見て気になったことがあります。

添付画像をあわせてご覧ください。

[1] のメニューボタンと [2] のナビゲーションメニューが
画面に同時に表示されることは通常はないと思います。

画面幅が 991ピクセル以下のときは [1] のメニューボタンだけが表示されて、
画面幅が 992ピクセル以上のときは [2] のナビゲーションメニューだけが表示される、
というのが Lightning の動作のはずです。

このことがなにかのヒントになれば幸いです。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

リンク先の動画をダウンロードして確認(再生)できました。
iCloud のユーザーでなくても、[複製をダウンロード] でダウンロードできました。

この動画のような動きだと困りますね。

私が Pale スキンで制作中のサイトがあり、そのサイトに上記のスタイルを適用しています。

そのサイトを iPad の Safari で表示してもポヨーン現象は起きません。

なにかが違うんでしょうね。

[対馬 俊彦]

以下のスタイルを追加すれば、Pale スキンのこの部分の余白を狭めることができます。

@media (min-width: 992px) {

.device-mobile .gMenu>li {
padding-bottom: 0;
}
.device-mobile .gMenu>li>ul.sub-menu {
margin-top: 0;
}

}

お試しください。

[対馬 俊彦]

あらら・・・定番サイトなので、回答もダブっちゃいましたね。
失礼しました。

[対馬 俊彦]

ここなら画像を無料でゲットするに安全だよというサイト

吹き出しのイラストなら「いらすとや」でだいたい用が足りると思います。

https://www.irasutoya.com/

1サイトにつき20点までという制約はありますが、無料で商用利用可能です。

この素材サイトのイラストは多くの印刷物やサイトで使われているので、
他のサイトとダブってしまうことがあります。それが気にならないならおすすめです。

[対馬 俊彦]

functions.php に以下の行を追加すれば
トップページに2つめのキャンペーンテキストを表示できると思います。

add_action('lightning_top_slide_before', 'campaign_text_2');
function campaign_text_2(){
    echo '<div class="vk-campaign-text" style="background: #81d742">'."\n";
    echo '<span class="vk-campaign-text_text"><i class="fas fa-calendar-alt"></i>新商品「******」の発売日が12月15日に決定しました。</span>'."\n";
    echo '<a class="vk-campaign-text_btn" href="https://www.*****.**/****/">詳しくはこちら</a>'."\n";
    echo '</div>'."\n";
}

トップページの編集画面を開いて、
VK All in One Expansion Unit の カスタムCSS に以下のように入力すると、
1つめのキャンペーンテキストを非表示にできると思います。

.siteHeader .vk-campaign-text {display: none;}

お試しください。

[対馬 俊彦]

カスタマイズ ⇒ 追加CSS に以下の行を追加すればご希望のことができると思います。

@media (max-width: 991px) {
.headerTop {
display: block;
background: transparent;
border-bottom: none;
}

.headerTop .headerTop_description {
text-align: center;
padding-bottom: 5px;
padding-right: 0;
}

.headerTop nav {
display: none;
}

}

[対馬 俊彦]

カスタマイズ ⇒ 追加CSS に以下の行を追加すればご希望のことができると思います。

.page-header {z-index: 100;}

パソコンだけ固定にするのであれば以下のようにします。

@media (min-width: 992px) {
.page-header {z-index: 100;}
}

ノートパソコンのような小さい画面で表示すると、
スクロールできる部分の高さが小さくなってしまうのではないと気になりますが・・・

[対馬 俊彦]

Lightning/Katawara に限らず、ブロックエディターで編集するとこの問題が起きます。

対策として、<i class=”クラス名”>&nbsp;</i> のように &nbsp; を入れるとよいです。

[対馬 俊彦]

横からすみません。

Google タグマネージャー を使っていると、この現象が起きるみたいです。

[対馬 俊彦]

0.6.2 で横スクロールバーの表示の件が修正されていることを確認いたしました。
どうもありがとうございました。

[対馬 俊彦]

カスタマイズ ⇒ 追加CSS に以下の行を追加すれば大きめのフォントサイズにできます。

.p-global-menu>li a {
font-size: large;
}

[対馬 俊彦]

以下のサイトで 0.6.1 にアップデートしましたが、まだ横スクロールバーが表示されます。

トップページ

WordPress 5.5.1 ＋ Katawara 0.6.1

【使用プラグイン】
VK All in One Expansion Unit 9.38.0.0
VK Blocks Pro 0.47.0
WP Multibyte Patch 2.9

【備考】
カスタマイズはなにも行っていません。

お手数ですが、ご確認をよろしくお願いいたします。

[対馬 俊彦]

0.46.1 で修正されたことを確認いたしました。
ありがとうございます。

[投稿者]

投稿