固定ページのInstagramのstyle

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください