- このトピックには4件の返信、2人の参加者があり、最後に
により2年、 1ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】17.2.8
【お使いの Snow Monkey Blocks のバージョン】16.1.0
【お使いの Snow Monkey Editor のバージョン】8.0.2
【お使いのブラウザ】chrome
【当該サイトのURL】いつもお世話になっております。
表題のとおり、「最近の投稿」ブロックで挿入した記事一覧のサムネイル（今回はリッチメディアを使用しています）のサムネイルを正円にトリミングしたいです。
単純な画像であれば正方形の画像を用意し
border-radius: 50%;のみでいけるかと思うのですが、snow monkeyのサムネイルは4:3？で構成されているようなので当然それではトリミングできず…。widthとheightをそれぞれ同じ値にして無理矢理正方形の状態を作りさらにborder-radiusを当てると一応画像自体は正円にできました。
ただ、そうなると画像が本来載っている部分の背景？が表示されてしまうのでその背景を消したり、またサムネイルはそもそも可変なようなので、大きな画面で見ているときは問題なくても画面が小さくなると画像も見切れるようになってしまい…
また画像を円に切り取った真ん中に配置することができず、カテゴリーのラベルとの間も空いてしまいやや不格好にもなってしまいました。
※具体的には下図のような表示です
また上の表示をする際に書いたコードは
.c-entry-summary__figure { background-color: #fff; } .c-entries__item>a .c-entry-summary__figure>img { border-radius: 50%; object-position: 0px; object-fit: cover; width: 250px; height: 250px; }となります。
上記ではモニターサイズの可変に対応できないのが一番の問題ですので、解決するにはやはりそもそも出力されるデフォルトを正方形にし、それをborder-radiusで正円に切り取れば良いのかも？とも考えたのですが、具体的にどうすれば良いのかがわからず…具体的にそのようなやり方で対処は可能でしょうか？もしくはそもそもアプローチが間違っていますでしょうか？
お忙しいところ恐縮ではございますが、実現方法についてアドバイスいただけますと幸いです。
何卒よろしくお願いいたします。
いいねをした人: 居ませんこんにちは
.c-entry-summary__figure { border-radius: 50%; } .c-entry-summary__figure:before { padding-top: 100%; }こちらのCSSで、どうでしょうか？
いいねをした人:
>まーちゅう様
ご返信ありがとうございます。
早速いただいたコードを試したところ、希望の形になりました！
padding-top:100%で1:1の比率を保つことができるとは知りませんでした。
ただ教えていただいたコードですと写真は綺麗に可変になったのですが、各サムネイル右上のカテゴリーラベルがPC表示では消えて、スマホ表示では円の内部で見切れてしまうという状態でした。
こちらをPCでもスマホでもかけることなく、一定の位置に配置することは可能でしょうか？
いいねをした人: 居ません円からはみ出した部分は元々のCSSで
overflow: hidden;がかかっているので表示されなかったですね。
円の内部に表示する場合.c-entry-summary__figure .c-entry-summary__term { top: 50%; right: 50%; transform: translateX(50%) translateY(-50%); }これで、上下左右中央にカテゴリーラベルが表示されますので、%の値を変えて位置を調整してみてください。
カテゴリーラベルの表示位置が日付の横でもOKな場合は、こちらのCSSを追加してみてください。
.c-entries--rich-media .c-meta__item.c-meta__item--categories { display: inline-block; } .c-entries--rich-media .c-entry-summary__figure .c-entry-summary__term { display: none; }いいねをした人:
- トピック「最近の投稿の一覧表示（リッチメディア）のサムネイルを正円にしたい」には新しい返信をつけることはできません。