すみません、1つ上の返信なのですが、AutopitimizeでJavaScriptコードの最適化が走っていたために確認できなかったようでした。
こちらの設定の問題でしたので、上記への返信は不要でした･･･。失礼いたしました。
ありがとうございます！
my-snow-monkey.php に下記追記してみたのですが、コードが追加されず（ソースやDataLayer値への追加が確認出来ず･･･）でして･･･。そのままコードを挿入して追加ではダメなのでしょうか。
// 同意モード用スクリプトの追加
add_action(
'wp_head',
function () {
?>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'personalization_storage': 'denied',
'security_storage': 'denied'
});
const cmd = "yuwai-inc.jp"
const matches = document.cookie.match(new RegExp(
"(?:^|; )" + "cookie_consent_gcm_data".replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
let val = null;
if (matches) {
cData = JSON.parse(decodeURIComponent(matches[1]));
if (cmd === cData.cmd) {
val = cData.gGcType
}
}
if (!val) {
const lData = localStorage.getItem('cookie_consent_gcm_data')
if (lData) {
const lCmdData = JSON.parse(decodeURIComponent(lData))[cmd]
if (lCmdData) {
val = lCmdData.gGcType
}
}
}
if (val) {
let updateVal = {};
for (let i = 0; i < val.length; i++) {
updateVal[val[i]] = 'granted';
}
if (Object.keys(updateVal).length !== 0) {
gtag('consent', 'update', updateVal);
}
}
</script>
<?php
},
1
);
また、シークレットウィンドウで見ると、Firefoxと同じ正しい表示でした。
なるほどです。恐らくブラウザキャッシュの影響ではないかと思います。サーバーの設定や使用しているプラグインの設定によってブラウザキャッシュを強く残すようになっている場合、CSS や JS、画像を更新したのにキャッシュ（ブラウザに一時的に保存されている古いバージョン）が使用されて、新しいものが反映されないということが起こり得ます。
ありがとうございます！
パラメーターが色々あって、タグマネージャーの ID みたいにぽんと入れれば終わりというわけではなさそうなので、サクッと機能追加するのは難しそうですね…。今後のアップデートで、「Google 同意設定を有効化」にチェックを入れると下記のコードが出力されるようになる、さらに default の各パラメーターの値はフィルターフックでカスタマイズできるようにする、というのはやりたいなと思いました。
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Set default consent to 'denied' as a placeholder
// Determine actual values based on your own requirements
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied'
});
</script>
ということで、現段階では独自にアクションフックを使って計測タグを挿入する形になるかなと思います。現状タグマネージャーのコードは wp_head の優先度 10 で出力されているので、wp_head の優先度 10 未満で計測タグを出力するようにすると良いのかなと。
add_action(
'wp_head',
function () {
?>
// ここに計測タグ
<?php
},
1
);
これでタグマネージャーのコードより前に（「直前」にコントロールする方法は現状無いです…）出力されると思うので試してみてください！
キタジマ様
早々にお返事いただきありがとうございました。
返信遅くなりまして、失礼いたしました。
ご教示いただいた通り、ファーストビューのSafariはアニメーションを止めて表示されました。
また、シークレットウィンドウで見ると、Firefoxと同じ正しい表示でした。
なぜこのようなことが起こるのか理解できておりませんが、外部からみた場合は正しい表示がされていると言うことなのかと認識しましたが、間違いないでしょうか。
ひとまず解決ということでトピックは閉じます。
また不具合があった際は、相談させていただけますと幸いです。
【当該サイトのURL】
### 実現したいこと
投稿の一覧で、各投稿のカテゴリーを複数表示にしたい。
カテゴリーの設定はリノベーション、トイレ、キッチンです。
解決方法があればご教授お願い致します。
初めての投稿なので、失礼があった場合はすみません。
### 発生している問題
カスタマイズ方法を設定しましたが、
カテゴリーが縦に並ばず、既存の位置に重なりあっていて、当該サイトのように表示されない。
同意モードについては下記のドキュメントを参照いただけると良いかと思います。
同意設定を管理する（ウェブ） | Security and Privacy hub | Google for Developers
https://developers.google.com/tag-platform/security/guides/consent?hl=ja
Cookie 同意バナーを利用している場合、同意の状況に応じて Google タグマネージャーがタグをコントロールしてくれるのがこの同意モードなのですが、当方が利用している Cookie 同意バナーの場合、これを利用するにあたっては Google タグマネージャーのスクリプトよりも前に下記のスクリプトを実装する必要があるようです。
EU の法律（GDPR）的には、EU 圏内からのアクセスに対しては Cookie の利用に際して同意を得ないとならないので Cookie 同意バナーを導入しているのですが、同意バナーの利用＆同意モードの実装はまだレアケースだと思うので、短期的には機能として提供いただくほどのものではなさそうですが、長期的に見ると日本を含めて法律がどうなるかによっては需要があるのかな･･･ぐらいの感覚です。
どうぞよろしくお願いいたします。
<!-- STRIGHT ONE Google Consent Mode Tag Start -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'personalization_storage': 'denied',
' security_storage': 'denied'
});
const cmd = "yuwai-inc.jp";
const matches = document.cookie.match(new RegExp(
"(?:^|; )" + "cookie_consent_gcm_data".replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
let val = null;
if (matches) {
cData = JSON.parse(decodeURIComponent(matches[1]));
if (cmd === cData.cmd) {
val = cData.gGcType;
}
}
if (!val) {
const lData = localStorage.getItem('cookie_consent_gcm_data');
if (lData) {
const lCmdData = JSON.parse(decodeURIComponent(lData))[cmd];
if (lCmdData) {
val = lCmdData.gGcType;
}
}
}
if (val) {
let updateVal = {};
for (let i = 0; i < val.length; i++) {
updateVal[val[i]] = 'granted';
}
if (Object.keys(updateVal).length !== 0) {
gtag('consent', 'update', updateVal);
}
}
</script>
<!-- STRIGHT ONE Google Consent Mode Tag End -->
・Safariのファーストビューのメインコピーが表示されないです
Snow Monkey Editor のアニメーション機能を使用されていると思うのですが、スクロールと要素の位置でアニメーションが発火（フェードインの実行）する仕組みになっているので、一番最初の要素だとそれがうまく動かないみたいです。後で修正できるか調査してみようと思いますが、とりあえずその部分についてはアニメーションを外すのが良いかなと思います。
・Chromeのインライン画像の位置がおかしくなり、行がずれて表示されていたり、離れすぎて表示されています。アイコンリストも左に寄りすぎています。
Safari と Chrome で確認してみたのですが、どちらもスクショいただいたような表示は確認できませんでした。シークレットブラウザで見てもスクショのような崩れが発生しますか？
【お使いの Snow Monkey のバージョン】28.0.4
【お使いの Snow Monkey Blocks のバージョン】23.0.2
【お使いの Snow Monkey Editor のバージョン】10.1.2
【お使いのブラウザ】Chrome,Safari,Firefox
【当該サイトのURL】https://bestwishes.website/
### 実現したいこと
すべてのブラウザで多少の誤差は仕様がないものの、ほぼ同じに見えるようにしたい（特に大きなレイアウト崩れや表示の違いは避けたい）
### 発生している問題
Chromeのインライン画像や、ボックスの中のアイコンリストに位置、Safariのファーストビューの表示が崩れてしまいます。
具体的には、
・Chromeのインライン画像の位置がおかしくなり、行がずれて表示されていたり、離れすぎて表示されています。アイコンリストも左に寄りすぎています。
・Safariのファーストビューのメインコピーが表示されないです。
制作中はすべてのブラウザで正しく表示されていました。
制作完了して、数日経ってレスポンシブ対応しようとしたところ、現状Firefoxだけ正しい表示になり、ChromeとSafariが崩れて
### 試したこと
検証ツールで該当の要素のコードを確認しました。
Snowmonkeyの各バージョンの確認などを行いました。
よろしくお願いいたします。
ヘッダーコンテンツはヘッダーに内包されるので、スクロール時にヘッダーコンテンツが消えるというよりはヘッダーがスクロールとともに隠れるということかな？と思ったのですが認識はあっていますか？
もしあっているのであれば、ヘッダーがスクロールで隠れないようにするしかないと思うので、ヘッダー位置の固定表示を試してみると良いかもしれません。
あるいは、ドロップナビゲーション（スクロールすると上からにゅっとでてくるナビゲーション）にも Facebook アイコンを表示したいということであれば、ヘッダーコンテンツを使わずに、メニューに Facebook アイコンを追加するのが簡単だと思います。メニューでカスタムリンクを追加するときに「リンク文字列」に FontAwesome が使用できます。
ご回答ありがとうございます。
確認したところ「Advanced Custom Fields」プラグインで「カスタムCSS」というフィールドを作成しているようでしたが、このフィールドの更新がなぜか反映されないようになっていました。（フィールドの新規作成は可能でした）
原因はAdvanced Custom Fields側にあるようなので、引き続き調査してみます。
お手数をおかけしました・・・
