ページ上部へ戻るボタンと同じ四角で同じ位置同じ同じ所に別のボタンを設置したい。

0
いいねをした人: 居ません
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #132431
    TarCoon☆CarToon
    参加者
    56

    【お使いの Snow Monkey のバージョン】バージョン: 25.2.1
    【お使いの Snow Monkey Blocks のバージョン】バージョン 20.3.2
    【お使いの Snow Monkey Editor のバージョン】バージョン 9.3.0
    【お使いのブラウザ】Safariバージョン17.0 (19616.1.27.211.1)
    【当該サイトのURL】 https://tarcoon.me

    Webページに訪れてくれた人と気軽にチャットができるように、チャット機能を導入しました。
    smallchatというサービスで、Webページ上のチャットとSlackが連携できます。回答はスラック側から行うことで、Webページに来た方とやり取りができます。
    このsmallchatはWebページの右下にボタンが設置されるのですが、そのボタンを変えたいと思っています。

    ⬛︎Smallchat for WordPress
    https://ja.wordpress.org/plugins/load-smallchat/

    ⬛︎Smallchat

    ⬛︎Webページにチャット機能を簡単に導入できるSmallchatを試してみた #Slack
    https://dev.classmethod.jp/articles/smallchat-slack/

    ### 実現したいこと
    smallchatの丸ボタンを、ページ上部へ戻るボタンと同じ四角で同じ位置同じ同じ所に配置したいです。

    ### 発生している問題
    デスクトップ表示では問題ないのですが、タブレットやモバイルサイズでの表示だと、フッターメニューに重なってしまいます。
    ページ上部へ戻るボタンの位置が最適なので、この位置にsmallchatのボタンを四角にして設置したいです。

    違うサービスも絡めたカスタマイズとなるので、ここでの相談には心苦しく思っていたのですが、この度思い切って聞いてみることにしました。

    どうぞよろしくお願いいたします。

    0
    いいねをした人: 居ません
    #132468
    アバター画像キタジマ タカシ
    参加者
    2371

    このチャットボタンを表示している iframewidthheight が指定してあって、ボタンとぴったりの大きさではないので、ページ上部へ戻るボタンとぴったり重ねるのは調整が必要ですが、とりあえず以下の CSS で iframe がフッターに重ならないようにはなります。

    #Smallchat iframe {
      bottom: 44px !important;
      bottom: calc(env(safe-area-inset-bottom) + 49px) !important;
    }
    0
    いいねをした人: 居ません
    #132478
    TarCoon☆CarToon
    参加者
    56

    ありがとうございます!
    早速、教えていただいたCSSを貼り付けることで、重ならないようにはなりました。
    とても助かります。

    今まで、重ならないようにするのもなかなかできず、何度もsmallchatを実装しては削除し、実装しては削除し、を繰り返してしまっていたので、とても嬉しいです。ありがとうございました。

    ただ、iframeは、カスタムCSSでは反映されないんですかね?
    ### 試したこと

    #Smallchat .Launcher-icon {
    padding: 0;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    height: 50px;
    border-radius: 0;
    }

    で四角のアイコンにしたつもりが反映されず、smallchatの管理ページにもcustom CSSの項目があってそこに入力すれば反映できるかもと思って試してみたのですが、うまくいきませんでした。

    もしかすると無料会員は制限されているのかと思って諦めかけています。

    とはいえ、最低限のマスト課題だった、チャットアイコンが他の項目と被らないようになりましたので、とても助かりました。ありがとうございます。

    0
    いいねをした人: 居ません
    #132479
    アバター画像キタジマ タカシ
    参加者
    2371

    ただ、iframeは、カスタムCSSでは反映されないんですかね?

    iframe の中の、実際のチャットボタンに CSS を反映させたい、ということですよね? HTML の仕様的に iframe の中には外から CSS を当てることはできないので、カスタム CSS などの WordPress 自体の機能ではなくて、Smallchat の何らかの機能(があれば)で実現することになるのかなと思います。

    3
    いいねをした人:
    #132480
    TarCoon☆CarToon
    参加者
    56

    iframe の中の、実際のチャットボタンに CSS を反映させたい、ということですよね? HTML の仕様的に iframe の中には外から CSS を当てることはできないので、カスタム CSS などの WordPress 自体の機能ではなくて、Smallchat の何らかの機能(があれば)で実現することになるのかなと思います。

    はい。smallchatの管理サイトにCSSを変更できそうな項目はあるのですが、そこに入力しても反応しない感じなんです。

    0
    いいねをした人: 居ません
    #132482
    アバター画像キタジマ タカシ
    参加者
    2371

    なるほどです。

    コードを見ると、下記のような CSS はありますが、これは TarCoon さんが入力されたやつではないですかね?

    0
    いいねをした人: 居ません
    #132484
    TarCoon☆CarToon
    参加者
    56

    それが、僕が入力したものではないんですよ。
    もともとあったもので、これを元にいじればなんとかなるかと思って対応しようとしたのですが、なかなか思い通りにいかず、、、

    0
    いいねをした人: 居ません
    #132485
    アバター画像キタジマ タカシ
    参加者
    2371

    なるほど…。UI 的には、それであってそうな気もしますけども…。Smallchat のサポートとかに聞くのが良さそうです。

    1
    いいねをした人:
    #132486
    TarCoon☆CarToon
    参加者
    56

    キタジマタカシさん。相談に乗っていただいてありがとうございます。
    一人で悩んで不安だったのでとても助かりました。嬉しかったです。

    Smallchatサポートに聞いてみます。できうる限りのことはできましたので一旦このトピックは閉じさせていただきますね。
    また何か進展がありましたらお知らせします。
    どうも、ありがとうございました。

    1
    いいねをした人:
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「ページ上部へ戻るボタンと同じ四角で同じ位置同じ同じ所に別のボタンを設置したい。」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。