タブブロックを動作させる script は共通の js ファイルではなくてタブブロック用のファイルに書いてあるので、カスタム HTML ブロックにコードを書くとタブブロックとは認識されずに js ファイルが読み込まれず動作しないということはあるかもしれません…。
カスタム HTML 化しない場合はどうでしょうか？
右のグリッド画像にリンク設定をしたいと思っておりまして、、
なるほど…。
カスタマイズで右と左の枠をheightで設定すれば良いものなのでしょうか・・？
画面が広くなったら画像も広くならないとですよね？ 画像のトリミングは NG で画角は維持しないといけないとすると、 height で高さを固定したら width も固定しないとなので、それだと画面に合わせて画像が大きくならなくなってしまいますよね。
なのでやるとすれば画像のサイズとカラムのサイズをびっちり計算して合わせるしかないのかなと…。ちょっとこちらでやってみました。共有していただいた URL に現在使用されている画像からサイズを計算して適用してみました。エディターをコードエディターに切り替えて下記のコードを貼り付け、ビジュアルエディターに戻すと表示されます。
<!-- wp:group {"align":"full","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull">
<!-- wp:snow-monkey-blocks/flex {"layout":{"orientation":"horizontal","type":"flex","flexWrap":"wrap"}} -->
<div class="wp-block-snow-monkey-blocks-flex smb-flex">
<!-- wp:image {"sizeSlug":"large","smb":{"flexBasis":"73%"}} -->
<figure class="wp-block-image size-large"><img src="https://placehold.jp/2173x1100.jpg" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:snow-monkey-blocks/grid {"columnsOption":"columns","columns":2,"rows":2,"smb":{"flexBasis":"27%"}} -->
<div class="wp-block-snow-monkey-blocks-grid smb-grid smb-grid--columns:columns smb-grid--rows:rows" style="--smb-grid--gap:0;--smb-grid--columns:2;--smb-grid--rows:2">
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
<!-- /wp:image -->
</div>
<!-- /wp:snow-monkey-blocks/grid -->
</div>
<!-- /wp:snow-monkey-blocks/flex -->
</div>
<!-- /wp:group -->
とりあえず全幅にするために全体を全幅のグループブロックで囲って、左右のカラム分割のためにフレックスブロックを入れました。で、左側は普通に画像ブロック、右側は4個を並べるためにグリッドブロックを使いました。
そして、左の画像ブロックのサイズ→基本サイズを 73%、右側のグリッドブロックのサイズ→基本サイズを 27% にしました。ただ、ページに掲載されていた画像に基づいて計算すると、本当は 73% ピッタリではなくて 0.73091153716… のように小数になってしまったので、若干ずれて上下に余白が入ってしまいます。ぴったり整数になるような画像サイズにすれば余白がなくなるはずです。
問題点としては、スマホでもこのレイアウトを維持してしまうので、スマホではカラム落ちさせたいという場合は CSS を追加するか、Snow Monkey Editor プラグインの「表示設定（ウインドウサイズ）」の設定でスマホでは非表示にするようにして、スマホはスマホ用で別につくる、みたいなことが必要になります…。
ここまで書いてあれですが、このレイアウトが必須であるなら、僕なら「カスタム HTML ブロック」で HTML を書いちゃうかなぁと思います。既存ブロック + CSS で無理やり実装すると後々メンテナンスが面倒になる可能性があるので…。
ご教示いただきましてありがとうございます！
一枚画像がいいですよね。。私もそう思ったのですが、右のグリッド画像にリンク設定をしたいと思っておりまして、、
カスタマイズで右と左の枠をheightで設定すれば良いものなのでしょうか・・？
右の枠と左の枠の大きさが違うので、画像を普通に配置したら大きさが合わずに余白が生まれてしまいます。ブロックを使うのであれば、中の画像を枠の大きさに合わせて広げて、画像をトリミングする形で表示する必要があると思います。
ちなみに、僕の環境で見ると右側の画像は潰れてしまっています。
画像だけのレイアウトなので、ブロックを組み合わせて CSS を書いて…とやってメンテナンス性を落とすよりも、1枚の画像で作ってしまったほうが簡単かもしれません（地下鉄今里駅から…等の文章が画像ではなくてテキスト必須、のような要件であれば無理ですが…）。
【お使いの Snow Monkey のバージョン】28.0.4
【お使いの Snow Monkey Blocks のバージョン】23.0.3
【お使いの Snow Monkey Editor のバージョン】 10.1.2
【お使いのブラウザ】Google Chrome
【当該サイトのURL】https://hirokolc-imazato.com/
### 実現したいこと
FVの画像を隙間なく表示したい。
### 発生している問題
FV左の画像が上下に空白ができてしまう。
右のグリッド表示に空白ができてしまう。
### 試したこと
追加CSSでheigthを数字を調整したりしたのですが、変わりませんでした・・
検索し、カスタマイズをいろいろ試してみたのですが、解決せずお助けいただけたらありがたいですm(_ _)m
これですよね。
これはアコーディオンブロックを使っているので、構造化データは出力されません。構造化データが出力されるのは FAQ ブロックを使った時になるので、構造化データが必要な場合は FAQ ブロックを使うのが良いです。
SnowMonkeyに無関係にもかかかわらずありがとうございます。
FTPの設定すらしてなかったので、パーミッションや.htaccessをいじってもいません。
昨日やったことと言えば、SiteKitを設定したことと、プラグインを自動更新にしたことです
サーバー会社の調査がどこまで可能なのか分からないですが、一度それをまって場合によっては
テストサイトからのリカバリーを考えて見ます。
WordPressのコアファイルの上書きもありえますよね
本当にありがとうございました
一般的に 403 の原因というとこんな感じでしょうか。
– .htaccess でアクセス制限していないか
– セキュリティ系プラグインでアクセス制限していないか
– サーバー側で IP アドレス制限などをしていないか
– ファイルのパーミッションを変更していないか
クラッキングされた可能性が高いのであれば現状のバックアップをとった上で、過去のバックアップを復元するとか、FTP で WordPress のコアファイルを入れ替えるとかをやってみるのも良いかもですね。
