対馬 俊彦
フォーラムへの返信
-
投稿
-
Origin と JPNSTYLE との大きな違いは、JPNSTYLE はヘッダーが固定されていることです。
トップページのスライドショーも JPNSTYLE では固定になっています。これ以外に以下の違いもあります。
CSS でいろいろとカスタマイズできる方にとってはさほど大きな違いではないと思いますが、
そうでない方にとっては JPNSTYLE の購入理由になると思います。・JPNSTYLE は和テイストのデザイン、Origin はコーポレートサイトに向くデザイン
・JPNSTYLE のカスタマイズメニューには「Lightning Skin JPNSTYLE 設定」がある。他にもあるかもしれませんが、私が感じている違いは以上です。
Lightning Pro 8.5.3 にアップデートしてフォントサイズの修正を確認いたしました。
どうもありがとうございました。今後ともよろしくお願いいたします。
※添付画像をあわせてご参照ください。
※最初にアップした添付画像の説明が紛らわしいので、
あとからアップした outer-block-2.png をご参照ください。以下のやり方でできます。
Outer ブロックを2つ配置して、
上の Outer ブロックの下部区切りレベルを設定し、
カスタムカラーで下の Outer ブロックの背景色と同じ色を指定します。このやり方で3つ目・4つ目と Outer ブロックを追加していけば OK です。
すべての Outer ブロックで上部区切りレベルは 0 のままにしておきます。
設定 > VK Blocks > ブロックテンプレート表示設定 で「非表示」に設定されているのかもしれません。
添付画像をご参照ください。なるほど、そういうことでしたか。
理由がわかってすっきりしました。
ご回答、ありがとうございました。私が以前に 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 の動作のはずです。このことがなにかのヒントになれば幸いです。
リンク先の動画をダウンロードして確認(再生)できました。
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; } }お試しください。
あらら・・・定番サイトなので、回答もダブっちゃいましたね。
失礼しました。ここなら画像を無料でゲットするに安全だよというサイト
吹き出しのイラストなら「いらすとや」でだいたい用が足りると思います。
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;}
}ノートパソコンのような小さい画面で表示すると、
スクロールできる部分の高さが小さくなってしまうのではないと気になりますが・・・
