パネルを正方形にしたい

0
いいねをした人: 居ません
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #104102
    いとすりょう
    閲覧者
    5

    【お使いの Snow Monkey のバージョン】バージョン: 16.5.4
    【お使いの Snow Monkey Blocks のバージョン】バージョン 15.0.6
    【お使いの Snow Monkey Editor のバージョン】バージョン 7.0.1
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】https://creative-ocean-design.com/rise-nexter/

    ### 実現したいこと

    トップ画面に実装しているパネルを、縦長から正方形に変えたい

    ### 発生している問題

    思いつく限り、Chromeの検証機能を使ってCSSを変更しているが、正方形にできない

    ### 試したこと

    当てたCSS= height: 24vw;

    ①パネル自体にCSSを当てると、後ろの要素は小さくなるが、画像や画像上の文字とボタンはそのまま。

    (パネル自体=wp-block-snow-monkey-blocks-panels-item-block-link c-row__col panel-height

    ②パネルの中の要素に対しても同様の作業をしたが、①と同じ結果に。

    (パネルの中の要素=smb-panels__item smb-panels__item--block-link

    こちらも同様→smb-panels__item__body

    cssの当てる場所が悪いのかと試しましたが、うまくいかず、6時間ほど彷徨っております。泣

    お忙しいかと思いますが、教えていただけますと嬉しいです。

    よろしくお願いします。

    0
    いいねをした人: 居ません
    #104107
    GONSY
    参加者
    841

    @いとすりょう さんがご提示されているサイトを現状のまま試すと、(たぶん)以下のCSSで正方形になると思います。

    .smb-panels__item {
    	overflow: hidden;
    }
    
    .smb-panels__item::before {
    	content: "";
    	display: block;
    	padding-top: 100%;
    }
    
    .smb-panels__item__body {
    	position: absolute;
    	top: 0;
    	left: 0;   
    	width: 100%;
    	height: 100%;
    	min-height: auto;
    	min-width: auto;
    	object-fit: cover;
    	object-position: 50% 50%;
    }

    ただ、このままですと、ページタイトルMoreがズレます。
    この要素を入れている.wp-block-cover__inner-containerを、上下中央になるように追加の記述が必要になると思います。
    一度お試しくださいませ。

    0
    いいねをした人: 居ません
    #104857
    いとすりょう
    閲覧者
    5

    @GONSY さん、できました!

    無事に納品まで終わっておりましたが、返信&トピックを畳むの失念しておりました💦

    久しぶりにCSSを触りましたが、すっかり忘れているもんですね。笑

     

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

    1
    いいねをした人:
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「パネルを正方形にしたい」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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