サイト管理者紹介の作り方

• ウィジェットを作成し、HTMLをコピペする
• CSSでデザインをカスタマイズする

<div class="admin-box">
サイト管理者画像
<p class="admin-name">サイト管理者名</p>
<hr>
<p class="profile">プロフィール文</p>
<ul>
<li><a href="リンクURL">リンク文</a></li>
<li><a href="リンクURL">リンク文</a></li>
<li><a href="リンクURL">リンク文</a></li>
</ul>
</div>

1. 「サイト管理者画像」に自分の写真のURLを貼り付ける
2. 「サイト管理者名」に自分のペンネームを書く
3. 「プロフィール文」に自分の紹介文を書く
4. 「リンクURL」と「リンク文」を編集する

/* サイト管理者表示 */
.admin-box {
padding: 30px;
border: 1px solid #1e73be;
}

.admin-box img {
box-sizing: border-box;
display: block;
width: 130px;
height: 130px;
border: 2px solid lightgray;
border-radius: 50%;
margin: 0 auto 30px;
}

.admin-box .admin-name {
text-align: center;
font-size: 20px;
}

.admin-box hr {
box-sizing: border-box;
width: 30%;
border: 1px solid #1e73be;
margin: 0 auto;
}

.admin-box .profile {
font-size: 13px;
margin: 30px 0;
}

.admin-box ul {
text-align: right;
}

.admin-box li {
line-height: 30px;
}

border: 線の太さ 線の種類 線の色;