ページの右下にお問い合わせボタンを表示の修正ースマホのときとトップページ

Webページの右下に「お問い合わせ」というボタンを縦表示させる方法 というブログ記事でページの右下に「お問い合わせ」という縦書きのボタンを追加しました。
実際に追加してから見てみたところ、スマホのときに邪魔になるなぁとかトップページにはいらないんじゃないかなと思いましたので微修正してみました。

修正前の「お問い合わせ」ボタンの表示状態

前回「お問い合わせ」を作ったときの記事はこちらになります

たとえばこのブログを読んでいて、自分でやるのは不安なので有償で頼んでみたいと思うお客さん(がいるといいんですが!)がいたときに、すぐに聞けるようにお問い合わせのボタンが常に表示

修正前の「お問い合わせ」ボタンですが、スマホで見たときに

こんな感じに文章にかぶってしまっていました。これは…ちょっと、、かなり見づらいです。

また、PCでトップページを見たときに

こんな感じに「お問い合わせ」ボタンが表示されますが、トップページにはなくてもいいんじゃないかなぁと思いました。

ということでそれぞれ修正します。

スマホ表示の時は「お問い合わせ」ボタンを表示しないようにCSSで指定する

スマホ表示の時に「お問い合わせ」ボタンを表示しないようにするには、ボタンに指定してあるidをつかってCSSで表示しないようにすれば簡単だなと思いました。

CSSでスマホ表示かどうかによって指定を変更するには幅がスマホぐらい狭くなったときだけ有効になるCSSを指定すれば良さそうです。

使っている子テーマの style.css

を追加しました。これはメディアクエリーで 最大幅が767pxのときだけに有効になるCSSの指定で、お問い合わせボタンのidであるtoast-containerに対して display:none; 表示しないという指定をしています。

この状態でスマホ表示すると、

こんな感じに「お問い合わせ」ボタンが表示されないようになりました。

トップページのときは「お問い合わせ」ボタンを表示させない

トップページのときは「お問い合わせ」ボタンを表示させないようにするには、子テーマのfunctions.phpにその判定を入れることで実現しました。

そもそも、「お問い合わせ」ボタンを表示させるためにfunctions.php

このようにコードを入れました。

最初はトップページかどうかを判定してトップページ以外の時だけ、add_action をすればいいのではないかと考えてコードを組んだのですが、どうもうまく判定できません。

そこで2つあるfunctionにそれぞれトップページかどうかを判定して、トップページでないときだけ実行するようにコードを書き換えました。

こんな感じに変更しました。

というところで、トップページでないときという判定をしています。そのときだけCSSやjsを読み込むようになります。

このように変更してからトップページを見ると、

「お問い合わせ」ボタンが表示されないようになりました。

それ以外の

各記事には表示されたので、これで意図通りの修正ができました。

CSSだけで修正可能でした!

この記事を読んだ方からfunctions.phpではなく、style.cssだけでの修正方法を教えてもらいました。

なるほど!トップページはbodyのclassにhomeという指定があるんですね。これは色々なところで応用できそうです。教えてくれた、Aさんありがとうございました(^^)/

おまけ:この記事の一番最初に使ったはめ込み画像を作ってくれるサイト

この記事の一番最初に使った Webサイトをはめ込み画像にしてくれるサイト

WordPressを触り始めた当初によつばデザインの後藤さんの指導を受ける機会があり、その後もフィードなどで有益な情報をいただいています。 日々、少しでも自分のサイトで効果が

こちらの記事を参照してください。URLを指定して実際にそれぞれのデバイスでどういう表示になるかを一覧して画像にしてくれるのでとてもきれいな絵が作れます。実際にレスポンシブ対応ができているかどうかということも確認できますね(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る