[星乃 みなみ]

ありがとうございます！　できました！

疑似要素使う手がありましたね。CSSすごい

♥ 1

いいねをした人:

[星乃 みなみ]

あ、一時的に画像にしましたが、今フォントにもどしました
ご指摘のとおり、v.0.11になってる部分を小さくしたいです（色もグレーとか）

サイト内容を考えながら構築してるので、バージョン情報をつけたかったのです。

♥ 1

いいねをした人:

[星乃 みなみ]

contain惜しいですね　上の余白と、下が足りないのをどうするか
左右の余白は許容範囲

上をCSSで詰めて、下を画像を伸ばして対応できればこれでいってみます

ちょっと他作業あるので、のちほどやります（自社サイトなので）

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

あ、なるほど！　ばたばたしててCSSまで確認できてませんでした。
ボックス要素にobject-fitがかかってるのですね。

object-fitの値かえるか、画像のコピー部分を小さくあつかうか
両戦略で攻めてみます。まずはcontainでどうみえるかですかね
だめなら、もとにもどして画像編集かな

ありがとうございます！
もう少しやってみてからクローズしますね

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

病院行ってきました。明日大きな病院いきます😭

関係ない話はこれくらいにして、コードを見た感じだと、ちゃんと両方が記述されてるようです。これがメディアクエリーと、srcset　で切り替わるってことですよね。

もしかして、ちゃんと画像は表示されていて、実は拡大表示されてるとかありますかね。そもそもSnow Monkeyの問題じゃなくって、わたしの最新のHTML/CSS理解不足？

<div class="smb-section-with-bgimage__bgimage smb-section-with-bgimage__bgimage--lg"><img loading="lazy" width="1024" height="576" src="https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-1024x576.jpg" alt="ホームページのお医者さん" class="wp-image-2256" style="opacity:1;object-position:50% 50%" srcset="https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-1024x576.jpg 1024w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-300x169.jpg 300w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-768x432.jpg 768w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2-1536x864.jpg 1536w, https://www.kigoulab.co.jp/wp-content/uploads/2020/10/default_ph2.jpg 1920w" sizes="(max-width: 1024px) 100vw, 1024px"></div>

<div class="smb-section-with-bgimage__bgimage smb-section-with-bgimage__bgimage--sm"><img loading="lazy" width="698" height="698" src="https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp.jpg" alt="" class="wp-image-3236" style="opacity:1" srcset="https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp.jpg 698w, https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp-300x300.jpg 300w, https://www.kigoulab.co.jp/wp-content/uploads/2022/04/default_ph2_sp-150x150.jpg 150w" sizes="(max-width: 698px) 100vw, 698px"></div>

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

あ、一番肝心な情報をあげるの忘れてました！

2番目のキーボードにKigoulabのロゴが乗ってる画像です！

そっか、コードに両方書かれてるですね
後ほど確認してみます。

実は後から車ぶつけられて、これからの病院です。

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

ショートコード追加してうまくいきました！
ありがとうございます！

今頃で申し訳ない

閉じますね

♥ 1

いいねをした人:

[星乃 みなみ]

わたしが質問してるのですね

結局、ショートコードの作り方が分からず、途中でとまってたんだ、思い出した

コードの作り方探します。みつかるかな….エンジニアヘルプな感じ
たまにしかコードをいじらないとすぐ忘れるお歳頃なんです　再来月アラカンだし

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

GONSY さん キタジマさん　さっそくありがとうございます。
やっぱり、フィルターフックで引っかければ現状OKということですね
併用コードがオフィシャルで発表されてるとは思いませんでした

ただ、GA4ってCookieつかわないバージョンなので、測定項目が大幅に変更され、お客様むけのレポーティング内容の変更や、KPIの指数変更など、ビジネス面での対応も大変そうです、なのでUAとの併用したかったのです

お客様対応でいく場合は、Snow Monkeyのアップデート待ちな感じかな

いずれにせよ、ありがとうございました！

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

お二人ご回答ありがとうございます。まーちゅうさんのがまさにイメージにあってます。

オレインさん。ブロックにはあるけど非推奨なんですね。そういえば遅くなるから辞めるとか言ってらっしゃったような気がしてきました。

ブロックを新たに作るのって難しいんでしょうか？PHPごりごり書く必要あります？CSSでパララックスのコーディングだけなら自分でも出来そうなきがするのですが。

まず、まーちゅうさんのやりかたでやってみて、さらにカスタマイズしてみたい場合はブロックをつくることを検討してみますね。

Snow Monkeyって以外とデザインのカスタマイズの自由度が高くて、デザイナーのわたしには助かります。

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

ご指摘ありがとうございます

/* ホーム　特集 */
.c-entry-summary__figure {
	padding-top:200px;
	padding-bottom:200px;
	margin-bottom:2px;
}

が悪さをしてたようなのですが、このコードがどこに使われていたか
本番前に、特集のダミー記事を削除されてしまったので、検証ができない状況です

公開はできるようになりましたので、いったんコメントアウトしたままにして
特集に記事が入ってきた時にどのように動作するかを試してみます

ありがとうございました！

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

GONSYさん　こんにちは

早速のご指摘ありがとうございます
確かに全角になっていました。

修正したところ、投稿者は消えたのですが
画像がなぜか縦長にひずんでしまいました

何が原因だったかわかりますでしょうか

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

モバイルファーストで書いているので @media (min-width: xxx) の記述のほうがかなり多いはずです。

なるほど、理解しました！

それでは閉じますね　ありがとうございました！

♥ 1

いいねをした人:

[星乃 みなみ]

@media screen and (max-width: 1024px) { … }
みたいな使い方はしてないってことでしょうか？

♥ 0

いいねをした人: 居ません

[星乃 みなみ]

そういう部分もあるかもですが、あくまでブレイクポイントですね。

あくまでもブレークポイントの定義というのはわかるのですが
max-widthでないケースってどのようなものがありますか？
例えばタブレットだったら、これ以上、これ以下的にはさんでつかってるとか？

♥ 0

いいねをした人: 居ません

[投稿者]

投稿