クリッカブルなカルーセル(文字なし)が作りたい

0
いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • 投稿者
    投稿
  • #137181
    アバター画像otomeweb
    参加者
    22

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

    ### 実現したいこと

    キービジュアル
    カルーセル
    メイン1にサブ2程度
    該当記事にクリッカブルで遷移
    リンク文字はなし(文字はバナー内に画像でいれる)
    アイキャッチ画像ぐらいの4:3〜16:9のバナー

    ### 発生している問題

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

    ### 試したこと

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

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

    0
    いいねをした人: 居ません
    #137184
    アバター画像キタジマ タカシ
    参加者
    2421

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

    <!-- 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
    いいねをした人: 居ません
    #137200
    アバター画像otomeweb
    参加者
    22

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

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

    というかんじです

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

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

    0
    いいねをした人: 居ません
    #137203
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

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

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

    0
    いいねをした人: 居ません
    #137240
    アバター画像otomeweb
    参加者
    22

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

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

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

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

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

    並びました!

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

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

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

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

    0
    いいねをした人: 居ません
    #137252
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

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

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

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

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

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

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

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

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

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

    0
    いいねをした人: 居ません
    #137522
    まーちゅう
    参加者
    367

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

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

    0
    いいねをした人: 居ません
    #137545
    アバター画像otomeweb
    参加者
    22

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

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

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

    0
    いいねをした人: 居ません
    #137551
    まーちゅう
    参加者
    367

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

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

    0
    いいねをした人: 居ません
    #137559
    まーちゅう
    参加者
    367

    こんな感じ

    0
    いいねをした人: 居ません
    #137570
    アバター画像otomeweb
    参加者
    22

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

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

    0
    いいねをした人: 居ません
    #137581
    アバター画像otomeweb
    参加者
    22

    /*
    //ピックアップスライダー
    */
    
    .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
    いいねをした人: 居ません
    #137627
    アバター画像キタジマ タカシ
    参加者
    2421

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

    0
    いいねをした人: 居ません
    #137631
    アバター画像otomeweb
    参加者
    22

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

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

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

    1
    いいねをした人:
    #137721
    アバター画像otomeweb
    参加者
    22

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

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

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

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

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

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

    0
    いいねをした人: 居ません
15件の投稿を表示中 - 1 - 15件目 (全17件中)
  • トピック「クリッカブルなカルーセル(文字なし)が作りたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。