[otomeweb]

【お使いの Snow Monkey のバージョン】 25.2.7
【お使いの Snow Monkey Blocks のバージョン】20.3.5
【お使いの Snow Monkey Editor のバージョン】9.3.2
【お使いのブラウザ】chrome
【当該サイトのURL】https://kouenkai.otomejuku.jp/

### 実現したいこと

キービジュアル
カルーセル
メイン１にサブ２程度
該当記事にクリッカブルで遷移
リンク文字はなし（文字はバナー内に画像でいれる）
アイキャッチ画像ぐらいの４:３〜16:９のバナー

### 発生している問題

カルーセル３種を比較してみたけど、どれも帯に短したすきに長し
クリッカブルなものは文字がはいってしまうし、なぜか画像が縦長

### 試したこと

文字をCSSで消そうとしたけど、消すとリンクも消える
文字だけがクリッカブルでバナー全体がそうではない

基本モジュールだけで可能でしょうか？
よろしくお願いします。

♥ 0

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

[キタジマ タカシ]

コンテンツスライダーブロックに画像ブロックを入れて、その画像ブロックにリンクを設定したらどうですかね？
こっちで簡単なサンプルをつくってみました。下記をコピーしてエディターに貼り付けてみてください。

<!-- wp:snow-monkey-blocks/spider-contents-slider {"dots":true,"gutter":"s","lgSlidesToShow":3,"canvasPadding":{"top":0,"bottom":0,"right":0,"left":0},"sliderClientIds":"[\u0022a2ecfd33-7816-4132-89fc-98150866709a\u0022,\u0022e94cc24d-6ff7-4192-b402-c8249317eaac\u0022,\u0022b8ea18d1-835a-4409-88ec-34345728b00c\u0022,\u0022c29dcffc-a811-4f59-b4ed-6e913cff0a47\u0022,\u002203ede109-55dc-477e-84d8-bb97e1ac5447\u0022,\u00226e1cc54c-e96d-4f08-9891-bff1a1770d66\u0022]"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider smb-spider-slider smb-spider-contents-slider smb-spider-slider--gutter-s" data-fade="false" data-shuffle="false" data-lg-slide-to-show="3"><div class="spider"><div class="spider__canvas"><!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="0" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->

<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="1" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->

<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="2" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->

<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="3" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->

<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="4" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item -->

<!-- wp:snow-monkey-blocks/spider-contents-slider-item {"contentPosition":"center-center"} -->
<div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" data-id="5" data-content-position="center-center"><div class="smb-spider-contents-slider__item"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="https://example.com"><img src="https://placehold.jp/1200x900.jpg" alt=""/></a></figure>
<!-- /wp:image --></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider-item --></div></div><div class="spider__dots"><button class="spider__dot" data-id="0">0</button><button class="spider__dot" data-id="1">1</button><button class="spider__dot" data-id="2">2</button><button class="spider__dot" data-id="3">3</button><button class="spider__dot" data-id="4">4</button><button class="spider__dot" data-id="5">5</button></div></div>
<!-- /wp:snow-monkey-blocks/spider-contents-slider -->

♥ 0

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

[otomeweb]

ありがとうございます。カスタムHTMLに貼ってみました

LGBTQ+講演会

多様性についての講演をあなたの元に

kouenkai.otomejuku.jp

コードだと、なんらかのオブジェクトとして管理画面から運用者が更新できない
アニメーション表現がされてない

というかんじです

コードと、コンテンツスライダーブロックに画像ブロックを入れて、その画像ブロックにリンクを設定したらは別のはなしじゃないですよね　コンテンツスライダーに画像いれてみましたけど、並びません。できればスライダーのレイアウト（画像サイズ）等はいじることなく、固定値にしておいて管理画面からだけ更新できるようにしたいです（リンクをどうするかも考える必要がありますね）

結構ありがちな構成だと思うのですが、工夫可能でしょうか？

♥ 0

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

[キタジマ タカシ]

コードだと、なんらかのオブジェクトとして管理画面から運用者が更新できない
アニメーション表現がされてない

すみません、ちょっとどういう意味かわかりかねるのですが「コードを書き換えるのは手間だから UI で更新できるようにしたい」ということですかね？ コードを提示したのは貼り付けたらすぐに試せるからで、コンテンツスライダー自体はブロックなので、ブロックのインサーターから普通に挿入して設定できます。

コードと、コンテンツスライダーブロックに画像ブロックを入れて、その画像ブロックにリンクを設定したらは別のはなしじゃないですよね　コンテンツスライダーに画像いれてみましたけど、並びません。

「並ばない」というのはどういう意味でしょうか？ 2列・3列にできない、という意味であれば、コンテンツスライダーの設定パネルにある「表示するスライド数」から設定できます。

♥ 0

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

[otomeweb]

説明が下手くそですみません。

「コードを書き換えるのは手間だから UI で更新できるようにしたい」

その通りです。理想はカスタム投稿タイプとかつくって、それを投稿的に更新すると、入れ替わるというのをイメージしていました。

現状は、コンテンツを入れ替える＝ブロックの画像を差し替えてリンクを変更するですよね。
手順書作れば顧客側でもできそうなきがするので、ここは要件との調整をしてみます。

「並ばない」というのはどういう意味でしょうか？

並びました！

LGBTQ+講演会

多様性についての講演をあなたの元に

kouenkai.otomejuku.jp

細かいところで質問があります。配置時に、高さ100%と配置可能が選択できるのですが、違いはなんでしょうか

ブロックの設定で、フェード、スライダーをずらすの意味はなんでしょう、選択すると並びません

あと、ブロックで画像を並べてる時は、管理画面上では１画面目しかでてこないで、更新すると並んでるというのは仕様ですか？　画像サイズも大きめで取り込んでおけば、１枚目に合わせてリサイズされるというカタチでしょうか（または最少サイズにあわせて）

この辺がまだ理解できていません。よろしくお願いいたします

♥ 0

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

[キタジマ タカシ]

その通りです。理想はカスタム投稿タイプとかつくって、それを投稿的に更新すると、入れ替わるというのをイメージしていました。

なるほどです。Snow Monkey Blocks では実現できないので、もしそういう運用でやる必要があるのであれば独自に実装するか、実現できそうなプラグインを探すかになります。

配置時に、高さ100%と配置可能が選択できるのですが、違いはなんでしょうか

コンテンツスライダーの子要素であるスライドブロックに背景色をつけるとわかりやすいですが、「高さ100%」だと全てのスライドが一番高さが高いスライドと同じ高さになります。「配置可能」の場合はそのスライドの高さが中身にフィットするように縮みます。そのうえで、左上に配置するのか、右下に配置するのか、配置場所をブロックツールバーから選ぶことができます。

ブロックの設定で、フェード、スライダーをずらすの意味はなんでしょう、選択すると並びません

「フェード」は、スライドの切り替えがスライド動作ではなくフェードイン・アウトになります。
「スライダーをずらす」は下記のページ内にサンプルがあるので見てもらうのがわかりやすいと思います。

Snow Monkey Blocks v12.5.0 をリリースしました

Snow Monkey Blocks v12.5.0 の概要 機能追加 スライダー 新しい設定を追加：スライド…

snow-monkey.2inc.org

画面が広いほうがわかりやすいですが、通常、全幅にするとスライドが画面の一番左端から並びますが、「スライダーをずらす」を有効化するとコンテンツエリアの左端から並ぶようになります（ただ、スライド可能な範囲自体は全幅です）。

あと、ブロックで画像を並べてる時は、管理画面上では１画面目しかでてこないで、更新すると並んでるというのは仕様ですか？

繰り返しになりますが、「並ぶ」「並ばない」というのはどういう意味でしょうか？ スライドが横に並ぶ、という意味であれば、エディター上でもフロントでも設定した枚数で横並びになっていると思います（なっていないならバグなので調査が必要になります）。
エディター上ではスライドしない、フェードイン・アウトしない、という意味であれば仕様です。

画像サイズも大きめで取り込んでおけば、１枚目に合わせてリサイズされるというカタチでしょうか（または最少サイズにあわせて）

特にそのような仕組みはないので、画像ブロックの設定や CSS で調整することになります。

♥ 0

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

[まーちゅう]

理想はカスタム投稿タイプとかつくって、それを投稿的に更新すると、入れ替わるというのをイメージしていました。

「最新の投稿ブロック」を使用して、「レイアウト」の設定を「カルーセル(リッチメディア)」にしたうえで、CSSでテキスト部分を非表示にするのはどうでしょうか？

♥ 0

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

[otomeweb]

「最新の投稿ブロック」を使用して、「レイアウト」の設定を「カルーセル(リッチメディア)」にしたうえで、CSSでテキスト部分を非表示にするのはどうでしょうか？

文字がリンクだったようなきがするんですが…
バナー全体がクリッカブルになってほしいですよね

ちょっと調べてみますね　ありがとうございます

♥ 0

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

[まーちゅう]

文字がリンクだったようなきがするんですが…
バナー全体がクリッカブルになってほしいですよね

template-parts/loop/entry-summary の中身は
<section class="c-entry-summary"> の外側に <a> タグが付くので、文字だけでなくセクション全体がリンクになります。

♥ 0

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

[まーちゅう]

こんな感じ

♥ 0

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

[otomeweb]

ピックアップスライダーにしてみてるんですが（２段目）
画像がなぜか縦長になってしまい、16:9にならないのです
これは何が原因なのでしょう

左画像は、1280 x 720 ピクセル　です

LGBTQ+講演会

多様性についての講演をあなたの元に

kouenkai.otomejuku.jp

♥ 0

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

[otomeweb]

‘

/*
//ピックアップスライダー
*/

.smb-spider-pickup-slider .spider__slide {
  max-width: 33.33%;
}

.smb-spider-pickup-slider__item__title {
	display:none;
}

.smb-spider-pickup-slider__item__meta {
	display:none;
}

‘

ピックアップスライダーで以上のCSSを与えてみたのですが

– リンクがきえた
– 画像の比率がおかしい（トリミングされてしまう）
– 高さが高い

と言う問題がでています。CSSがおかしいのでしょうか？

♥ 0

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

[キタジマ タカシ]

最近の投稿ブロックのカルーセルと、ピックアップスライダーブロックでは HTML 構造が違うので、ピックアップスライダーでは多分実現できないと思います…。

♥ 0

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

[otomeweb]

最近の投稿ブロックのカルーセルと、ピックアップスライダーブロックでは HTML 構造が違うので、ピックアップスライダーでは多分実現できないと思います…。

そうなんですか、ニーズ高そうな気がするんですが残念です

最初に教えてもらった案か、最新の投稿ブロックを使った案で試して見ます。

♥ 1

いいねをした人:

[otomeweb]

ちょと自分でも混乱したのですが、以下のように解決しようと思っています

投稿
https://kouenkai.otomejuku.jp/

最新の投稿ブロックをつかってカルーセルにする。
文字を消して、インジケーターをもっと近くによせてコンパクトにします
このサイトはクライアント案件なので、管理画面で更新できるようにする

固定ページ
https://mixpie.design/

コンテンツスライダーをつかって、各ページへのリンクは手作業でいれる
そのほうが、たとえばPDFや外部サイトへのリンクもできるので柔軟性がある
このサイトは自社サイトなので更新性はとわない

こんな感じで対応しようと思います。結構つかうものなので、方向性が２つ整理できてよかったです
みなさんありがとうございます。ご意見なければトピック閉じますね

♥ 0

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

[投稿者]

投稿