Webサイト製作ならTeeem

WordPressサイドバーにプロフィールをHTMLとCSSを使って作る方法(HTML&CSS版)【ワードプレス】

panda-lion panda-lion
■HTMLL
<div class="profile-box">
<span>ブログ管理者</span>
<img class="alignnone size-medium wp-image-48" src="http://webpandablog.local/wp-content/uploads/2021/03/cropped-site-icon-300x300.png" alt="" />
<span>ぱんだライオン</span>
	<p>はじめまして。このブログの管理者のぱんだライオンです。webサイトチャンネルのデモサイトです。</p>
</div>


■CSS
.profile-box {
	text-align:center;
}
.profile-box span{
	display:block;
	padding:20px 10px;
}
.profile-box img{
	width:150px;
	height:150px;
	border-radius:50%;
	background:#ccc;
}
.profile-box p{
	text-align:left;
}