チャットのデザイン

Question

https://marianaocean.com/

外枠にチャットを設置しているのですが、邪魔になってしまい見えづらいと感じます。

https://ferret-one.com/
このページのように少しだけバナーが見えて、チャットが浮き出るにはどうすればいいですか？

Accepted Answer

ありがとうございます。できたらモーダルウインドウのようにチャットを大きく表示することは可能でしょうか？

Answer

ECマスターズの田中です。

> このページのように少しだけバナーが見えて、チャットが浮き出るにはどうすればいいですか？

jQueryプラグインなどで同様の操作ができないか
探してみたのですが、特になかったので、
ご自身にて導入していただく必要がございます。

たとえば、チャット部分を表示する
（中略）
を予め「display: none;」で非表示にしておき、
チャットを表示するためのボタンを
（中略）
で囲んで表示しておき、


$(function(){
$("#disp_pc_chat").click(function(){
$("#disp_pc_chat").hide();
$("#pc_chat").css("display","block");
});
});


というJavaScriptを読み込ませておくことで、
チャットを表示するためのボタンをクリックすることで
チャット部分を表示させることができます。

JavaScriptの仕組みを、高さをアニメーションさせて変更する形式にするなど
修正することで、見た目を改善していくことができます。

Answer

http://www.marianaocean.work/mgs/index.html

返信ありがとうございます。
こちらを組んでみましたが、反応がしません。

何か間違っていますでしょうか。

Answer

ECマスターズの田中です。

私よりご案内差し上げたコードの前に
jQueryが読み込まれていないことが原因ですので、

同ページ内にある

上記scriptタグを、
私よりご案内差し上げたコードより前に
移動していただきますようお願いします。

Answer

ありがとうございます。
無事できました。
では反対に、チャットの上に×ボタンをつけて
チャットを消して、チャット受付中のボタンを表示させるにはどうすればいいでしょうか

Answer

ECマスターズの塚本です。

ご質問いただいた内容ですが、
本日担当が休みをとっておりまして
回答が明日となる予定です。

お急ぎのところご迷惑おかけしますが、
回答まで今しばらくお待ちいただければと思います。

どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

> チャットの上に×ボタンをつけて
> チャットを消して、チャット受付中のボタンを表示させるにはどうすればいいでしょうか

その場合は、私よりご案内差し上げたJavaScriptを
下記の内容に差し替えてください。


$(function(){
  $('クリックする要素').click(function(){
    $('表示/非表示が切り替わる要素').toggle();
  });
});


クリックする要素、表示/非表示が切り替わる要素は、
実際の値に変更してご利用ください。
「,」で区切ることで、複数の要素を指定することができます。

例）
チャット受付中のボタンに　id="disp_pc_chat"
チャット部分に　id="pc_chat"
チャットの上の×ボタンに　id="hide_pc_chat"
とついている場合、
クリックする要素は　#disp_pc_chat, #hide_pc_chat
表示/非表示が切り替わる要素は　#disp_pc_chat, #pc_chat
と記載する。

Answer

ありがとうございます。無事実装できました。
×の部分を右よりにして、デザインを変更しようと思ったのですが
うまく行きません。

CSSを効かせるためにはどうすればいいのでしょうか？

Answer

ECマスターズの田中です。

> CSSを効かせるためにはどうすればいいのでしょうか？

実際のページを拝見してもボタンがなかったため
正確な原因の確認ができなかったのですが、

CSSが効かない場合は、
セレクター（スタイルシートを指定したい対象）の指定に誤り（誤字など）がある、
他の規則が優先され、上書きされている、
といった原因が考えられます。

まずはそのような事態が起こっていないか、
起こっている場合は原因を取り除けないかご確認いただき、
出来ない場合は、私にて実際のページを確認させていただく必要がございますので、
返信もしくは「投稿内容について報告する」リンクより、
実際の×ボタンが確認できるURLをお知らせいただきますようお願いします。

Answer

http://www.marianaocean.work/mgs/index.html

うまくできました！ありがとうございます。

ちなみに横の固定バナーにしたのですが、チャットのボタンを押したら
チャットが全画面で出てくるようにしたいのですが（モーダルウィンドウのような）
※全画面ではなくてもチャットを大きく見せたいです。

ややこしいことを何度も聞いてしまって申し訳ございません。

Answer

ごめんなさい。
先ほどの質問は取り消して
https://chatplus.jp/function/

今のチャットをこんな感じで上に伸びるようにしたいです。
Jsをどう変更すればうまくいきますか？

Answer

ECマスターズの田中です。

それでは、私よりご案内差し上げた
toggle()
を
slideToggle()
にご変更いただくといかがでしょうか。
http://semooh.jp/jquery/api/effects/slideToggle/%5Bspeed%5D%2C+%5Bcallback%5D/

Answer

http://obot-ai.com/setting_file/blumin/blumin_demo.html

以前、教えていただいたチャット枠のデザインに関して
うまく実装できたのですが、

・チャットを開いたときに上に伸びてほしい（下のほうに設置すると見えなくなる）
またはチャットボタンを押したときにチャットが大きく表示することはできますか？

宜しくお願い致します。

Answer

ECマスターズの田中です。

> 下のほうに設置すると見えなくなる

というところが一番の問題点なのかと思いますが、
#side_bunner の位置が、画面上端からの距離で
設定されていることが原因ですので、

まずは、 #side_bunner に設定されている
top: 500px;
をbottomに、たとえば
bottom: 50px;
などにご変更の上、表示をご確認いただきますようお願いします。

Answer

ECマスターズの田中です。

モーダルウィンドウのように、ということでしたら、
モーダルウィンドウを設置するためのjQueryプラグインを
導入していただくと、
見た目も綺麗に、動作も安定する仕組みを作ることができます。

https://on-ze.com/archives/6971
上記ページで紹介されている「Modaal」をはじめ、
様々なjQueryプラグインが公開されておりますので、
ご希望どおりの動作をするプラグインを見つけて導入していただくことを
オススメします。