- このトピックには7件の返信、3人の参加者があり、最後に
により2年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】5.9
【お使いの Snow Monkey Blocks のバージョン】14.1.0
【お使いの Snow Monkey Editor のバージョン】7.0.0
【お使いのブラウザ】Chrome
【当該サイトのURL】https://www.shipsltd.co.jp/shipsmag/### 実現したいこと
3カラムで並んでいる画像をクリックすると、タブ機能のようにページを切り替えたいです。
切り替えるページ内容はカテゴリー毎の一覧です。
イメージは以下です。
画像Aをクリック→xxxカテゴリー記事一覧表示
画像Bをクリック→yyyカテゴリー記事一覧表示
画像Cをクリック→zzzカテゴリー記事一覧表示
上記を実現したいです。どうしたら実現できるでしょうか？
当該サイトの少し下にスクロールした場所にある、M・W・Kの画像をクリックすると、カテゴリー毎に切り替わるのと一緒です。
よろしくお願いいたします。
### 発生している問題
### 試したこと
いいねをした人: 居ませんバージョン情報は「最新」ではなく数字を記述してください。同じことをやりたい人がトピックを参照したときに参考にするためです。
タブブロックの中に任意のタクソノミーの投稿ブロックをいれたらどうですかね？
いいねをした人:見た目的にだと、Snow Monkey Blocks の項目ブロックのバナーを使って、CSSでカスタマイズすると似たようなものが作れるかもしれませんね。
カテゴリー一覧ページ各々については、直接リンクを設置する形になるかとは思いますが…
いいねをした人:みなさま、お忙しい中お返事いただきありがとうございます。
キタジマ タカシ様
>>タブに CSS で背景画像を追加するとかですかね
→こちらタブには個別のクラスが付けられていないため、実現ができませんでした。
→タブには.smb-tabs__tabクラスが付けられており、複数のタブを作っても全て同じクラス名でした。そのため、別々の画像を表示することができませんでした。
Olein_jp様
>>カテゴリー一覧ページ各々については、直接リンクを設置する形になるかとは思いますが…
→こちら、直接リンクとはどういう意味でしょうか？
お手数お掛けしますが、よろしくお願いいたします。
いいねをした人: 居ませんこちらタブには個別のクラスが付けられていないため、実現ができませんでした。
.hoge .smb-tabs__tab-wrapper:first-child > .smb-tabs__tab { ... }みたいな感じで親からたどってセレクタ指定すればいけると思います。2つめ3つめは
nth-child()使うみたいな。いいねをした人: 居ませんこちら、直接リンクとはどういう意味でしょうか？
カテゴリー一覧のページURLが
sample.com/category/hogehogeとかになると思うので、そのURLを各バナーブロックごとに設定していかないといけないという意味ですねーいいねをした人: 居ません
- トピック「画像クリック→カテゴリー毎に切り替える」には新しい返信をつけることはできません。