[ 解決済 ] 楽天などでよく見かけるセールを強調する縦バナーの設置方法

[54]

■ WordPress のバージョン
5.8-ja

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning Pro

■ スキンの種類
Pale

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

タイトルの通りで、セール情報を縦バナーにして訴求したいと考えています。
ライトニングプロを使用しております。
知識がありませんので、できるだけ噛み砕いた解説をお願いしたいです。
よろしくお願いいたします。

[うなこ]

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

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

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

[54]

早速ありがとうございます。読んでみます。

他記事を漁っていたらこのようなものがありました。
「楽天GOLDのindex.htmlへhtmlコードを貼りましょう。」（ここには載せませんが、記事中のhtmlコードはコピペOKなものでした。）
WordPressではindex.htmlはphpが基本であるといった記事も見ましたが、htmlコードを貼り付けるindex.htmlという場所はあるのでしょうか？

[うなこ]

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

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

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

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

CSSの参考サイト

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

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

[54]

ありがとうございます。知識が乏しいため自身で出来るのかわかりませんが、試させていただきます。

[うなこ]

バナーは画像を配置するのだと思いますので、少し変えてみました。
以下でいかがでしょうか？横幅が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;
    }
}

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

[54]

詳しくありがとうございます。
明日にでも試させていただきます。
ご丁寧にありがとうございました。

[54]

先ほど試してみました。こちらは右側にのみ表示されるものでしょうか？
また目一杯画面右端になっているものを両サイドに少し空白を入れるとすればどのようなcssが必要となるのでしょうか？
上記質問がこちらの質問フォーラムに適していない質問であれば返答は不要です。

[54]

右側に画像一つだけ表示されました。どうしても解決したいので再投稿させていただきます。

・複数のPR画像をつなげてリピート表示させるにはどうすればよいか。
・左右ともに縦帯バナーを設置するにはどうすればよいか。
・トップページ以外の全ページにも同様に表示させられるのか。

この点をなんとかクリアできればと思います。お手隙の時にでもご返答いただけますと幸いです。
よろしくお願いいたします。

[投稿者]

投稿