プロスペリテ

human to human project

メニュー

sns風プロフィール

119 views
約 1 分

css

/*サイドバープロフィール*/
.widget_text {
border: 1px solid #eee;
}
.prof-img {
width: 150px;
height: 150px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
margin: 20px auto;
border-radius: 100%;
overflow: hidden;
}
.prof-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
.prof-name {
font-size:1.4em;
text-align:center;
}
.prof-job {
font-size:0.6em;
text-align:center;
font-weight:300;
}
.prof-info {
margin:20px;
}
.prof-sns {
padding-top:0.75em;
margin-top:20px;
text-align:center;
background-color:#1bb4d3; /*好きな色を適用させてください*/
color:white;
}
.prof-sns li{
display: inline-block;
border: 1px solid white;
border-radius: 100%;
width: 32px;
height: 32px;
position: relative;
margin: 10px 3px;
}
.prof-sns li i {
position: absolute;
top: 7px;
left: 7px;
color: white;
font-size: 1.2em;
}
.prof-sns .fa-facebook-f:before {
content: "\f39e"!important;
left: 3px;
position: absolute;
}
.prof-sns .fa-instagram:before {
font-size:1.15em;
}
.prof-sns li,.prof-img {
transition: transform 0.3s linear;
}
.prof-sns li:hover,.prof-img:hover{
transform: scale(1.1);

html

<div class="side-profile">

<div class="prof-img">
<a href="https://プロフィールページのURL"><img src="https://プロフィール写真のURL"></a>
</div>


<div class="prof-name">名前</div>


<div class="prof-job">仕事</div>


<div class="prof-info">紹介文</div>

<!--SNS紹介がいらない場合ここから-->

<div class="prof-sns">
	\ SNSをフォローしてね /

<ul>

 	<li><a href="FacebookのURL"><i class="fab fa-facebook-f"></i></a></li>


 	<li><a href="TwitterのURL"><i class="fab fa-twitter"></i></a></li>


 	<li><a href="InstagramのURL"><i class="fab fa-instagram"></i></a></li>

</ul>

</div>

<!--ここまで削除-->
</div>

「header.php」

 	 	 	 	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

参照https://www.yamamototetsu.com/wordpress-profile/

Share / Subscribe
Facebook Likes
Tweets
Hatena Bookmarks
Pinterest
Pocket
Evernote
Feedly