[うなこ]

Lightning proのように分けることは出来ないのでしょうか？
以上、よろしくお願いいたします。

Lightning proの場合はwoocommerceのお買い物カゴに追加のボタンの色は、デザイン設定のキーカラー（暗）　の色になっていたと思います。

Lightningではキーカラー（暗）　の項目がなくなりました。
woocommerceのショップページでは、bodyタグにwoocommerceとクラス名がつきますので、これを利用してcssのカスタマイズで変えることができます。

例えばCSSはこんな感じです。
じっくり検証はしておりませんので、変わっていない部分があるかもしれませんが、こんな感じで追加していきます。

.wc-block-grid__product-add-to-cart .add_to_cart_button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
background-color:#d33030;
}
/* hover時 */
.wc-block-grid__product-add-to-cart .add_to_cart_button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
background-color:#d33030;
}

.woocommerce a.button, .woocommerce a:hover.button, .woocommerce button.button, .woocommerce input.button{
background-color:#d33030;
}

▼cssのカスタマイズに関しては以下が参考になりますので、よろしければ参考にしてみてください。

できる！CSSカスタマイズ

• この返信は3年、 2ヶ月前にうなこが編集しました。
• この返信は3年、 2ヶ月前にうなこが編集しました。
• この返信は3年、 2ヶ月前にうなこが編集しました。
• この返信は3年、 2ヶ月前にうなこが編集しました。

[うなこ]

Lightning Video Unit　のバージョンを記載していただいておりますが、
0.3.0で少し古いようですので、最新バージョン（2021年９月現在は0.4.1.0）に更新すると表示されるようになりますか？

• この返信は3年、 2ヶ月前にうなこが編集しました。

[うなこ]

デモサイトがLightningバージョン14.8.2で動作しておりますので、
設定で下書きなどになっているのではないかなと思います。

カスタマイズ→　「Lightning Video Unit 設定」　の　「Video Status」は「公開」になっておりますか？

• この返信は3年、 2ヶ月前にうなこが編集しました。

[うなこ]

バナーは画像を配置するのだと思いますので、少し変えてみました。
以下でいかがでしょうか？横幅が1199.98px以下では非表示になるようにしました。こちらもお好きな形に変えてください。
※HTMLはリンク先と画像のURLを変えてご利用ください。
※CSSの数値はお好きなものに変えてください。

▼ウィジェットのフッター上部に　HTMLブロックを配置して以下を追記

<div class="floating-banner">
<div class="banner">
<a href="https://〇〇〇〇/">
<img src="https://〇〇.png">
</a>
</div>
</div>

▼カスタマイズ→追加CSSなどに追記

.floating-banner {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
}
.floating-banner:hover {
    opacity: .9;
}
.banner {
    width: 80px;/* バナーの横幅 */
height:100vh;/* バナーの高さ */
padding: 16px;/* バナーの余白 */
background-color:#30ddd4;/* バナーの背景色 */
}

/* pcサイズ以下で非表示 */
@media (max-width: 1199.98px){
    .floating-banner {
        display: none;
    }
}

• この返信は3年、 3ヶ月前にうなこが編集しました。

[うなこ]

「楽天GOLDのindex.htmlへhtmlコードを貼りましょう。」（ここには載せませんが、記事中のhtmlコードはコピペOKなものでした。）

固定ページやウィジェットに、ブロックでカスタムHTMLは配置できます。
が、、、記事は見ておりませんが、楽天GOLDのindex.htmlへ貼り付ける記事だと思いますので、、うまくいかないようなきがしております。。

わたしの添付したURLでしたら、バナー部分のHTMLとCSSですので、ちょっとカスタマイズするとうまくできるのではないかと思っております。

ーー追記ーー
わたしのLightningで実装しているサイトで試したところ、うまくいきました。

CSSの参考サイト

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

• この返信は3年、 3ヶ月前にうなこが編集しました。
• この返信は3年、 3ヶ月前にうなこが編集しました。
• この返信は3年、 3ヶ月前にうなこが編集しました。

