Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

すべてのデバイスで同じ絵文字を表示する...
 
共有:
通知
すべてクリア

[解決済] すべてのデバイスで同じ絵文字を表示する方法を教えていただきたいです…

6 投稿
2 ユーザー
5 Reactions
3,327 表示
(@もぐ)
Eminent Member
結合: 5年前
投稿: 29
Topic starter  

はじめまして。

今回ワードプレスを使って初めてブログを作るにあたってコクーンのテーマを使わせて頂いておりました。

使用させて頂きありがとうございます!

 

投稿の際にどのデバイスでも同じく表示される絵文字を使いたくて試行錯誤していたのですが、

・native emojiというプラグインを入れてみたところ入力すると勝手にwindowsの絵文字や□に代替されてしまい、

・「設定」⇒「投稿設定」⇒「顔文字を画像に変換して表示する」という設定をしようとしましたがその設定をする場所が見つからず、

http://wordpress.siyouyo.com/establishment/tukaikata/917/&source=gmail&ust=1566057598440000&usg=AFQjCNE-u4tU5Dplt0DaHpPlXrVWOstM4 Q"> http://wordpress.siyouyo.com/establishment/tukaikata/917/

こちらの方の記事を参考にしました。

・Lets EMOJIというサイトから画像をコピペしてみたところ、絵文字の表示はできたのですが投稿記事をプレビューしてみると絵文字が下の方にズレて表示されてしまいました。

(iPhoneから確認すると絵文字の位置はちょうど良い位置に配置されていました)

https://lets-emoji.com/&source=gmail&ust=1566057598440000&usg=AFQjCNERRgM16cRpRkt8TUvExKYnplGZY g"> https://lets-emoji.com/

 

今まで

・native emojiのプラグインを停止してみたり削除→再インストール

・Classic Editorのプラグインを入れているのですが停止した状態で記事を書いてみる

・投稿時のフォントサイズを変えてみる

・投稿時ビジュアルモード・テキストモードそれぞれで記事を書いてみる

 

などを試してみたのですが、改善されませんでした。

知恵袋で質問してみたところどのデバイスでも同じ絵文字を表示するには画像で表示するしかないとの回答をいただいたのですが、その方法が分からず、自分なりに色々と調べみて試してみたもののなかなか解決策が見つからず困っておりました。

 

・native emojiの絵文字をどのデバイスでも同じく見えるよう画像で表示したい

・もしくは Lets EMOJIからコピペした絵文字をズレないよう表示したい

のですがなにか解決策をご存知の方がいらっしゃいましたらアドバイスをいただけないでしょうか…?

 

 

添付したキャプチャのURLが以下になります。

https://www.koromogu.com/test/

----------------------------------------------
サイト名:ころもぐ
サイトURL: https://www.koromogu.com
ホームURL: http://www.koromogu.com
コンテンツURL: https://www.koromogu.com/wp-content
インクルードURL: https://www.koromogu.com/wp-includes/
テンプレートURL: https://www.koromogu.com/wp-content/themes/cocoon-master
スタイルシートURL: https://www.koromogu.com/wp-content/themes/cocoon-child-master
子テーマスタイル: https://www.koromogu.com/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-pink/style.css
Wordpressバージョン:5.2.2
PHPバージョン:7.3.5
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.8.8
カテゴリ数:6
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:1
AMP:1
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.2
Classic Editor 1.5
Contact Form 7 5.1.3
Custom Feeds for Instagram 1.12.1
Edit Author Slug 1.6.0
EWWW Image Optimizer 4.8.1
Google XML Sitemaps 4.1.0
Native Emoji 3.0.1
PS Auto Sitemap 1.1.9
SiteGuard WP Plugin 1.4.3
TinyMCE Advanced 5.2.1
TS Webfonts for お名前.com 1.0.2
WebSub/PubSubHubbub 3.0.2
WordPress Ping Optimizer 2.35.1.0.0
WP Multibyte Patch 2.8.2
WP SVG Icons 3.2.1
----------------------------------------------

 

こちらで質問すべき内容でなかったら申し訳ありません。

よろしくお願いいたします。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

・Lets EMOJIというサイトから画像をコピペしてみたところ、絵文字の表示はできたのですが投稿記事をプレビューしてみると絵文字が下の方にズレて表示されてしまいました。

(iPhoneから確認すると絵文字の位置はちょうど良い位置に配置されていました)

img.emoji {
	vertical-align: middle;
}

こんな感じで好みの値を入れると良いと思います。baselineとか。どれが正解なのかは運営者さんが決めてくださいね❦

というのも微妙な違いなので。あとiPhoneでの確認などもあるかと思うので。


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

ついでにSSL設定をサーバーで行われたと思うのですが、なぜhttpのままで置いてるんだろ?って不思議でたまりません。

ホームURL: http://www.koromogu.com/  

ちゃんとSSL設定を完了させておくと良いと思います。この件と関係ないと思われますけどね ? 


   
わいひら reacted
(@もぐ)
Eminent Member
結合: 5年前
投稿: 29
Topic starter  

かうたっく様ありがとうございます・・・!

教えていただいた通りSCCに追加してみたところできました。

ここ一、二週間どうしてもうまくできずずっと困っていたので本当に助かりました。

またSSL設定の件についても教えていただきありがとうございます。

お恥ずかしながらかうたっく様に教えていただくまでわかりませんでした・・・

SSL設定のほうも無事に設定できました。

的確で迅速なご回答本当にありがとうございました!!!! ? 

 


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

正解が分からなかったんですが、色々調整していただけたようで。

ちなみにどのような装飾で調整されましたか?

書き込みいただけたら、他の人も同じテストを繰り返さなくても良い?かも!?しれません。書いたstyleだけ、書き込みいただけたら助かります。

******

ビフォー

https://gyazo.com/7d553300b91a11d729e271bd37970db8

スタイル適応されたコード

img.emoji {
	vertical-align: middle;
}

アフター

https://gyazo.com/560dac24cfe30e16862d96358286c947

*****

どちらも上手くいったようで良かったです^^

お疲れさまでした ? ? ? 


   
わいひら reacted
(@もぐ)
Eminent Member
結合: 5年前
投稿: 29
Topic starter  

スタイル適応されたコード

に記載のCSSをテーマエディタに書き込みました。

本当にありがとうございました ? 

img.emoji {
	vertical-align: middle;
}

   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました