Webページの右下に「お問い合わせ」というボタンを縦表示させる方法 というブログ記事でページの右下に「お問い合わせ」という縦書きのボタンを追加しました。
実際に追加してから見てみたところ、スマホのときに邪魔になるなぁとかトップページにはいらないんじゃないかなと思いましたので微修正してみました。
修正前の「お問い合わせ」ボタンの表示状態
前回「お問い合わせ」を作ったときの記事はこちらになります
[ryus_blogcard url=”https://usortblog.com//scroll-sticky-sitsumon/”]
修正前の「お問い合わせ」ボタンですが、スマホで見たときに
こんな感じに文章にかぶってしまっていました。これは…ちょっと、、かなり見づらいです。
また、PCでトップページを見たときに
こんな感じに「お問い合わせ」ボタンが表示されますが、トップページにはなくてもいいんじゃないかなぁと思いました。
ということでそれぞれ修正します。
スマホ表示の時は「お問い合わせ」ボタンを表示しないようにCSSで指定する
スマホ表示の時に「お問い合わせ」ボタンを表示しないようにするには、ボタンに指定してあるidをつかってCSSで表示しないようにすれば簡単だなと思いました。
CSSでスマホ表示かどうかによって指定を変更するには幅がスマホぐらい狭くなったときだけ有効になるCSSを指定すれば良さそうです。
使っている子テーマの style.css に
/* スマホのときは表示しない */
@media (max-width: 767px) {
#toast-container {
display:none;
}
}
を追加しました。これはメディアクエリーで 最大幅が767pxのときだけに有効になるCSSの指定で、お問い合わせボタンのidであるtoast-containerに対して display:none; 表示しないという指定をしています。
この状態でスマホ表示すると、
こんな感じに「お問い合わせ」ボタンが表示されないようになりました。
トップページのときは「お問い合わせ」ボタンを表示させない
トップページのときは「お問い合わせ」ボタンを表示させないようにするには、子テーマのfunctions.phpにその判定を入れることで実現しました。
そもそも、「お問い合わせ」ボタンを表示させるためにfunctions.phpに
// toastr jsとCSSを読み込む
function my_scripts_toastr() {
wp_enqueue_script( 'toastr_js', get_bloginfo('stylesheet_directory') . '/toastr/build/toastr.min.js', array(), false, true );
wp_enqueue_script( 'toast', get_bloginfo('stylesheet_directory') . '/js/toastr.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_toastr' );
function my_styles_toastr() {
wp_enqueue_style( 'toastr_css', get_bloginfo( 'stylesheet_directory') . '/toastr/build/toastr.min.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles_toastr' );
このようにコードを入れました。
最初はトップページかどうかを判定してトップページ以外の時だけ、add_action をすればいいのではないかと考えてコードを組んだのですが、どうもうまく判定できません。
そこで２つあるfunctionにそれぞれトップページかどうかを判定して、トップページでないときだけ実行するようにコードを書き換えました。
// toastr jsとCSSを読み込む
function my_scripts_toastr() {
if(!is_front_page() && !is_home()){
wp_enqueue_script( 'toastr_js', get_bloginfo('stylesheet_directory') . '/toastr/build/toastr.min.js', array(), false, true );
wp_enqueue_script( 'toast', get_bloginfo('stylesheet_directory') . '/js/toastr.js', array(), false, true );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_toastr' );
function my_styles_toastr() {
if(!is_front_page() && !is_home()){
wp_enqueue_style( 'toastr_css', get_bloginfo( 'stylesheet_directory') . '/toastr/build/toastr.min.css', array(), null, 'all');
}
}
add_action( 'wp_enqueue_scripts', 'my_styles_toastr' );
こんな感じに変更しました。
if(!is_front_page() && !is_home()){
というところで、トップページでないときという判定をしています。そのときだけCSSやjsを読み込むようになります。
このように変更してからトップページを見ると、
「お問い合わせ」ボタンが表示されないようになりました。
それ以外の
各記事には表示されたので、これで意図通りの修正ができました。
CSSだけで修正可能でした！
この記事を読んだ方からfunctions.phpではなく、style.cssだけでの修正方法を教えてもらいました。
body.home #toast-container {
display:none;
}
なるほど！トップページはbodyのclassにhomeという指定があるんですね。これは色々なところで応用できそうです。教えてくれた、Aさんありがとうございました(^^)/
おまけ：この記事の一番最初に使ったはめ込み画像を作ってくれるサイト
この記事の一番最初に使った Webサイトをはめ込み画像にしてくれるサイト は
[ryus_blogcard url=”https://usortblog.com//site-pc-sumaho-hamekomi/”]
こちらの記事を参照してください。URLを指定して実際にそれぞれのデバイスでどういう表示になるかを一覧して画像にしてくれるのでとてもきれいな絵が作れます。実際にレスポンシブ対応ができているかどうかということも確認できますね(^^)/
コメント