なるほど…。UI 的には、それであってそうな気もしますけども…。Smallchat のサポートとかに聞くのが良さそうです。
なるほどです。
コードを見ると、下記のような CSS はありますが、これは TarCoon さんが入力されたやつではないですかね？
iframe の中の、実際のチャットボタンに CSS を反映させたい、ということですよね？ HTML の仕様的に iframe の中には外から CSS を当てることはできないので、カスタム CSS などの WordPress 自体の機能ではなくて、Smallchat の何らかの機能（があれば）で実現することになるのかなと思います。
はい。smallchatの管理サイトにCSSを変更できそうな項目はあるのですが、そこに入力しても反応しない感じなんです。
ただ、iframeは、カスタムCSSでは反映されないんですかね？
iframe の中の、実際のチャットボタンに CSS を反映させたい、ということですよね？ HTML の仕様的に iframe の中には外から CSS を当てることはできないので、カスタム CSS などの WordPress 自体の機能ではなくて、Smallchat の何らかの機能（があれば）で実現することになるのかなと思います。
ありがとうございます！
早速、教えていただいた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の項目があってそこに入力すれば反映できるかもと思って試してみたのですが、うまくいきませんでした。
もしかすると無料会員は制限されているのかと思って諦めかけています。
とはいえ、最低限のマスト課題だった、チャットアイコンが他の項目と被らないようになりましたので、とても助かりました。ありがとうございます。
GONSY様 キタジマ様
矢印のところにセミコロンは必要でしょうか？
参考していただいたサイト（https://apr20.net/web/wordpress-web-category/3373/）にはなかったので。
このチャットボタンを表示している iframe に width と height が指定してあって、ボタンとぴったりの大きさではないので、ページ上部へ戻るボタンとぴったり重ねるのは調整が必要ですが、とりあえず以下の CSS で iframe がフッターに重ならないようにはなります。
#Smallchat iframe {
bottom: 44px !important;
bottom: calc(env(safe-area-inset-bottom) + 49px) !important;
}
GONSY様 キタジマ様
ご返信が遅くなり申し訳ありません。
GONSY様に2回目に共有していただいた記事内のfunctions.phpのコードをmy-snow-monkey.phに追記しておりませんでした。
以下のようにしたところ、望むようになりました！
※コードを含めようとすると送信できませんでしたので、画像を貼り付けています。
ちょっと冗長になってしまいますが、下記確認をお願いします！
① WordPressに素のmy snow monkeyをインストール→有効化
② Cyberduck上で「plugins/my-snow-monkey」の中に「style.css」を追加
③ Cyberduckからデスクトップ上に「style.css」を追加した「my-snow-monkey」のファイルを複製
そしてその後VS Codeで開いてみてお試しのcssを入力してみたのですが反映されておらずでした･･･。
「そしてその後VS Codeで開いてみてお試しのcssを入力してみたのですが反映されておらずでした･･･。」の後に、編集した style.css を Cyberduck でサーバー上にアップしましたかね？
ホームページ上に反映 = サーバーにアップロード、なので、パソコン（デスクトップ上）のファイルを編集した後はサーバーにアップロードしないと反映されません。下記漏れかもしれませんが一応確認してください！
ちなみにVS Codeでmy snow monkeyを開く際に、「PHP のインストールが見つからないため、検証できません。PHP 実行可能ファイルを構成するには、設定 ‘php.validate.executablepath’ を使用します。」というエラーメッセージが出ていたので、解消するためにPHP実行ファイルをダウンロードして設定もしてみましたが、
これ僕もでますが無視してます。多分 VS Code 上で PHP を実行するとかそういう感じのものだと思いますが、VS Code 上で PHP を実行する必要があることは少ないと思うので、入れなくても大丈夫なのかなと思います。
なるほど！と思い、さっそく素のmy snow monkeyを通常通りWordpressにインストールした後に、Cyberduckを使ってstyle.cssを追加してみました。
流れを書き出してみますと、
① WordPressに素のmy snow monkeyをインストール→有効化
② Cyberduck上で「plugins/my-snow-monkey」の中に「style.css」を追加
③ Cyberduckからデスクトップ上に「style.css」を追加した「my-snow-monkey」のファイルを複製
そしてその後VS Codeで開いてみてお試しのcssを入力してみたのですが反映されておらずでした･･･。
ちなみにVS Codeでmy snow monkeyを開く際に、「PHP のインストールが見つからないため、検証できません。PHP 実行可能ファイルを構成するには、設定 ‘php.validate.executablepath’ を使用します。」というエラーメッセージが出ていたので、解消するためにPHP実行ファイルをダウンロードして設定もしてみましたが、状況は変わらずといったところです。
解決に時間がかかってしまい本当にすみません。
.c-meta の中だと、デフォルトでは横並びにならずに日付の表示エリアの中に New 表示も詰め込まれる形になるため、結構 CSS で調整が必要になると思います。
title/title のままで、New とタイトルの間に CSS で余白を入れればきれいに見えるのかなと思ったのですがどうでしょうか？
素のmy-snow-monkey.zipはインストールできるんです！
「style css」を加えるためにいじった後はまったくインストールできない状態でして。
なるほどです。
「有効なプラグインが見つかりませんでした」は my-snow-monkey.php がフォルダに入っていないときにでるメッセージだと思うので、zip をつくるときにうまくつくれていない可能性はあるかもしれません。
ただ、style.css などのファイルを追加するとき・更新するときに毎回 zip をつくるのは大変なので、一度素の My Snow Monkey をインストールしたあとは Cyberduck などの FTP ツールで更新したファイルだけをアップロードするのが良いのかなと思います。
素の My Snow Monkey をインストールしたあと、FTP ツールで style.css だけを plugins/my-snow-monkey の中にアップロードしてみてください。問題なければ https://cococare.me/wp-content/plugins/my-snow-monkey/style.css で見れるようになるはずです。表示できればあとはこれを my-snow-monkey.php から読込みできるようにコードを追加すれば良いのかなと。
Olein_jp様
ご提示いただいた方法でサイドバーを表示させることができました！
非常に助かりました、ありがとうございます。
まーちゅう様
マニュアルページのURLをお送りくださいましてありがとうございます。
こちらのページを見逃しておりました。大変失礼いたしました。
