PCのみメニューにカスタマイズボタンを表示させる方法

PCのメニューに目立たせたいボタンがあれば、このように色を付けて設定することができます!
人間の心理的に右上のボタンは成約率が高いと言われているので、ここに設置して損はないですね。

PCメニューにカスタマイズボタン

カスタムボタンの設置方法

外観>メニューに進みます。
右上にある表示オプションをクリックし、CSSクラスにチェックを入れます。

メニューにてCSSクラスを表示する方法

メニュー項目のCSS Class(オプション) に、適当なCSS名を設定します。
nav-webserve とします。

外観>カスタマイズ>追加CSS を開きます。
追加CSS に次の内容を入力します。
内容の説明は省きます。カスタマイズする際はAIに聞くといいですよ。

/* ページ全体:【PCのみ】"WEB予約"メニューの色変更 */
@media (min-width: 800px){
  .c-gnav .nav-webreserve{ display:flex; align-items:center; }
  .c-gnav .nav-webreserve > a{
    display:inline-flex; align-items:center; justify-content:center;
    height: 34px; padding: 0 14px;
    border-radius: 999px;
    background:#ff6b3c; color:#fff;
    font-weight:700; font-size:13px; letter-spacing:.04em; line-height:1;
    box-shadow:none;
  }
  .c-gnav .nav-webreserve > a:hover{ filter:brightness(.96); }
}

冒頭でも紹介した通り、こんな感じの仕上がりになります。

PCメニューにカスタマイズボタン

スマホのカスタムボタン設置方法はこちらの記事を参考にしてください。

あわせて読みたい
スマホのみ右上にカスタマイズボタンを表示させる方法 スマホ表示したとき、右上にボタンを設置することができます。ここ、非常に成約率の高いボタンでもあるので、設置して損はないですね!!こんなイメージです。 カスタム...

この記事を書いた人

コメント

コメントする

目次