WordPressテーマSANGOの質問

SNS Count Cacheによるシェアボタンでのシェア数表示

アバター
れおん

お世話になっております。
SANGO+PORIPU tearsを利用しているものです。

モバイル用フッター固定メニューのシェアボタンにおいて、SNS Count Cacheによるシェア数が表示されない現象に困っています。
SNS Count Cache以外のプラグインを全て停止し、ページ&ブラウザキャッシュを削除して再確認しましたが、だめでした。
ちなみに、PORIPUのトップページ記事一覧にシェア数を表示する機能でも同様の問題があります。
投稿ページのタイトル下のシェアボタンでは問題なく機能しています。

カスタマイズしていないWordPress、SANGO、PORIRUで試しても解決できませんでした。
他に考えられる原因はありますでしょうか?

p.s.(別件)
スマホ版Google ChromeにおいてCSSの表示がおかしい(フォントが少し上気味)なのですが、これはブラウザ依存のため対策の仕様がないという認識でいいのでしょうか?

モバイル用フッター固定メニューの設定方法
コメントへの回答
サルワカくん
サルワカくん
2020/07/22

お世話になっております。
モバイルフッター固定メニュー上のカウント数は、スペースが狭いためあえて非表示になっています。
以下のCSSを追加することで表示可能かと思います。

.fixed-menu__share .scc {
    display: block;
    bottom: -10px;
}

PORIPUの方はこちらでは分からないですね・・・。

スマホ版のGoogle ChromeというのはAndroidのChromeという理解で良いですか?
(iOSのChromeはほぼSafariなので)
また、CSSの表示がおかしいのはどの部分でしょうか?
(シェアのカウント数 or サイト全体のフォント)

よろしくお願いします。

アバター
れおん
2020/07/22

シェア数に関して、無事に解決できました。
ありがとうございます。

CSSの件について。説明不足で申し訳ないです。
●表示がおかしい環境
・iPhone11 Pro Max iOS13.6 Google Chrome84.0.4147.71

●表示が正常の環境
・iOSのGoogleアプリ、Safari、Edge、Smooz
・iPad OS のGoogle Chrome等
(Androidは実環境がないためわかりません)

CSSの表示がおかしい部分ですが、装飾系?のフォントです。
説明が難しいですが、例えば
・すべてのSNSボタンのFont Awesomeによるマークがボタンの中心よりやや上に表示される。
・記事一覧のカテゴリラベルの文字がラベルの中心よりやや上に表示される。
・ヘッダーのハンバーガーメニューと検索マークが通常よりやや上に表示される。
・番号を装飾した箇条書きの表示が下に崩れる
等です。(他にもあり)

共通点がいまいち分かっていません。
SANGOのデモページでも同様の現象が起きているので、ブラウザかハードが原因かと思いますが、ちょっとモヤモヤするので質問した次第です。

変な質問で申し訳ないです。

サルワカくん
サルワカくん
2020/07/22

とても詳しく情報を載せていただき、ありがとうございます。
私の環境(iOS12.5.1 および iOS13.6)にて、Chromeアプリ(84.0.4147.71)の表示を確認してみたのですが、問題が確認できませんでした。アイコンは他のブラウザと同じ位置に表示されています。
説明の内容的にはCSSのvertical-alignプロパティが適切にブラウザに反映されていないのだと思われます。

(iOSのChromeアプリそのような機能があるのか分かりませんが)アドブロックや拡張機能的なものが影響しているのかもしれません。
問題が再現できないため、これ以上の原因究明はできず・・・
何か分かりましたら、こちらのコメント欄に記載します。

よろしくお願いします。

アバター
れおん
2020/07/24

お世話になっております。
問題が解決されたため報告いたします。

問題の原因を簡潔に言うと、
 「iPhone本体のフォントサイズが優先され、CSSが崩れる」のようです。
対策として、
 ・* {-webkit-text-size-adjust: 100%;}
でiPhone本体のフォントサイズの影響を受けなくなり解決されました。

●その他わかったこと(上記の対策なしの状況で)
iOSのGoogle Chromeを再インストールすると、正常な表示になります。
その後、iPhone本体のフォントサイズを少しでも変更すると、サイトで設定されているフォントサイズが無視され、スタイルが崩れます。
(外観->カスタマイズ->デザイン・レイアウト->フォントサイズはデフォルトでも値を変更しても意味ない)
他のブラウザではiPhone本体のフォントサイズの影響を受けません。

通常、iOSのGoogle Chromeの右下のメニュー(設定等がある場所)にはフォントサイズを変更するようなものはありません。
しかし、iPhone本体のフォントサイズを変更すると、なぜか「テキストを拡大…」という項目が出現します。
その項目でフォントサイズを調節することで対策ができますが、あくまで1つのサイトにのみ適用されます。
サイトごとにブラウザのフォントサイズを調整しなければならないため意味がありません。

iPhone本体のフォントサイズの変更はすべてのサイトに影響があるため美調節すれば一見よさそうですが、iPhoneすべてのフォントがへんこうされるため適切ではないようです。
以上です。

お騒がせしましたm(_ _”m)
よろしくお願いします。

サルワカくん
サルワカくん
2020/07/25

お世話になっております。
非常に丁寧に解説していただき、ありがとうございます。
なるほど、
SANGOのstyle.cssではあらかじめbody { -webkit-text-size-adjust: 100%; }が指定されているのですが、iOS Chromeアプリで特定のフォントサイズ設定にしていると*{ -webkit-text-size-adjust: 100%; }にしないと効かないという感じなんですかね。不思議な挙動なので、今後のアプリのアップデートで修正されると良いですね・・・
私の方でもチェックしてみます。

詳しく報告していただき、ありがとうございました。