固定ページの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;
}

13 Replies to “固定ページのInstagramのstyle”