固定ページのinstagram埋め込みPHP。
どうしてもリンクの下線が消えてくれないので、力技で下線自体を曲げて画像に下線を隠す事にしました。
(コンテンツ自体は-webkit-box-shadowとbox-shadowを無効にすると消えます)
ついでに「readmore」ボタンがにっこり笑ってますがご愛嬌。
/*Instagramのstyle*/ .insta_list{ display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; } .insta_list li{ position: relative; width: calc((100% - 20px)/3); } @media screen and (max-width: 750px){ .insta_list li{ width: calc((100% - 20px)/2); } } .insta_list li::before{ content: ""; display: block; padding-top: 100%; } /*下線消す*/ /*画像を丸くする.insta_list img:hoverとborder-radiusの数値を合わせる必要がある*/ .insta_list a{ position: absolute; top: 0; width: 100%; height: 100%; border-radius:50%; /**/ } .insta_list img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: all 0.3s ease-in; border-radius:20%; } /*画像を丸くする*/ .insta_list img:hover { filter: grayscale(0%); border-radius:50%; /**/ } .insta_btn{ background-color: #000; padding: .5em 1em; width: fit-content; margin: 0 auto; border-radius:40%; cursor: pointer; transition: .5s } /*〇mazonみたいになってる*/ .insta_btn a{ color: #fff; text-decoration: none; border-radius:50%; } /*〇mazonみたいになってる*/ .insta_btn:hover{ background-color: #999; border-radius:50%; text-decoration-line: none; }