[うなこ]

スクショありがとうございます！
こちらでも確認できました、すみません、、。
おそらくフォントサイズが指定していないため、safariブラウザのデフォルトのフォントサイズが適応されて小さくなっているようでした。

調査いたしますので修正までしばらくお待ちください。

https://github.com/vektor-inc/lightning/issues/718

• この返信は3年、 3ヶ月前にうなこが編集しました。

[うなこ]

デモサイトをsafariで確認いたしましたが、私の環境ですと、文字の小ささが再現できないようでした。
safariで確認した時の画面キャプチャなど添付いただくことは可能でしょうか

あ、失礼しました。
わかりました、たしかに小さいですね、、！なぜでしょうか。調べてみます

• この返信は3年、 3ヶ月前にうなこが編集しました。
• この返信は3年、 3ヶ月前にうなこが編集しました。
• この返信は3年、 3ヶ月前にうなこが編集しました。

[うなこ]

おそらくやりたいことは、
楽天市場でよくみかけるサイドにピタッとついている縦長追従バナーのようなものですよね、、？？

こんな記事をみつけました。
サイズは違いますが、これを応用して、ウィジェットのフッター上部にHRMLブロックでHTMLを配置、
追加CSSなどにCSSを記述すれば、似たようなバナーは配置できるかなと思います（スマホサイズではバナーは非表示にしているようです）

レスポンシブのフローティングバナー(追従バナー)の作り方【コピペOK】

[うなこ]

ご報告ありがとうございます。

試して欲しいことがあります。
トップページの内容を右の３点リーダーから「全てのコンテンツをコピー」して（添付画像を参考）、新規ページを下書きなどで作成してペーストした場合、更新できますか？

【追記です】
調べてみると、おそらくテーマ、プラグインの問題ではない可能性があります。
いろいろな原因があるようですので、「更新に失敗しました。 現在オフラインのようです。」で調べてみると、問題がわかるかもしれません。

• この返信は3年、 3ヶ月前にうなこが編集しました。
• この返信は3年、 3ヶ月前にVektor,Incが編集しました。

Attachments:

You must be logged in to view attached files.

[うなこ]

background-imageがつかなくなっていますね、、

Jetpackのサイトアクセラレーターを有効化にされておりますか？
もしされていたらOFFにすると表示されますか？

[うなこ]

トップページのスライドショーの画像が見えなくなる原因としては
サイトをSSL化して、スライドショー画像のURLが　 http のままで見えなくなる、ということがよくあります。

▼過去にあった報告

トップページスライドショーが表示されない

もしくは、何かしらのプラグインが原因の可能性もあります。
症状のでているサイトのURLを添付いただくと、原因の特定が早いかもしれません。

• この返信は3年、 3ヶ月前にうなこが編集しました。

[うなこ]

ご連絡ありがとうございます。

もしかするとSSL設定の前にスライド画像入れてたかもしれないので・・・。

そうですね、もしかすると設定前にいれられたのではないかなと思いますが、、、
また何かございましたらご投稿くださいmm

[うなこ]

実際サイトを公開した場合、スライドショーの画像がhttpでも問題何のでしょうか？

サイトをhttps:// で見ている場合はスライドショーの画像がhttpのままでは表示されなくなります。
過去にも同様のことがありまして、以下のフォーラムは参考になりますでしょうか。

トップページスライドショーが表示されない

• この返信は3年、 3ヶ月前にうなこが編集しました。

[うなこ]

確認してみました。

Really Simple SSLというプラグインをローカル環境に入れて有効化してみてください。
おそらく見えるようになると思います。

スライドショーが見えなくなる原因は、Live LinkのURLが https になるため、設定している画像が http のままなので表示ができていないようでした

• この返信は3年、 3ヶ月前にうなこが編集しました。
• この返信は3年、 3ヶ月前にうなこが編集しました。

[うなこ]

もしエラーがでることがありましたらお知らせください
よろしくお願いいたします

[投稿者]

投稿