チャットコードが反映されない
-
いつもテーマをお世話になっております。
https://i.gyazo.com/968c996f570a77f19337da899105f717.png
チャットコードから吹き出しを表示させたいのですが、コードのままになってしまいます。
よくある悩みと検索エンジンでの情報を熟読し、解決を試みたのですが、解決されませんでした。
そのため、解決方法をご教授いただけると幸いです。
WordPressのバージョン :
ご利用のサーバー名 :
PHPのバージョン :
OS :
ご利用のブラウザ :
該当サイトのURL :
-
@nuusan さん
こんにちは！
画像をご共有いただき、ありがとうございます！
拝見した感じですと、画像の部分（face）の記述が正しくないかもしれません。画像のファイル名を入力する部分ですので、末尾に「jpg」などのファイル形式が必要となります。
こちらがマニュアルページなのですが、
https://jin-theme.com/manual/atlas-editor03/目次から「キャラクターの画像情報を入力」へと進んでいただき、
内容をご確認いただけますと幸いです。それでも表示されない場合のご案内ページも併せてお伝えさせていただきます。
https://jin-theme.com/manual/fukidashi/よろしくお願いいたします！
-
早速のお返事ありがとうございます。
face画面をjpgのファイルで指定した場合も変換されませんでした。
https://i.gyazo.com/6ac6f78207539418f5232c246881f9e0.png
マニュアルに関しても一通り熟読し、試したのですが解決に至りませんでした。調べた中で定かではないのですが、
原因と考えられるのが、プラグインの問題、もしくはcocconからのテーマ変更が原因として考えられました。
上記の可能性はございますでしょうか。お忙しい中恐れ入りますが、
お返事いただけますと幸いです。
-
@nuusan さん
試していただいて、ありがとうございます。
お手数おかけして申し訳ないのですが、いくつか試していただきたいことがございます。
（前回ご案内した2つ目のマニュアルページの内容も含んでますので、
既に試したものは飛ばしていただいて大丈夫です。）================================================
●画像ファイル名が複雑になっていると、画像がうまく認識されないことがありますので、
「hoge.jpg」のようにシンプルでわかりやすいファイル名に変更してみる●管理画面「設定」>「メディア」>「アップロードしたファイルを年月ベースのフォルダーに整理」 と進み、チェックをいれてみる
（※ nuusan さんが懸念されているテーマ変更に関係しそうなのは、この項目です。）●コードを貼り付ける時に「ビジュアル」ではなく「テキスト」に貼り付ける
●プラグインを全て停止した状態で再度試してみる
================================================
お手数おかけしますが、上記を試していただけますと幸いです。
よろしくお願いいたします。
-
お忙しい中、お返事いただきありがとうございます。
ご指摘いただいた点を試してみたいと存じます。
ありがとうございます。
-
度々のご連絡失礼いたします。
未だ、吹き出しが使用できないため、ご連絡いたしました。
https://i.gyazo.com/3a87949976ea51d87be6e38c7c61f77b.png解決するために行ったこと
・ファイル名を簡略化(ファイル名変更）しかしpngなので解決に至らず。（下記で説明）
・テキストで編集を行う
・コードの誤字を確認
・年月ベースのフォルダに整理のチェックを解除
・プラグインを一つひとつ外して確認・全て外して確認
・Chromeとsafariのキャッシュを消去
・xアクセラレーターののキャッシュを消去
・非推奨プラグインの確認結果、解決できず
質問
・JINやWordpressの環境確認の方法
・pngをjogに変更する方法。具体的にはmac上でjpgに変更した場合でも、wordpress。JINに読み込んだ場合、pngに変更される→ブラウザでは自動で変換される解決方法が記載されておらず
・他に確認すべき対処方法
・赤の点線の解決方法。具体的には吹き出しコードをコピーした際、bgに赤の点線で指摘が入る。→エラーなことはブラウザから理解できたが、今回の問題と関係があるのか確認吹き出しを入れたいため、以上の疑問点をお伺いできればと存じます。
よろしくお願いいたします。
-
@nuusan さん
検証結果と情報のご共有ありがとうございます。
（以下の引用は、抜粋して並べているので見づらかったら申し訳ありません。）
================================================
・JINやWordpressの環境確認の方法
こちらはバージョンなどの確認方法でお間違いないでしょうか。
●JINのバージョンは管理画面「外観」>「テーマ」に並んでいるJINの部分に、カーソルを合わせてクリックすると確認できます。
⠀
●WordPressのバージョンは管理画面「ダッシュボード」の右下を見るのが早いかと思います。
⠀
●PHPのバージョンはご利用のサーバーの管理画面からご確認いただくか、
WordPress管理画面「ツール」>「サイトヘルス」内の「情報」という箇所をクリックしていただき、
⠀
その中の「サーバー」>「PHP バージョン」で確認できます。
================================================
・ファイル名を簡略化(ファイル名変更）しかしpngなので解決に至らず。（下記で説明）
・pngをjogに変更する方法。具体的にはmac上でjpgに変更した場合でも、wordpress。JINに読み込んだ場合、pngに変更される→ブラウザでは自動で変換される解決方法が記載されておらずこちらに関しましては、png でも大丈夫です。
================================================
・コードの誤字を確認
・他に確認すべき対処方法コードについてですが、添付していただいた画像を拝見すると「face="man-png"」となっていますが、
ハイフンではなく、「face="man.png"」ドットではないでしょうか？また、画像以外の箇所が間違っているかどうかは、コードを添付していただければ
こちらの環境で表示されるか試しますのでお知らせ頂けますと幸いです。サイトのURLもご共有いただければ、ブラウザ上でエラーが出ているか確認しますので、
併せてご共有いただければと思います。================================================
・赤の点線の解決方法。具体的には吹き出しコードをコピーした際、bgに赤の点線で指摘が入る。→エラーなことはブラウザから理解できたが、今回の問題と関係があるのか確認
こちらはブラウザのスペルチェックの機能かと思いますが、こちらの環境下でも出ることはありますし、
その状態でも吹き出しは表示されますので、あまり気にされなくても良いかと思います。
================================================
まずは、画像ファイルの件を確認していただき、
その他では、解決とは方向性が違いますが、一度ブロックエディタを使用してみても良いのではないかなと思います。ブロックエディタでは「吹き出し」用のブロックがありますので、コードを記述していただく必要がありません。
参考までにマニュアルをお伝えしますので、ページ内の目次から「吹き出し」をクリックしていただき、動画をご覧いただれば幸いです。https://jin-theme.com/manual/gutenberg-how-to-use-2/
（不具合などを気にされる場合は、必ずバックアップを取りながらお試しいただきますようお願いいたします。）
長くなってしまい申し訳ありません。
お手数おかけしますが、ご確認よろしくお願い申し上げます。
-
お忙しい中お返事いただきありがとうございます。
バージョンに関して確認することができました。誠にありがとうございます。
バックグラウンドに関しても確認いたしました。コードに関して、[chat face="man.png" name="man" align="left" border="gray" bg="none" style="maru"]ここに文字を入力してください[/chat]
とテキストから編集しているのですが、未だ編集することができませんでした。また、解決に至らないためブロックエディタを使用してみます。
