こんにちは、オノユウ(@yumaonodera_)です。
サイト管理者紹介を作りたい人「テーマの機能でサイト管理者紹介を表示しているけど、正直言ってあまりイケてない……おしゃれなサイト管理者紹介を自作したい。」
こういった方向けの記事。
本記事では、HTMLとCSSでサイト管理者紹介を作る方法について解説します。
完成イメージ
PC表示
スマホ表示
それではさっそく作っていきましょう。
ブログ管理者表示の作り方
手順は下記の2つです。
- ウィジェットを作成し、HTMLをコピペする
- CSSでデザインをカスタマイズする
ウィジェットを作成し、HTMLをコピペする
まず、カスタマイザーを開いてください。
カスタムHTMLを開いたら、下記のソースコードをコピペしてください。
<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>
コピーした内容は、自分用にカスタマイズしてください。
- 「サイト管理者画像」に自分の写真のURLを貼り付ける
- 「サイト管理者名」に自分のペンネームを書く
- 「プロフィール文」に自分の紹介文を書く
- 「リンクURL」と「リンク文」を編集する
サイト管理者画像のURLはどこで確認できるかですが、メディアライブラリから確認できます。
プロフィール用の画像を選択したら、URLをコピーし、先ほどのHTMLの画像URLに設定すればOKです。
CSSでデザインをカスタマイズする
次はCSSで見た目を整えていきましょう。
まず、追加CSSを開いてください。
追加CSSを開いたら、下記のソースコードをコピペしてください。
/* サイト管理者表示 */.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;
}
サイト管理者の枠線を変更したい場合は、「.admin-box」の「border」の値を変えてください。
サイト管理者名の下線部を変更したい場合は、「.admin-box hr」の「border」の値を変えてください。
border: 線の太さ 線の種類 線の色;
まとめ
今回はサイト管理者紹介の作り方について解説しました。
テーマを導入しても、「デフォルトのデザインだとなんかパッとしない」ということもあるでしょう。
そういったときに、HTMLやCSSを知っていると自分でカスタマイズできるので、学んでおくのも良いかと思います。
というわけで、今回は以上となります。
プログラミングについては他にも色々書いているので、よかったら下記リンクもどうぞ。
コメント